SVGかAPNGで風を表現したかった話

2021年5月17日 10:51

はじめに

ポートフォリオ制作の中でアニメーションで風のような表現をしたかったのだが中々、思うようにいかなく苦戦したので自分の為の記録も含めて。

まずは作りかったものはコチラ

アニメーションそのものは至ってシンプルです。
なので、最初は時間も掛からずちゃちゃっと出来るだろうと安易な気持ちでいました(これが後の命取りになるとは…)。

SVGか？APNGか?

これは制作以前からSVGにてテキストアニメーションを取り入れてみたいと思ったこともあり、またそれを応用すれば簡単に出来るだろうということで学習も含めてSVGでの作成しかその時は考えていませんでした…
また、SVGの特徴としてベクタ形式であるため滑らかなアニメーションが可能なことも一つの要因です。

SVGにて制作

いくつかのサイトを参考を元に作成。
これが一番、個人的には分かりやすかったかな

で、作成したものがコチラ

パッと見た感じは良さそうに見えたのだが交差する部分で本来であれば
後に出てきて欲しいラインが先にちょろっと出てしまうという…。
これは参考にさせて頂いたサイトにも記載してありましたが
マスクがかかっている所を順を追って表示されていくので
逆を言えばまだ表示させたくないタイミングでもラインがマスクに被ってしまえば表示されてしまう。

さて、どうしたもんか・・・

スクリーンショット 2021-05-16 11.38.27

SVGの問題をどう解決案？

思いついた方法が以下の4つ
①　アニメーション速度でごまかす
②　mask部分の線の幅を一部、変える
③　baseの線の幅の強弱の幅を少なくする
④　他の方法を考える(できれば避けたい…)

アニメーション速度でごまかす /
baseの線の幅の強弱の幅を少なくする
この2つはこの段階で出す妥協案ではないなと思ったのと
これをしてしまうと作りたかったものから遠く離れてしまうし、
そもそも自分のためにもならないと思い即座に却下ですね。

mask部分の線の幅を一部、変える
これが一番、可能性ありそう！
なので線幅ツールを活用できそうだったのでツールを用いて線の幅を変えてみた。

スクリーンショット 2021-05-16 12.19.22

だが、svgファイルを確認してみると線(stroke)ではなく塗り(fill)が適用されておりマスクが上手く反映されない・・・
(SVGアニメーションはマスクをかける際に塗りを無しで線に幅を持たせることで実現出来るものなので)

色々と試してみたがこれは私の使い方がダメなのか機能的に無理なのか
思うような結果には結びつかなかった・・・

他の方法を考える
結果的にはこの選択肢になりました。
元々、SVG一択しか考えてはなかったのだが
ここに至るまでにあ〜でもない！こ〜でもない！と色々と模索し時間をかけたが中々、上手く行かずだったのでここは一旦、SVGから離れて視野を広めて調べていくことに。

APNGにて制作

調べていく中でAPNGに行き着きました。
APNGとはすごく簡単に言うとアニメーションするPNG画像です。
こちら作成方法の手順としては…

①　複数のPNG画像を用意する

②　APNGに変換していく

以上です。

複数のPNG画像を用意する
まずは必要な分のPNG画像を用意していきます。
今回は計19枚の画像を用意しました。

スクリーンショット 2021-05-16 16.00.23

この作業を行なってて一度、失敗したのが枚数を重ねる毎に前に作成した画像の上に重ねるように作成し保存していったので
保存した画像を確認すると画質が粗くなってたことでした。
10枚目くらいの時に「あれ？最初より画質が粗くない？」と、気付きまた最初からやり直しました(泣)
なので、作成の仕方にもよるが保存する際は重ねた状態ではなく一枚毎に保存すると良いと思います。
左：1枚
右：10枚重ねた画像