SVG、もやもやのアニメーション。

〽️ ブログの悩み部分につかおう。




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



もやもやの仕組み。


こんにちは、「ふ」です。
今回はSVGで「もやもや」を表現したいと思います。

でも..　お高いんでしょ

こう⬆︎いったユーザのもやもや表現にお使いください。



仕組みはどうなっているのか。

よく見かける「もやもやアニメーション」の仕組みはどうなっているのでしょうか？ ネットの動画などで「もやもや」な動画をスロー再生して観察してみました。

するとどうやら、

２つの「もやもや画像」を準備して、短時間で表示を切り替えている模様。
これなら２つのパスを重ね合わせ、opacity（不透明度）を0←→1と瞬間的に変化させればOKです。

サクッと実装できるので、ぜひ試してみてください。

画像作成。


画像を準備してSVGで書き出します。

今回はフリーハンド。
Vectornatorやイラレのブラシツールを使い、１つ目の「もやもや」を描きます。
アートボードを正方形にしておくと、書き出し後の操作が楽になります。

その上からもう１つの「もやもや」を描きましょう。
重ね書きすることで、２つのもやもやのバランスを整えながら作画できます。

画像はこれであっさりと完成。
SVGファイルとして書き出しましょう。

画像切り替えアニメーション。


今回はSVGのデータをHTMLにインラインで流しこむのではなく、SVGファイルの中にアニメーションも閉じ込めるようにしました。<img>タグでアニメーションごと画像を呼び出せるようにしたほうが、絵文字として使う場合などに便利だからです。

書き出したSVGファイルを開きます。

<?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 595.3 595.3"> <path 「「１id = "moya1"」」 d="・・・"/> <path 「「１id = "moya2"」」 d="・・・"/> </svg>

２つの<path>要素にそれぞれ「moya1」「moya2」とのid名を付けておきましょう。
ブラシツールで作成した画像なのでpathデータがどえらいことになっていると思いますが、頑張ってタグの先頭を探してください笑。

先述のとおり、CSSアニメーションもSVGファイルの中に書き込みます。

<style> 「「３/* 共通のキーフレーム */」」「「５　....①」」 @keyframes moya { to { opacity:0; } } 「「３/* timing-functionを段階変化に */」」「「５　....②」」 #moya1 { animation:moya 0.5s 「「１steps(2,jump-none)」」 infinite; } 「「３/* 逆再生させる */」」「「５　....③」」 #moya2 { animation:moya 0.5s steps(2,jump-none) 「「１reverse」」 infinite; } </style>


① キーフレームは１つ用意するだけでOKです。
規定値の「opacity : 1」からアニメーション完了時には「0」になるというもの。

② １つ目のpath要素にアニメーションを指定。
ただし今回のアニメーションは「一瞬で画像を切り替える」なので、徐々に不透明度が1→0となるのではなく、瞬間的に「0」になる必要があります。

そこでanimation-timing-functionには「steps」を採用。こうすると連続変化ではなく、アニメーションが段階的に→つまり一瞬で次の状態に推移します。


タイミング関数「steps」については⬆︎の記事で詳しく紹介しています。

③ ２つ目のpath要素にも同じキーフレームを指定します。
ただし、animation-directionを「reverse」とし、再生方向を逆にしておきます。こうすることで、

　・#moya1のopacity: 1→0
　・#moya2のopacity: 0→1

と、２つのpathの不透明度を交互に入れ替えることができます。これが、キーフレームが１つでOKな理由です。

アニメーションもあっさりと完成です。
この２コマアニメーション、「もやもや」以外にも使えそうですね ♪

webに配置して楽しもう。


作成したアニメーション付きSVGをweb上で差し込み画像や、絵文字に利用して楽しんでください。
絵文字にするにはどうすれば？ となった方は、こちら⬇︎の記事で詳しく紹介しています。

絵文字をSVGで自作してwebに表示。

2022.03.20
しかもアニメーション。

今回は「手書き画像を瞬時に切り替える」というものを実装してみました。最後までお読みくださり、ありがとうございます。

ベクター画像と言えば、なめらかなカーブで構成された画像を想像しがちですが、今回のようなフリーハンドで描いたものをSVG化してアニメーションさせるのも、手作り感があっていいアクセントになるのではないでしょうか。「ふ」も作っていてそう感じました。

ではまた〜 ♩











「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。