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

2019年12月1日

テクノロジー プログラミング

人が生きていくためにはデジタルなんて無くてもいいという事は重々承知なのだが、ITにどっぷりつかっている自分がなんとなくリア充に感じている、ユゲタです。 もはや、今後未来において、ITが無くなるなんてことは有り得ないし、ITによって、想像もできない世界になる事も否めません。 でも、人は衣食住があれば生きていけるし、それだけで十分に幸せも得られます。 ITは生活必需品ですが、無くても生きていけるというのは矛盾してますね。 エンタメ要素が大きいですが、IoTのように、より生活が便利に快適になる事を体験すると、人は過去に戻りづらくなるんでしょうね。 そんな過去にたくさんあったけど最近あまりみなくなった「座布団」をアニメーションにしたのが今回のSVG素材です。

ソース

<svg class="zabuton" width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <style> svg.zabuton .square-scale{ transform-origin:32px 32px; transform:scale(0.6); } svg.zabuton .square{ transform-origin:32px 32px; animation: roll 0.5s linear infinite; } svg.zabuton .shadow{ transform-origin: 32px 78px; animation: shadow 0.5s linear infinite; } @keyframes roll { 25% { transform: translateY(9px) rotate(22.5deg); } 50% { transform: translateY(18px) scale(1, .9) rotate(45deg); } 75% { transform: translateY(9px) rotate(67.5deg); } 100% { transform: translateY(0) rotate(90deg); } } @keyframes shadow { 0%, 100% { transform: scale(0.9, 1); } 50% { transform: scale(1.1, 1); } } </style> <g class="square-scale"> <ellipse class="shadow" cx="32" cy="76" rx="38" ry="4" fill="rgba(0,0,0,0.3)" /> <path class="square" fill="#1A6844"> <animate attributeName="d" bugin="0.25s" dur="0.5s" repeatCount="indefinite" values=" M0,4 Q0,0 4,0 L60,0 Q64,0 64,4 L64,60 Q64,64 60,64 L4,64 Q0,64 0,60 z; M0,4 Q0,0 4,0 L60,0 Q64,0 64,4 L64,20 Q56,56 20,64 L4,64 Q0,64 0,60 z; M0,4 Q0,0 4,0 L60,0 Q64,0 64,4 L64,60 Q64,64 60,64 L4,64 Q0,64 0,60 z; "/> </path> </g> </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アニメーション??? でも、なんとなく元素材と近い動きは再現できたので、今回はこれでヨシとしておきます。

関連リンク

他のNowLoadingも見る

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。