[SVG] loadingアニメーション #くるくる座布団

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

人が生きていくためにはデジタルなんて無くてもいいという事は重々承知なのだが、ITにどっぷりつかっている自分がなんとなくリア充に感じている下駄です。
 

もはや、今後未来において、ITが無くなるなんてことは有り得ないし、ITによって、想像もできない世界になる事も否めません。
 

でも、人は衣食住があれば生きていけるし、それだけで十分に幸せも得られます。
 

ITは生活必需品ですが、無くても生きていけるというのは矛盾してますね。
 

エンタメ要素が大きいですが、IoTのように、より生活が便利に快適になる事を体験すると、人は過去に戻りづらくなるんでしょうね。
 

そんな過去にたくさんあったけど最近あまりみなくなった「座布団」をアニメーションにしたのが今回のSVG素材です。

ソース

 

See the Pen
svg-loading square-zabuton
by YugetaKoji (@geta1972)
on CodePen.


 

この素材に関して・・・

今回の素材もcodepenで見かけたアニメーションをsvg移植してみたのですが、HTMLで作ったほうが簡単にできるので、svgのアニメーション機能が乏しいことを改めて認識させられました。
 

これまでは、svg内にstyleを書いてsvg-objectを動かしていたのですが、今回は、オブジェクト内にsvg機能のanimationタグを書いて対応してみました。
 

というのも、HTMLタグであれば、border-radiusという角丸の非常に便利な機能があるんですが、svgでは、pathで曲線を直接書いてあげないといけません。
 

また、それをモーフィングアニメさせる必要があり、どうしてもstyleアニメでできなかった領域なので、animationタグでのモーフィング操作をしました。
 

使い方はcssに慣れている人からするとすこぶる使いづらく、key-frameのような操作が出来なかったので、この点はストレスが残る仕上がりになってしまいました。
※本当はできるのかな?key-frameアニメーション???
 

でも、なんとなく元素材と近い動きは再現できたので、今回はこれでヨシとしておきます。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です