Please
hover.
かなり前に『cssでモーショングラフィックス風に円グラフを表示させる』という記事を書きました。その際に cssアニメーションに関して、少しだけザワついたので今更ながら詳細を解説したいと思います。
上記の例は星形をアニメーションさせてますが、これを基準に進めます。(hover してみてください)
ぶっちゃけ svg が出力できるのであれば、どのようなアプリを使っても問題はありません。
一番使い慣れているモノがイイですね!
おそらくですが…大半の方が illustrator を使用するのではないかと推測します。
ちなみに私は少数派だと思いますが FireWorks を使用して作成しております…
それと css を設定する際に必要になりますので、パスの長さを測っておきましょう。
illustrator の場合は【ウインドウ>ドキュメント情報>オブジェクト】でパスの長さが表示されます。
ちなみに今回の例では 1250px となっております。
<path d="M 125 1 L 199 226 L 6 87 L 244 87 L 52 227 L 125 1 Z"/>
上記のソースだと、下記のような意味になります…
上記ソースのように座標(X,Y)の前にある M とか L にはそれぞれ意味があります。
svg では、6タイプのパスコマンドを定義していて、全部で20個のコマンドがあります。
コマンドの大小文字には意味・区別があります。
大文字のコマンドは 絶対座標を指定 し、これに対して小文字のコマンドは現在位置からの 相対座標を指定 します。
実際に使ってみて『これは便利で簡単!』って感じたサイトをご紹介します。
※Webリテラシーが原始人並みの私でも使えました( ̄^ ̄)ゞ
実際にサンプル用に書いた css が下記になります。
.sampleStar path{
fill:none;
stroke:#666;
stroke-dasharray:1250;
stroke-dashoffset:1250;
transition:stroke-dashoffset 2.5s ease-out;
}
.sampleStar:hover path{
stroke-dashoffset:0;
}
stroke-dasharray:1250 にて『線部分1250px・隙間1250px』の破線が作成され、stroke-dashoffset:1250 にて『始点を1250px』ズラしてます。
結果『隙間1250px』部分が表示されます(何も表示されないってことですねw)。
要素に hover した際に transition:stroke-dashoffset 2.5s ease-out・stroke-dashoffset:0
が適用になり、実質 2.5秒かけて 1250px の線が表示されていきます。
このようにして上部にある星形の動きを実装しています。
思った以上に単純・簡単ですよね? の割にはそこそこインパクトがあるのが素敵です☆
div
ol
- for (var x = 0; x < 60; x++)
li
<svg viewBox="0 0 250 250" x="0px" y="0px" width="250px" height="250px"><path d="M 125 1 L 199 226 L 6 87 L 244 87 L 52 227 L 125 1 Z"/></svg>
ol{
list-style:none;
position:relative;
li{
position:absolute;
stroke-dasharray:0 1250;
svg{
animation:rotate 20s linear infinite;
path{
fill:none;
stroke:#333;
}
}
}
}
@for $i from 0 to 60{
li:nth-child(#{$i + 1}){
transform:rotate(#{$i * 6}deg);
animation:star 0.5s ease-out #{$i / 2 + 0.5}s 1 forwards;
path{
opacity:#{($i + 1) / 10};
}
}
}
@keyframes rotate{
0% {transform:rotateZ(0turn)rotateX(0turn)rotateY(0turn);}
100% {transform:rotateZ(1turn)rotateX(2turn)rotateY(1turn);}
}
@keyframes star{
0%{stroke-dasharray:0 1250;}
99.9%,to{stroke-dasharray:1250 1250;}
}
今回のサンプルと同じものを複数個用意して、時間・軸をズラして表示しただけで、ちょっとした立体的な幾何学模様になりますね…実際には使いどころとして微妙ですが、あくまでもこういうモノも簡単に svg + css のみで表現できますよんっていうアレです。
『おまけ』の内容はともかく、svg + cssアニメーションで、イロイロな表現ができそうですよね?
もう書き飽きましたが、ie というブラウザでは一部未対応となりますことを共有しておきます…