アニメーション
モーショングラフィックスの真似をしたい。
https://twitter.com/gummasimedi/status/740509084198133762
https://twitter.com/gummasimedi/status/899818689339445248
イージングのコレクション
http://cubic-bezier.com/#.96,.04,.04,.96
http://cubic-bezier.com/#.80,.08,.15,.96
若干動き出しが遅いようだけど、どうやって使い分けてるんだろう？
複数の要素で差を付けたいのか、緩急が付きすぎるのを防止しているのか？
http://cubic-bezier.com/#.04,.96,.96,.04
途中で一旦止まってみせるイージング
緩急緩の後に急緩急みたいなのをつなげると自然そう
http://cubic-bezier.com/#.98,.02,.02,.98
http://cubic-bezier.com/#.96,.00,.00,.99
どうやって複数の要素での動き出しをずらすのか？
動き出しのカーブを若干緩くする？
動き出し自体をずらす？
ライブラリ
https://github.com/gre/bezier-easing
https://cdn-images-1.medium.com/max/2000/1*boQYFGPLtlDof3RRs124bQ.gif
https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
アニメーションの情報量
Googleのアニメーションは「物理的な挙動に寄せた自然さ」が売りなので、情報量は低めに抑えている
「きつい緩急」は情報量が増える
#モーショングラフィックス #アニメーション