available lang for this post:en
way of thinking on web animation
- Timing Modelの世界において、Animationは時間とエフェクトを結びつけるものと定義される
- AnimationはAnimation Effectを再生する箱のようなもの
- AnimationはAnimation Effectの逆再生をしたりスピードをあげたりとか、そういうことができる
- timelineからAnimationをつたってanimation effectに時間が与えられる。これがanimationのcurrent timeである
- animation effectがむすびついているanimationのcurrent time=local time
- 局所座標系っぽいニュアンスを感じる
- このlocal timeをiteration progressに変換することがTiming Modelの要点
- 実際にTiming Modelがlocal timeをiteration progressに変換する段階はたくさんあるが、非常にリーズナブル: https://drafts.csswg.org/web-animations-1/#animation-effect-calculations-overview
active intervalとはanimation effectが実際に効果を持つ期間のこと(fill-forwardsはactive intervalの外ではあるが、それでも効果を持つ唯一のパターン)
active durationとstart delayによって、active intervalが定まる
active durationは単純にiterationの長さと回数をかけたもの
animation effectは3つの状態を取る
-
in play: active interval中！つまり効果発現中
-
current: 効果発現待ちor効果発現中
-
in effect: in playかもしくはfill-forwardsのおかげでin playではないけど効果が残っているときのこと
3つのphaseもある -
before: active intervalの前
-
active: active interval中
-
after: active intervalが終わったあと
-
メモリリークするから消せるようにしている。これremoveの意図。removeというかreplace。
-
animationはreplace stateを持っている
- active
- removed
- persisted
-
animationがreplaceableな条件がいくつかあり、すべてを満たさないとダメ
- finishedである
- removeされていない
- targetを持っていてかつin effectであるようなanimation effectを持つ
-
TimingModelは
-
Timing Modelによって算出された時間をもとに、Animation Modelを使って効果を算出する
- Stateless
- Macだったらディスプレイで設定されるフレームレートがあるけど、ブラウザはそれにあわせてくれる。これはたとえばhttp://memomemoprobe1.blog.fc2.com/blog-entry-58.htmlのサイトでディスプレイレートを変えながら見てみると分かる
- もしアニメーションを、前回の状態をもとに今回の状態を計算するみたいなモデルで定義してしまった場合、前回の状態と今回の状態のあいだが何秒開いているのか、つまりフレームレートを計算に考慮しないといけなくなる
- specはフレームレートを考えたくなかったので、いまの時間だけを入力として、タイミングモデルがそれをイテレーション何回目の何％部分だって計算をして、アニメーション効果が確定するようにしている
- Stateless
-
実際に