SVGでWeb Animations API。

〽️構文。 〽️動かしてみる。 〽️せっかくJsなのでもっと。 〽️押さえといたほうがいい。





⬆︎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

element.animate(「「1keyframes」」,「「4timing」」);

引数の「keyframes」にはタイムライン、「timing」には時間などの設定が記述されます。

◼︎ CSS

「「1① element { animation:name 5s infinite; }」」 「「4② @keyframes name { ・・・・・ }」」

ここでCSSのkeyframeアニメーションの構文を見てみましょう。
①の内容が引数「timing」、②が引数「keyframes」に該当します。



✡ 2つの引数、keyframeとtimingに関するオブジェクトは以下のように記述します。

◼︎ JavaScript

let keyframe = [      「「4{ プロパティ:'値' },」」      「「4{ プロパティ:'値' }」」 ];

keyframeオブジェクトは、大括弧 [ ] で囲んで配列のように記述します。
キーフレームごとに波括弧 { } で囲み、カンマで区切りましょう。キーフレームの内容は、CSSのプロパティと値を記述する要領で構いません。
ただし、値のほうはクオテーションで囲まなければならないみたいです。

特に指定がない限り、キーフレームは等間隔のタイミングで配置されます。フレームが2つの場合は0%ー100%、3つであれば0%ー50%ー100%の状態を指定したことに成増。

◼︎ JavaScript

let timing = { 「「1duration:4000, iterations:Infinity」」 };

timingプロパティに関しては通常のオブジェクト宣言で大丈夫です。
全体を波括弧 { } で囲み、「名前 : 値」をカンマで区切って書いていきましょう。

keyframeの時はCSSのプロパティ名で良かったのに対し、timingプロパティにはAPI固有の名前と値形式を使用する必要があります。

上に挙げたのはほんの一例ですが、

・ duration
継続時間。Jsではミリ秒で記述するので、4秒の場合「4000」とする。

・ iterations
繰り返し。「Infinity」は無限を指定する。頭文字がcapital(大文字)であるところに注意してください。

〜最初はこの辺を調べながらコーディングしていくことになりそうです。

動かしてみる。


扨(さて)実際にSVG画像を動かしてみるとしましょう。

◼︎ fuuno.svg




こちらの画像を用意しました。
HTMLで呼び出しておきます。

◼︎ HTML

<img id = 「「1"fuuno"」」 src = "fuuno.svg">

id名を「fuuno」としました。
手始めとして、単に不透明度(opacity)を変化させるアニメーションを作ってみます。

◼︎ JavaScript

「「3//画像を取得」」 const fuuno = document.getElementById("fuuno"); 「「3//keyframeオブジェクト」」 let keyframe = [      {opacity:"0"},      {opacity:"1"} ]; 「「3//timingプロパティのオブジェクト」」 let timing = { duration:4000, iterations:Infinity }; 「「3//実行」」 fuuno.animate(keyframes,timing);

お・・動きましたね。

ただこれだけであれば、おなじみのCSSアニメーションが手っ取り早い‥

しかしここはJavaScript。
ということは



変数は使えるのか?

やってみましょう。敢えてkeyframeオブジェクトの値に変数を使ってみます。

◼︎ JavaScript

「「3//敢えて変数を宣言」」 let 「「1opa」」 = "1"; 「「3//keyframeに使ってみる」」 let keyframe = [      {opacity:"0"},      {opacity:「「1opa」」} ];

成功です。
「変数を使える」、これはパーティーの始まり ♬

せっかくJsなのでもっと。


はい、何度も言いますが、今立っている舞台はJsです。せっかくなので1文字ずつアニメーションさせてみましょう。そしてタイムラグもつけていきます。

SVG内の個別の要素にアクセスするために、HTMLにはインラインで記述し、コードの内容を少し書き換えましょう。

◼︎ HTML

<body> <svg version = ・・「「3 〜略〜  」」 「「4overflow = "visible"」」 > 「「1<g id = "fuunopiece">    1文字目のdata    2文字目のdata    ・・・・ </g>」」 </svg> </body>

HTMLの <body> 〜 </body> 内にSVGコードを埋め込みました(説明に必要のない部分は省略してあります)。

・紫の部分。svgの開始タグに「overflow = "visible"」を加え、アニメーションがviewport(表示範囲)からはみ出しても隠れないように指定しています。

・青の部分。アウトライン化したテキスト全体を「g id = "fuunopiece"」で囲み、1文字ずつのdataも「g」でそれぞれ囲んでいます。
これは、コード上で1文字ごとにアクセスできるよう「テキスト全体」と「各文字」を直属の親子関係にするのが目的です。また、「ぺ」や「ジ」などの文字は複数のパスデータで構成されているため、1文字として扱えるようにグループ化させました。

♨ ここからアニメーションを考えていきます。

let fuunokey = [      {transform:"scaleY(1)"},      {transform:"scaleY(1.8)"},      {transform:"scaleY(1)"} ];

① 基本のkeyframeは、Y方向に拡大して元に戻る、というものにしました。



delay:(ミリ秒)

② timingオブジェクトには新たに「delay」を指定。
アニメーションの開始を〇〇ミリ秒遅らせる、というものです。
今回このdelayの値には変数を使います。for文を使い、1文字ずつタイミングをずらしていく作戦です。



let fuunodelay =150; let fuunoitv = 2500;

③ delay用の変数を「fuunodelay」とし、また一連のアニメーションを一定周期で繰り返すための変数「fuunoitv」も準備しておきます。

✈ それでは全体のコードを書いていきます。

◼︎ JavaScript

「「3//テキスト(アウトライン化したもの)全体を取得」」 const fuunopiece = document.getElementById("fuunopiece"); 「「3//keyframeオブジェクト」」 let fuunokey = [      {transform:"scaleY(1)"},      {transform:"scaleY(1.8)"},      {transform:"scaleY(1)"} ]; 「「3//delay用の変数」」 「「1let fuunodelay = 150;」」 「「3//interval用の変数」」 「「4let fuunoitv = 2500;」」 「「3//アニメーション関数を定義」」 function timelag() {      「「3//1文字ごとに開始のタイミングをずらす」」      for(i = 0; i < fuunopiece.children.length; i++) {           「「3//タイミングオブジェクト」」           let fuunotime = {                duration:800,                iterations:1,                delay:「「1fuunodelay*i*1.3」」           };           「「3//アニメーションさせる」」           fuunopiece.children[i],animate(fuunokey,fuunotime);      }; }; 「「3//まづは1度実行」」 timelag(); 「「3//その後は一定周期で実行」」 setInterval(timelag,「「4fuunoitv」」);

timingオブジェクトをfor文の内部で宣言することで、アニメーションの開始時間を徐々にずらしています。

〜結果をみてみましょう。






うまくいきました。お疲れ様です ♪
そして。変数の値を変えてみましょう。

fuunodelay = 40; fuunoitv = 800;





忙しくバウンドしているようになりました。
変数の値を操作するだけで、イメージをガラッと変化させる事ができます。

押さえといたほうがいい。


最後までお読みいただき、ありがとうございました。
今回初めて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、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。