今日やったこと(アニメーションをCSSからJSに)
CSSでだいたいの動きを決めてからWeb Animations APIに書き換えた。
- 最初のアニメーションの画像を変更して、私のテーマでありサイト名でもある「Howcome?」の「？」を一番に出すことに。
- 「？」はAffinity Designerのペンツールですでに画像として作っていたが、一番大事なところなので文字情報にしておこうとGoogle Fontsに変更。
- JavaScriptの書き方がおかしいのか、Web Animations APIの書き方に準拠していないのか、animateというプロパティは存在しないと言われ続けて詰んでた。
Web Animations API を利用する - Web API | MDNの魔女のコードを参考に、CSSで作ったアニメーションを適用させようとしていてダメだったので、一度魔女のコードをHTML, CSS, JSすべて丸コピー。動くことを確認。
どうやら、配列の書き方に問題があるっぽい。これならいける。
let howcomeTransform = [
{ transform: 'scale(0.2) translate3D(0, -20%, 0) rotate(20deg)' },
{ transform: 'translate3D(0, 20%, 0) rotate(80deg)' },
{ transform: 'translate3D(0, -10%, 0)' },
{ transform: 'translate3D(0, 10%, 0) rotate(20deg)' },
{ transform: 'translate3D(20%, 50%, 0)' },
{ transform: 'scale(0.1) translate3D(10%, -50%, 0) rotate(-180deg)' },
{ transform: 'translate3D(-18%, 80%, 0) rotate(30deg)' }
];
ここにopacityを入れるとエラーになる。魔女コードにはtransformと一緒にカラーコードの変化も書いてあるのにopacityはだめなのか。わっからーん。
とりあえず「？」が動いたのでよかった。