SVG、桜を散りばめるアニメーション。

〽️ webサイトを春で彩ろう。

SVGアニメーション、作り方。

静的コンテンツの枠を飛び出す。

CSSアニメーション、作り方。

webアニメーションを１から学ぼう♪

⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。

春を思わせよう。

こんにちは、「ふ」です。
今回はSVGを使い、webページの画面に桜の花びらを散りばめるアニメーションを作っていきたいと思います。

仕組み。

仕組みはお決まりのランダム発生です。「回転しながら横移動する、花びらアニメーション」をSVG領域にランダムに発生させるというもの。

今回ランダムにするパラメータは、花びらの大きさ(width属性)とSVGに追加する際の位置（Y属性）です。
春を思わせるようなサイトの演出に利用してください。

花びら１つ。

では作成していきます。
はじめに最小単位である、「回転する花びら」を作りましょう。

Vectornatorやイラレを使い、画像を作成。

この花びらには、回転アニメーションを施します。
したがって回転時にオブジェクトがはみ出さないよう、アートボードの大きさを調整しておきましょう。
あとからCSSで「overflow:visible」としてもいいのですが、画像作成の段階で調整しておくに越したことはありません。

SVGファイルとして書き出し、HTMLの<body> 〜 </body>内にインラインで流し込みます。

流し込んだSVGのコードです（このままコピペで使えます）。
花びらオブジェクトにはCSSで呼び出せるようclass名「hitohana」をつけておきました。

.hitohana { 「「３/* 回転の基準をオブジェクトの中央に */」」 transform-box:fill-box; transform-origin:center; animation:hitohana 2s linear infinite; } @keyframes hitohana { to { transform:rotateZ(1turn) rotateY(0.5turn); } }

花びらオブジェクトに対して、CSSアニメーションを指定します。

・transform-box、transform-originで基準点を中央に指定。
・キーフレーム。Y軸を中心に半回転しつつ、Z軸中心に１回転させる、というものにしました。

結果⬆︎です。
最小単位の花びらオブジェクトはこれで完成。

transform基準点の取り方、グラデーションについては⬇︎の記事で詳しく紹介しています。

SVG、要素を基準にtransform。

2021.12.18
これまでの苦労は何?（笑）。

SVGのグラデーションについて。

2021.10.23
カラーストップ/オフセットとは？

SVGの中で発生させる。

HTML上に別のSVG領域を作り、作成した花びらアニメーションを取り込みます。
〜のですが、今回は花びらオブジェクトの大きさをランダムに変化させるのでした。それにはsetAttributeを使ってwidth属性を操作するのが便利です。それにあたり、

もし花びらのpath要素のみを取り込んだ場合。
これでも表示・アニメーションは可能です。しかしpath要素自体はwidthやheight属性を持っていないので、大きさを容易に変化させることができません。

したがってwidth属性が使える<svg>要素ごと、外側のSVG領域に挿入するようにしましょう。

挿入するにあたり、外側のSVG内にグループ要素「#kaze」を用意し、その中に花びらSVGを記述します。外側SVGの領域内で、花びらSVGを横移動させるためのグループ要素です。
また試しに花びらSVGのwidthを「20%」にしてみました。

現在の状態⬆︎です。
<svg>要素ごと挿入しているため、width属性を使って大きさのコントロールを簡単に行うことができます。

そして先ほど付与したid「kaze」で内側のSVGを呼び出し、回転花びらを風に乗せましょう。

#kaze { animation:kaze 4s linear infinite; } @keyframes kaze { from { transform:translate(「「１-20%,-20%」」); } to { transform:translate(「「１100%,20%」」); } }

「風に乗りながら散っていく」ように、真横ではなくY方向に+-20%、上下させました。
花びらSVGのwidthは「20%」にしているため、ちょうど画面の外から外へ移動するよう、translateXの値を指定します。

風に乗って散っていく花びらができました。
次はこれをランダムに発生させます。

ランダム生成。

ここからはJavaScriptを使い、ランダム発生を実装していきます。
今回ランダムにさせたいものは、

　・Y方向の位置
　・花びらオブジェクトの大きさ

の２つです。
これらは花びらSVGのY属性、width属性に対して指定します。

ランダムの算出。

「風に流される回転花びら」を、外側のSVG領域にまんべんなく出現させたい。そのためのY属性を、+-80%の範囲のランダム値に指定します。数値を-80から+80に振り分けるには、

Math.random( )*160-80

ですね。

また花びらSVGのwidthですが、キーフレーム開始時のtransformXの値は「-20%」です。
widthが20%より大きいと、「画面の外から外へ移動するアニメーション」にはなりません。
ということはMAX値が20%。
加えて、あまり小さくなりすぎてもどうか....最小でも5%くらいにしたい。
なので、5%〜20%の範囲としました。振り分けは、

Math.random()*15+5

ということに成増。

下準備＊２。

JavaScriptを書いていく前に、下準備が２つほどあります。

#kaze { 「「３/* infiniteを外しておく */」」 animation:kaze 4s linear; }

花びらSVGの親である「#kaze」に施していた横移動のアニメーションですが、先ほどはプレビューしやすいように繰り返しを「infinite」にしていました。
このままランダム発生させると無限増殖してしまうので、「infinite」の指定を外すことで再生回数を初期値の「1」にしておきます。

<g id = "kaze"> <svg viewBox="0 0 128.7 130.2" width = "20%" 「「１y = "-100%"」」> ....

オリジナルの花びらSVGはアニメーション終了後、規定の位置に静止したまま表示されてしまいます。
仕方がないのでy属性を「-100%」とし、viewBoxの外側に逃しておきましょう。これで表示されなくなります。

JavaScript。

それではJavaScriptを書いていきましょう。

「「３//#kazeを取得」」「「１　..①」」 const kaze = document.getElementById("kaze"); 「「３//複製・追加関数」」「「１　..②」」 function hukusei() { 「「３//#kazeを複製」」「「１　..③」」 let clone = kaze.cloneNode(true); 「「３//アニメーション終了後に削除」」「「１　..④」」 clone.addEventListener("animationend",function() ｛ bbclone.remove(); ｝); 「「３//cloneの中の花びらSVGを取得」」「「１　..⑤」」 let hanabira = clone.children[0]; 「「３//大きさをランダムに」」「「１　..⑥」」 hanabira.setAttribute("width",`$｛Math.random()*10+5｝%`); 「「３//Y座標をランダムに」」「「１　..⑦」」 hanabira.setAttribute("y",`$｛Math.random()*160-80｝%`); 「「３//外側SVGに追加」」「「１　..⑧」」 kaze.parentNode.appendChild(clone); } 「「３//0.5秒ごとに発生させる」」「「１　..⑨」」 setInterval(hukusei,500);

① 花びらSVGの親要素である「#kaze」を取得。

② #kazeを複製し、外側SVGに追加する関数「hukusei」を定義します。

③ cloneNode( )メソッドで、#kazeを複製。

④ 複製したものが無限増殖しないよう、アニメーション終了後は自身を削除するようにイベントリスナを仕掛けておきます。

⑤ 花びらSVGは#kazeの直下の子要素でした。children[0]で取得します。

⑥⑦ さっき計画した通り、setAttributeで、花びらSVGのwidthとy属性をランダムにします。

⑧ ここまで加工したものを外側SVGに追加。
外側SVGは#kazeの親要素なので、parentNodeで参照しています。

⑨ setIntervalで500msごとに定義した関数を実行。

できました！
お好みの「散りばめ具合」になるよう、パラメータを色々と調整してみてください。