- 文字が線画を描いていくように現れる、アニメーション。
事前準備
- イラストレーターで大きめの文字を作る。
- 文字をアウトライン化する。
- dreamweaverを立ち上げて、フォルダを作る。その中に先ほど保存したSVGファイルと、新規で作ったhtmlファイルを格納する。
- まず、svgファイルをダブルクリックしてdreamweaverに表示してみる。
- <svg>タグの中には、いくつかの<path>タグがある。
- 今回使うsvgファイルの中にあるパスの数だけ<path>タグは存在する。
- すべての<path>タグにclass名をつけておく。文字だから<path class="char">
- （おまけ）<div id="container">で<svg>タグを囲って、cssを使って画面中央に文字を表示させておく。
アニメーションを作る。
- その前に英語の勉強。stroke＝一筆、筆を上げないで描いた線のイメージ。
- cssでは「stroke」は「画像エレメントの輪郭線の色」です。
- 画像エレメントには他にも、stroke-width=輪郭線の太さ、fill=塗りの色、が定義できるみたいです。
- ということで、まずスタイルシートで「.char」に対して、「stroke:#ffffff;」「stroke-width:3px;」「fill:#ffffff;」と記述します。アニメーションのスタートは、背景と同化して見えないセッティングにしています。つまり「stroke」と「fill」の色を背景色にすれば、最初は文字が見えないことになります。
- 現状をプレビューして確認しよう！
- そしてこれから出てくる用語の解説。mdnより。
- dash=破線の実線部分
- gap=破線で線の切れている部分
- ナンノコッチャ？にならないための図解。
- ということでコードを書いていく。すべてはスタイルシート。
.char{
stroke: #ffffff;
stroke-width: 2px;
fill:#ffffff; //最初は見えないように塗りも線も白
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation:test 5s ease-in-out 1s forwards;}
- testはアニメーションの名前、
- 最初の秒数はduration =アニメーションの再生時間、ここの値を１２０ｓとか長く設定すると、アニメーションの様子が観察できる。とこが始点でどうやって描かれるのか一目瞭然。ゆっくりも悪く無い。
- ２番目の時間は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
意味がないので中間は省略！
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>
- プロの仕事↓
