Enhance Swipe Elements: array to transitions + fix to/loop transform conflict

[ystknsh]

Summary

Swipe Elements の to フィールドを配列対応にし、to と loop の transform 干渉を修正する提案。

1. to を配列化 — 複数回の状態変化サポート

現状の制限

to は1つのオブジェクトしか指定できないため、1要素で「表示→非表示」のような複数回の変化ができない。

// 現状: 1回しか変化できない
{ "opacity": 0, "to": { "opacity": 1, "timing": [7.8, 8.3] } }

提案

to をオブジェクトまたは配列として受け付ける:

{
  "opacity": 0,
  "to": [
    { "opacity": 1, "timing": [7.8, 8.3] },
    { "opacity": 0, "timing": [23, 23.5] }
  ]
}

ユースケース

表情切り替え（絵本アニメーション）:

• キャラの表情を複数回切り替え（sleep → smile → angry）
• 各レイヤーが「表示して、後で消す」必要がある

移動 + 反転:

• キャラが左→中央に移動、後で左右反転

{
  "to": [
    { "translate": [500, 0], "timing": [0.5, 7] },
    { "scale": [-1, 1], "timing": [23, 23.5] }
  ]
}

ジャンプしながら移動:

{
  "to": [
    { "translate": [50, -40], "timing": [0, 0.3] },
    { "translate": [100, 0], "timing": [0.3, 0.6] },
    { "translate": [150, -40], "timing": [0.6, 0.9] },
    { "translate": [200, 0], "timing": [0.9, 1.2] }
  ]
}

実装の方向性

• スキーマで to を SwipeTo | SwipeTo[] に変更
• generateTransitionCode() で配列の場合は複数の animation.animate() を生成
• 後の to エントリは前の終了値を開始値として使う

---

2. to + loop の transform 干渉を修正

現状の問題

同じ要素に to（translate で移動）と loop（bounce でジャンプ）を指定すると、loop が to の transform を上書きする。

原因（swipe_to_html.js）:

// render() 内の実行順序
function render(frame, totalFrames, fps) {
  animation.update(frame, fps);   // to: el.style.transform = 'translateX(100px)'
  __processLoops(frame / fps);    // loop: el.style.transform = baseTransform + 'translateY(-20px)'
                                  // ↑ to の値が消える
}

__processLoops() が el.dataset.baseTransform（初期値）をベースにするため、animation.update() が設定した値が毎フレーム上書きされる。

修正案

__processLoops() で el.dataset.baseTransform ではなく el.style.transform の現在値をベースにする:

// Before
var base = el.dataset.baseTransform || '';

// After
var base = el.style.transform || '';

これにより to で設定された translate に loop の bounce が追加される形になり、「移動しながらジャンプ」が自然に動く。

---

背景

絵本アニメーション制作で Swipe Elements を使おうとした際、以下が html + script（render 関数）でしか実現できなかった:

• キャラの表情を3段階で切り替え（to が1回しか使えない）
• キャラが歩きながら跳ねる（to と loop が干渉）

to 配列化 + loop 干渉修正で、これらが宣言的 JSON だけで定義可能になる。

🤖 Generated with Claude Code