⬆︎SVGついてのまとめページはこちら。
こんにちは、「ふ」です。
今回はWeb Animations APIというものを使ってSVGをアニメーションさせてみたいと思います。
これは、ネイティブのJavaScriptによるwebアニメーションの実装方法で、比較的新しく作られたものです。
CSS、SVGやJsの外部ライブラリなど、現在乱立状態にあるwebアニメーションの実装方法。Web Animations APIは、それらを統合して管理できるようにする、という目的で開発されました。
「ふ」も初めて使うWeb Animations API。今回はややレビューっぽい内容となるのですが、ぜひ一緒に作っていきましょう。
◼︎ Web Animations APIは2020.11月現在、ChromeとFirefoxにおいては動作が確認できています。
◼︎ 記事内には実際にWeb Animations APIで実装したサンプルを貼っています。
ブラウザによっては動作しない場合もあるのでご了承ください。
Web Animations APIにおけるアニメーションの構文は以下のように成増。
◼︎ JavaScript
引数の「keyframes」にはタイムライン、「timing」には時間などの設定が記述されます。
◼︎ CSS
ここでCSSのkeyframeアニメーションの構文を見てみましょう。
①の内容が引数「timing」、②が引数「keyframes」に該当します。
✡ 2つの引数、keyframeとtimingに関するオブジェクトは以下のように記述します。
◼︎ JavaScript
keyframeオブジェクトは、大括弧 [ ] で囲んで配列のように記述します。
キーフレームごとに波括弧 { } で囲み、カンマで区切りましょう。キーフレームの内容は、CSSのプロパティと値を記述する要領で構いません。
ただし、値のほうはクオテーションで囲まなければならないみたいです。
特に指定がない限り、キーフレームは等間隔のタイミングで配置されます。フレームが2つの場合は0%ー100%、3つであれば0%ー50%ー100%の状態を指定したことに成増。
◼︎ JavaScript
timingプロパティに関しては通常のオブジェクト宣言で大丈夫です。
全体を波括弧 { } で囲み、「名前 : 値」をカンマで区切って書いていきましょう。
keyframeの時はCSSのプロパティ名で良かったのに対し、timingプロパティにはAPI固有の名前と値形式を使用する必要があります。
上に挙げたのはほんの一例ですが、
・ duration
継続時間。Jsではミリ秒で記述するので、4秒の場合「4000」とする。
・ iterations
繰り返し。「Infinity」は無限を指定する。頭文字がcapital(大文字)であるところに注意してください。
〜最初はこの辺を調べながらコーディングしていくことになりそうです。
扨(さて)実際にSVG画像を動かしてみるとしましょう。
◼︎ fuuno.svg
こちらの画像を用意しました。
HTMLで呼び出しておきます。
◼︎ HTML
id名を「fuuno」としました。
手始めとして、単に不透明度(opacity)を変化させるアニメーションを作ってみます。
◼︎ JavaScript
お・・動きましたね。
ただこれだけであれば、おなじみのCSSアニメーションが手っ取り早い‥
しかしここはJavaScript。
ということは
やってみましょう。敢えてkeyframeオブジェクトの値に変数を使ってみます。
◼︎ JavaScript
成功です。
「変数を使える」、これはパーティーの始まり ♬
はい、何度も言いますが、今立っている舞台はJsです。せっかくなので1文字ずつアニメーションさせてみましょう。そしてタイムラグもつけていきます。
SVG内の個別の要素にアクセスするために、HTMLにはインラインで記述し、コードの内容を少し書き換えましょう。
◼︎ HTML
HTMLの <body> 〜 </body> 内にSVGコードを埋め込みました(説明に必要のない部分は省略してあります)。
・紫の部分。svgの開始タグに「overflow = "visible"」を加え、アニメーションがviewport(表示範囲)からはみ出しても隠れないように指定しています。
・青の部分。アウトライン化したテキスト全体を「g id = "fuunopiece"」で囲み、1文字ずつのdataも「g」でそれぞれ囲んでいます。
これは、コード上で1文字ごとにアクセスできるよう「テキスト全体」と「各文字」を直属の親子関係にするのが目的です。また、「ぺ」や「ジ」などの文字は複数のパスデータで構成されているため、1文字として扱えるようにグループ化させました。
♨ ここからアニメーションを考えていきます。
① 基本のkeyframeは、Y方向に拡大して元に戻る、というものにしました。
② timingオブジェクトには新たに「delay」を指定。
アニメーションの開始を〇〇ミリ秒遅らせる、というものです。
今回このdelayの値には変数を使います。for文を使い、1文字ずつタイミングをずらしていく作戦です。
③ delay用の変数を「fuunodelay」とし、また一連のアニメーションを一定周期で繰り返すための変数「fuunoitv」も準備しておきます。
✈ それでは全体のコードを書いていきます。
◼︎ JavaScript
timingオブジェクトをfor文の内部で宣言することで、アニメーションの開始時間を徐々にずらしています。
〜結果をみてみましょう。
うまくいきました。お疲れ様です ♪
そして。変数の値を変えてみましょう。
忙しくバウンドしているようになりました。
変数の値を操作するだけで、イメージをガラッと変化させる事ができます。
最後までお読みいただき、ありがとうございました。
今回初めてWeb Animations APIでSVGを動かしてみたのですが、感想を述べたいと思います。
書き慣れていないのもあると思うのですが、少しコードが複雑になってしまう印象です。
単純なアニメーションであれば、CSSで手っ取り早く実装したほうが楽なのかと。
ネイティブのJavaScriptによるものなので変数や文法がそのまま利用できます。
したがって時間的な制御などは自由自在。様々なイベントに対応させるなど、可能性が広がっていきます。
Web Animations API。現状はブラウザ側の対応がまだ不完全ということもあり、まだまだ「万能」というわけではありません。ただし今後整備が進めば、とても面白いものとなりそうです。
webアニメーションを楽しんでいる皆さんも、1つの実装方法として押さえておいたほうが良いかもしれません。「ふ」はとても興味深く感じました。
今後も調査をすすめて、紹介していきたいと思います。ではまた〜 ♩♩♩
関連記事
SVG、線を描くアニメーション。
2020.09.23
〽️ 破線のプロパティをつかいます。
SVG、use要素を使ったモーションパス。
2020.09.07
〽️ ポイントは‥「マイナスの遅れ」。
SVG、モーションパスで複数の要素を動かす。
2020.08.29
〽️ 小技を集結させて実装します。
SVGアニメーション05、アニメーションしている部分をクリッピング(マスク)する。
2020.07.06
〽️ テキストの内部だけアニメーション。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。