webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

svg animation

  • svg animation

  • 文字が線画を描いていくように現れる、アニメーション。

事前準備

f:id:ohta-felica:20160809162925p:plain

  • svg形式で保存する。
  • このとき「文字」「SVG」を選択する。
  • イラストレーターの編集機能を保持」はチェックしない。(はじめからチェックされていないから触らない)

f:id:ohta-felica:20160809163212p:plain

  • dreamweaverを立ち上げて、フォルダを作る。その中に先ほど保存したSVGファイルと、新規で作ったhtmlファイルを格納する。

f:id:ohta-felica:20160809163726p:plain

  • まず、svgファイルをダブルクリックしてdreamweaverに表示してみる。

f:id:ohta-felica:20160809163908p:plain

  • 数字の羅列…
  • <svg>から</svg>まで(svgタグ全体を)コピーして、htmlファイルの<body></body>の間にペーストする。ここが大事!

f:id:ohta-felica:20160809164323p:plain

  •  <svg>タグの中には、いくつかの<path>タグがある。
  • 今回使うsvgファイルの中にあるパスの数だけ<path>タグは存在する。
  • すべての<path>タグにclass名をつけておく。文字だから<path class="char">
  • (おまけ)<div id="container">で<svg>タグを囲って、cssを使って画面中央に文字を表示させておく。

アニメーションを作る。

  • その前に英語の勉強。stroke=一筆、筆を上げないで描いた線のイメージ。

f:id:ohta-felica:20160809170011p:plain

  •  cssでは「stroke」は「画像エレメントの輪郭線の色」です。

f:id:ohta-felica:20160809170309p:plain

  •  画像エレメントには他にも、stroke-width=輪郭線の太さ、fill=塗りの色、が定義できるみたいです。

f:id:ohta-felica:20160809170458p:plain

  •  ということで、まずスタイルシートで「.char」に対して、「stroke:#ffffff;」「stroke-width:3px;」「fill:#ffffff;」と記述します。アニメーションのスタートは、背景と同化して見えないセッティングにしています。つまり「stroke」と「fill」の色を背景色にすれば、最初は文字が見えないことになります。
  • 現状をプレビューして確認しよう!
  • そしてこれから出てくる用語の解説。mdnより。

f:id:ohta-felica:20160809172234p:plain

f:id:ohta-felica:20160809172815p:plain

f:id:ohta-felica:20160809172619p:plain

  • dash=破線の実線部分
  • gap=破線で線の切れている部分

f:id:ohta-felica:20160809173148p:plain

f:id:ohta-felica:20160809181120p:plain

.char{

stroke: #ffffff;
stroke-width: 2px;
fill:#ffffff;  //最初は見えないように塗りも線も白
stroke-dasharray: 3000;
stroke-dashoffset: 3000;  
animation:test 5s ease-in-out 1s forwards; 

}

  • testはアニメーションの名前、
  • 最初の秒数はduration =アニメーションの再生時間、ここの値を120sとか長く設定すると、アニメーションの様子が観察できる。とこが始点でどうやって描かれるのか一目瞭然。ゆっくりも悪く無い。
  • 2番目の時間はdelay=ファイルを読み込んでから、再生するまでの時間、 
  • forwards=ループにしないで最後のフレームで終わる設定。 

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>svg animation</title>
<style>
#container{
width: 300px;
margin: 100px auto;
}
.char{
stroke: #e20613;
stroke-width: 2px;
fill:#ffffff;
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation:test 6s ease-in-out 0.5s forwards;
}
@keyframes test{
0% {stroke-dashoffset:3000;fill:#ffffff;}
85% {stroke-dashoffset:0;fill:#ffffff;}
100%{stroke-dashoffset:0;fill:#e20613;}
}
</style>
</head>

<body>
<div id="container">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g>
<path class="char" d="M37.048,140.703c1.8,0.9,4.8,2.4,4.8,3.9c0,0.75-3,2.85-3.3,3.6c-0.9,1.95-0.9,30.749-0.9,49.348
c0,1.199,0.6,7.35,0.6,8.699c0,4.65-3.3,8.25-7.05,8.25c-4.05,0-4.05-2.7-4.05-3.9c0-0.9,1.05-15.449,1.05-18.449

 

意味がないので中間は省略!

それぞれの<svg></svg>までを貼り付ければいい。

 


c0.15-5.851,0.9-28.499,0.9-32.698c0-2.4,0-7.35-0.299-10.051c-0.15-0.75-0.451-2.85-0.451-3.449c0-0.45,0-1.5,0.75-1.5
s1.35,0.3,6.6,2.85c3.451,1.65,4.951,1.65,8.551,1.65H235.947z M264.146,200.25c2.549,0,4.5-0.899,4.5-4.199
c0-4.95,0.148-26.699,0.148-31.199c0-1.949,0-4.8-4.5-4.8h-39.447c-2.551,0-4.5,0.9-4.5,4.2v31.049c0,2.55,0.301,4.949,4.5,4.949
H264.146z"/>
</g>
</svg>
</div><!--container-->
</body>
</html>

  •  プロの仕事↓