リンク元　manaka design

SVG LINE アニメーション応用編

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

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;
}

cssアニメーション キーフレーム

@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が使えないブラウザだと、何も見えず、何も起こらなくなって困る」についての対処法

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