アニメーションというかお絵かきはそもそも絶望的にセンスのない私が
Web Animations Apiを触ってみたお話。

うぇぶあにーめしょんあーぴーあいってなに?

ウェブアニメーション API

「ウェブアニメーション API を使うことで 、Web ページの見た目の変更を同期させたり時間を調整すること、
つまり DOM 要素のアニメーションが可能です。
これらはタイミングモデル及びアニメーションモデルという2つのモデルの組み合わせによって実現されます。」

CSS Animationじゃだめなの?とおもったけど
コードでかけるなら直感的に連続的なアニメーションがかけるのでは!?とおもって
なんとなくコードを書いてみました。

Flashとかやったことのある人だとキーフレームっていうのが伝わりやすいけど
簡単にいうと1フレームずつパラパラ漫画が動くなかで
変化の起点になるフレームのこと。

30枚で1秒のパラパラ漫画を書いてその中で人が右に向かって歩いていたのを
0.5秒経過したときに方向転換したい!ってなったら15フレーム目がキーフレーム。
なんだけど15なんていう指定はせずにアニメーションをさせて
その変化の50%まで行った時!みたいな指定ができる。

そんな感じでひとつの動きの中にいくつかのキーを作ることができるんだけど
実際には複数のDOMをこのDOMのアニメーション終わったら次こっちみたいな感じで
動かしたい時どうするんだろうとおもってやってみたのが
このブログのロゴのぶるぶるしてるアニメーションです。

ここでまず文字数分のdivを用意

動きを指定

は単純にY座標の相対的な動きを指定できる。座標0から乱数で作った座標まで

は0.1〜0.15秒かけて動かす。

この部分は動きの変化の具合を指定しているんだけどベジェ曲線が使える。
数値だと何しているかわからないし逆に動きを数値化するのが難しいのだけど
こちらでその変化の具合を可視化してくれるよと教えていただきました。
koutar0さんありがとうございます!
cubic-bezier.com

この .onfinishはアニメーションが終わった時に呼ばれるので
そこで次のdomのアニメーションをplayするように設定。
最後まで行ったらまた最初の文字からループするようにしている

そんな感じで全体としては無限ループになってるアニメーションなんだけど
1個1個のエレメントは

で繰り返しはせず1回に設定されています。

連続的で複数のDOMをより直感的にダイナミックにアニメーションさせたい時は
圧倒的にCSS Animationより楽そうでした。

もっとかっこいいもの作りたい