Category Archives

3 Articles

Web Animations APIをもっと触ってみたお話 2

前回の投稿で1個のアニメーションを実行するのに三行にまとめることができた。

Web Animations APIをもっと触ってみたお話

でもまだこのコードの中にKeyframeEffectとTimingを毎度記述しているのが気持ち悪い。
なのでこいつらも外に切り出してみた。

一つのアニメーションに関する情報を一つの構造にすることでなるべくシンプルにしてみた。
さらに関数側もkeyとtimingを別に分ける必要がなくなったので引数も1個減らすことができた

とはいえ使いまわしたい時用にkeyとtiming等をもっと使い回す関数も用意しておく。
非エンジニアにオーバーロードを意識させるのはいやなので別な関数にした

Web Animations APIをもっと触ってみたお話

非エンジニアでもアニメーションを作れるWeb Animations API Wrapperを作りたいなとおもって
まずはゴリゴリと自分用のポートフォリオを作り始めていた中で気づいたこと。
1イベントで複数DOMを同時に動かすようなアニメーションを書いていると

結局こんなアニメーションの記述がずらずらと並んでくることになる。
冗長な記述は省きたい。

大きく分けるとすれば
・KeyFrameEffect
・Event
なのだがアニメーション終了後などのイベントを伴わない場合の記述的には
・動かしたい対象
・動き
・アニメーション設定
以外の記述が冗長になるので関数にしてしまえる。
まずは一旦関数化

一旦これで関数化はできたが、アニメーションに関する設定の記述が
他の処理と並ぶのは楽しくないので外部に切り離したい。
次の記事にまとめていく。

Web Animations APIを触ってみたお話。

アニメーションというかお絵かきはそもそも絶望的にセンスのない私が
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より楽そうでした。

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