こんにちは
プログラマー / マネージャー のAです。
最近、
アニメーション系のタスクを取り扱う事が多いんですが
ノウハウの乏しい部下に渡し辛い状況にあります。
基本は
作って、動かして、、反省して、、、学んで、、、、の繰り返しですが
事前知識が無いとそれも辛いので、
何回かにわけて、シンプルにノウハウを共有出来ればと思います。
「カクカクさせない」が優先事項。
ゆっくりと、途切れさせずに動かしましょう。
縦に長いページや重いページで
アニメーションさせようとすると、すぐにカクカクします。
カクカクすると一気に雰囲気が壊れてしまいます。
個人的には興ざめというか、寧ろ「うるさいな、はやくしろよ」って感じ。
カクカクさせないために、次の２つを大事にして実装しています。
１，「遅い」と思わないレベルで、アニメーション速度をゆっくりとる。
２，アニメーション と アニメーション のつなぎ目は極力なくす。
まずは transitionを試す
実は、自分の作るアニメーションの ７割くらいは transition を使ってます。
アニメーション → animation – *… と連想しがちですが
ちょっとしたアニメーションなら、transition だけで十分だったりします。
animation – * は 高機能すぎて色々と試せる分、
試して動かして失敗して…の 負のループにすぐ入ります。
なので、
ある程度制限のある transition で色々試してみて、
仕様的にどうしようもないなら、animation – * を使ってみる が
「実務」の進め方としては良いかなと思います。
まとめると
１，ちょっとしたアニメーションなら transition で十分。
２，animation -* は高機能な分、ハマりがち。
CSSだけじゃなく、簡単なJSにも頼る。
簡単なJSを書くと、アニメーションが凄くラクになります。
逆にCSSだけで何とかするのはちょっと難しいです。
JSの王道としては
「setTimeout」「$.addClass」「$.removeClass」の組合せ。
これらの組み合わせだけで、ほとんどのアニメーションは作れます。
逆にこれらを使わずに何とかしようして生まれたのが
animation – * なのかな？と個人的には思っています。
だから、色々と出来過ぎちゃう。
ただ、先ほども話した通り
animation – * は ハマる可能性がすごく高いので
出来るだけ使わないようにするのが安全かなと思います。
まとめると
１，アニメーションのタスクには、JSも込みで考える。
２，JSは、setTimeout, $.addClass, $.removeClass が必要十分。
３，やっぱり transition がラク。
の３つになります。
animation – * が悪者みたいな扱いになってるので補足しますが
５秒以上かかるような、ストーリー性のあるアニメーションには必須だと思います。
昔、知り合いのバンドのティザー動画を作ったことがあります。
３０秒くらいのアニメーションになったんですが、
JSでやるにはコードが長くなりすぎて、途中で破綻しちゃいました。
最後にまとめると、
１，ゆっくり動かして、カクカクさせない
２，animation – * より、transition
３，CSSだけじゃなくて、簡単なJSも使う
の３つになります。
簡単なアニメーション系のタスクがあれば、
部下に一度させてみたいな、と思います。
