ポートフォリオサイトのオープニングアニメーション作成
Web Animations APIを使ってオープニングアニメーションを作る（仮）
yui540さんの『臆病な魔女』のアニメーション。去年の11月ごろ初めて見てから今なおじわじわと感銘を受けている。
もう何回見ただろう。友人や周りの人にも見せている。
こんなわくわくするものを私も作りたい。
まずは私がわくわくするものを作るぞ。
今までアニメーションはCSSで書いていた。
今回Web Animations APIを使う理由は、JavaScriptを書く練習と理解を深めることが目的。『JavaScriptコードレシピ集』でアニメーションの作り方を見たら紹介されていたのでやってみようかと。
素材はAffinity Designで描いている。描くのに煮詰まったらコードを書き、コードに飽きたらお絵描きに戻っている。なにこの至福のひととき。楽しくてやめられない。
easing: easeOutElasticをやりたい。
結論：現時点ではできなかった。
- Math Functionで挫折。
- switch文の復習をした。
- @paramってなんだ？JSDocコメントを知る。
-
書き方が分からない。consoleエラーを読んでエラー個所を見てもどうしたらいいか分からない。
-
ひとまず『JavaScriptコードレシピ集』のサンプルChapter10の183と同じ動きからスタート。
-
このサンプル、CSSの書き方も参考になった。display: flex; justify-content: centerで要素を真ん中に寄せる方法を知った。
- CSSだと検証画面でeasingやdirectionの他の候補が出てくるが、JSの場合は逐一MDNで参照しないといけないのだろうか。
- 検証画面でJSを動かすやり方が難易度高い。
↓これにeaseOutElasticを組み込みたかった。
requestAnimationFrame()を使う必要があるらしい？
連続して画像を何個も表示させながら、ひとつひとつをアニメーションさせたい。
このひとつのアニメーションでも使われているから、使うんだろうなあ。
目標
- ひとつのやり方に固執しない。
- 途中経過を見せていく。同じ職種の仲間に関わらず、WEB業界関係のない周囲の人や友人にインスタ等で謎の進捗報告をしている。100%終わってから見せたときに「えっ、、これなに・・・？」と予想外の反応をされるとショックがでかい（笑）なるべく多方面の意見を浴びながら制作していくことに慣れる練習。
