趣味に「散歩」と書いてしまう人を見下しますが、自分も毎朝散歩をしている、ユゲタです。
loadingアニメーションも、数をこなしてきて、なんとなくこなれてきましたんですが、今回のflipアニメはロジックにまあまあ苦労してしまいました。
cubeを４つ使ってアニメーション設定をしているんですが、ポイントとしては、４つとも同じアニメ設定で成り立っているという点です。
それぞれを90度回転させてdurationで、再生時間をずらしているのですが、非常に面白い表現になっています。
flipアニメも、単純なrotateではなく、transform-3d機能を使っている点がミソですね。
transform-perspectiveで深度を指定するだけで、ポリゴンっぽい陰影がついて見た目がいい感じになります。
パッと見た感じloadingとして分かりづらい感じもするので、使用できる場所は限られるかもしれませんね。
Flip-Cube
<svg class="flip" width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<style>
svg.flip g.flip{
transform-origin:32px 32px;
transform : rotate(45deg) scale(0.65);
}
svg.flip g.flip > g{
-moz-transform-origin: 32px 32px;
-ms-transform-origin: 32px 32px;
-webkit-transform-origin: 32px 32px;
transform-origin: 32px 32px;
}
svg.flip g.flip > g > rect{
transform-origin:32px 32px;
fill:#00c6ff;
animation: anim-flip 2.5s infinite linear both;
}
svg.flip .flip .flip-1{
transform:rotate(0deg);
}
svg.flip .flip .flip-2{
transform:rotate(90deg);
}
svg.flip .flip .flip-3{
transform:rotate(180deg);
}
svg.flip .flip .flip-4{
transform:rotate(270deg);
}
svg.flip .flip .flip-1 > rect{
fill:#00c6ff;
}
svg.flip .flip .flip-2 > rect{
animation-delay: 0.3s;
fill:#00BCF0;
}
svg.flip .flip .flip-3 > rect{
animation-delay: 0.6s;
fill:#00B8EB;
}
svg.flip .flip .flip-4 > rect{
animation-delay: 0.9s;
fill:#00BCF0;
}
@keyframes anim-flip{
0%, 10%{
transform : perspective(140px) rotateX(-180deg) scale(1.1);
opacity : 0;
}
25%, 75%{
transform : perspective(140px) rotateX(0deg) scale(1.1);
opacity : 1;
}
90%, 100%{
transform : perspective(140px) rotateY(180deg) scale(1.1);
opacity : 0;
}
}
</style>
<g class="flip">
<g class="flip-1"><rect x="0" y="0" width="32" height="32"></rect></g>
<g class="flip-2"><rect x="0" y="0" width="32" height="32"></rect></g>
<g class="flip-3"><rect x="0" y="0" width="32" height="32"></rect></g>
<g class="flip-4"><rect x="0" y="0" width="32" height="32"></rect></g>
</g>
</svg>
デモ
See the Pen svg-loading flip by YugetaKoji (@geta1972) on CodePen.
0 件のコメント:
コメントを投稿