SVG、それは安定した軽量画像システム件、DOMコントロールが簡単なHTMLの、とっても強い武器でもあります。
同じコンテンツを、色々な常識で作るのが、密かに好きな、ユゲタです。
前回作った「spinner」というwindows8のローディングアニメーション処理を、今回はsvgファイルで扱えるようにしてみました。
基本的に名称などは合わせてみたのですが、やはり描画記述ができるsvgは楽でいいですね。
学習などにも使えると思うので、是非内部を見て色々な事を汲み取ってください。
ソース
<svg class="spinner" width="128px" height="128px"
viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<style>
svg.spinner circle{
transform-origin:center;
fill : red;
cx : 32px;
cy : 8px;
r : 3;
animation-name: anim-spinner;
animation-duration: 5.5s;
animation-iteration-count: infinite;
opacity:0;
}
svg.spinner .orbit-1{animation-delay: 0s;}
svg.spinner .orbit-2{animation-delay: 240ms;}
svg.spinner .orbit-3{animation-delay: 480ms;}
svg.spinner .orbit-4{animation-delay: 720ms;}
svg.spinner .orbit-5{animation-delay: 960ms;}
@keyframes anim-spinner{
0% {
transform:rotate(225deg);
opacity: 1;
animation-timing-function: ease-out;
}
7% {
transform:rotate(345deg);
animation-timing-function: linear;
}
30% {
transform:rotate(455deg);
animation-timing-function: ease-in-out;
}
39% {
transform:rotate(690deg);
animation-timing-function: linear;
}
70% {
transform:rotate(815deg);
opacity: 1;
animation-timing-function: ease-out;
}
75% {
transform:rotate(945deg);
animation-timing-function: ease-out;
}
76% {
transform:rotate(945deg);
opacity: 0;
}
100% {
transform:rotate(945deg);
opacity: 0;
}
}
</style>
<circle class="orbit-1"></circle>
<circle class="orbit-2"></circle>
<circle class="orbit-3"></circle>
<circle class="orbit-4"></circle>
<circle class="orbit-5"></circle>
</svg>
サンプル
解説
svg内部にstyleを書いているので、まるでhtmlですよね。
この辺理解できると、svgって全く怖くないし、めちゃくちゃ使いやすい素材になるので、オススメです。
でも、javascriptで扱う時に、ほんの少し苦労すると思うので、その辺を乗り越えると、もはやシステムで利用できるいい武器に成り得ます。
そして、今回のコードは、svgのciecleタグで実装できるので、html版のbefore属性で記述する手間よりも遥かに楽に実装ができてしまいました。
アニメーション方式については、まるで同じなので、見比べてもらうとその違いが明確だと思います。
前回との差別化の為に色を変えていますので、虹色にしたり、色自体をアニメーションさせることで、もっと面白いコンテンツになるかもしれませんね。
その辺は独自に改良して使ってください。
関連リンク
他のNowLoadingも見る
