SVG LINE アニメーション応用編です。前回の続きであります。前回の基礎編はこちら SVG LINE アニメーション基礎編
今回は文字の塗りにグラデーションをつけます。そして前回は、全部同時にアニメーションが開始していたので、3つに分けていきます。「鳥のイラスト」「manaka」「design」の3つに分けて順番にアニメーションさせます。3つを順番にアニメーションさせて、最後にグラデーションのついた塗りが現れるようにします。
<defs> <linearGradient id="MyGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#ccc"/> <stop offset="100%" stop-color="#000"/> </linearGradient> <linearGradient id="MyGradient2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="gold"/> <stop offset="100%" stop-color="darkred"/> </linearGradient> </defs>
上記の謎のタグをsvg開始タグの直下に入れて下さい。defsやlinearGradientはsvg専用のタグです。「manaka」「design」は違う色にしたいので、idをつけて2種類のグラデーションパターンを設定します。今回は「design」を#000,#ccc。「manaka」をdarkred,goldにしました。defsの中に2つのlinearGradientがあるのが確認できますよね。
cssは以下の感じです。fillは塗りです。それを先ほど指定したidの情報を「url("#MyGradient")」といった記述で呼び出します。それとパスごとにanimationを設定します。線を描く指定drawlineと塗りの指定fillinの2つの指定をしました。複数指定する場合は「,」で区切る。そうすれば沢山指定できます。animationとdrawlineの秒数を微調整します。※今回cssアニメーションの詳細については省略すます。
svg{ display:block; margin:3em auto; /*以下の2行はfluid image(レスポンシブデザイン)*/ max-width: 100%; height: auto; } path{ animation-fill-mode: forwards; stroke-width:0.1em; stroke:#000; stroke-dasharray: 1000; stroke-dashoffset: 1000; } #manaka path{ fill:#ccc; /*animation: drawline 6秒かけて実装 ページが読み込まれて8秒後に始まる linear forwards;*/ animation: drawline 10s 10s linear forwards,fillin 20s linear forwards; fill: url("#MyGradient"); } #design path{ animation: drawline2 10s 5s linear forwards,fillin 20s linear forwards; fill: url("#MyGradient2"); } #swallow path{ /*何秒後に開始するか書かない時はページが読み込まれた時となる。*/ animation: drawline3 10s linear forwards; }
@keyframes drawline { 100%{ stroke-dashoffset:0; } } @keyframes drawline2 { 100%{ stroke-dashoffset:0; } } @keyframes drawline3 { 100%{ stroke-dashoffset:0; } } @keyframes fillin { 0% { fill-opacity: 0; } 50% { fill-opacity: 0; } 100% { fill-opacity: 1; } }
線にぼかし等の効果を付ける事が出来ます。イラストレーターになんと!SVGフィルターなるものがありました。
効果ーSVGフィルター
それで書き出されたidの内容は他にも応用できる。url(......)
CSS SVGフィルターでぐぐってみよう。
cssのanimationの指定で、 none | forwards | backwards | both のいずれかを書くと、animation-fill-modeの指定ができます。
https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode
これは、アニメーションの開始前の状態に、@keyframesの0%を適用するか、と、アニメーションの終了後に、@keyframesの100%を適用するか、を指定するもの。
「隠した要素をanimationで出すアニメ」にしたい時(opacityが0から1とか。)に、「css animationが使えないブラウザだと、何も見えず、何も起こらなくなって困る」 ことがあり得ます。animation-fill-modeを指定して、以下の様にすれば、この問題が解決できます。
h1 { opacity: 1; animation: hogehoge 4s 3s linear both; /* hogehoge : hogehogeという名前のキーフレームでアニメ 4s : 0%から100%まで、4秒かけてアニメしろ 3s : 3秒後に開始しろ linear : 直線的な変化でアニメしろ both : アニメ開始前はhogehogeの0%を適用し、終了後は100%を適用しろ */ } @keyframes hogehoge { 0% { opacity: 0; } 100% { opacity: 1; } }
以上になります。。
リンク元 manaka design