FLIP

Pizza_jp #11

Transcript

1. FLIP
2. アニメーションについて 考えるテクニック
3. なぜテクニックが必要か？
4. ブラウザの処理が 影響するため
5. アニメーション要素のheightを変える
6. アニメーション要素のheightを変える ↓ 他の要素のレイアウトを 再帰的に計算
7. アニメーション要素のheightを変える ↓ 他の要素のレイアウトを 再帰的に計算 ↓ レイアウト計算の時間が1フレームを 超えるとアニメーションをスキップ
8. スキップさせないために パフォーマンス向上させる
9. FLIP
10. ・First
11. ・First ・Last
12. ・First ・Last ・Invert
13. ・First ・Last ・Invert ・Play
14. First
15. アニメーション要素の初期状態
16. Last
17. アニメーション要素の最終状態
18. Invert
19. アニメーションの計算
20. Play
21. アニメーションの実行
22. サンプル
23. 以上です