以前も同じ線が描画されるアニメーションを使ってみた事が有った。
lazylinepointerを用いたものでjsに直接svgの座標を書くため、レスポンシブに対応しづらかった。
今回は、レスポンシブに対応しsvgが拡縮される手法を紹介したいと思う。
うずまきを例に…
まずは、この画像をイラレでsvgで保存する。
保存したsvgをテキストエディタで開くとこんな感じになる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.0" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 480" style="enable-background:new 0 0 640 480;" xml:space="preserve"> <style type="text/css"> .st0{fill:none;stroke:#F68829;stroke-width:40;stroke-linecap:round;stroke-miterlimit:10;} </style> <path id="XMLID_3_" class="st0" d="M555,241c0,0-8.7-53.3-22.7-77.3s-49.3-82-85.3-98s-88-32-140-29.3C255,39,205,57,157,101.7 C109,146.3,93.7,207,93.7,251s28.7,124,69.3,151.3c40.7,27.3,92.7,49.3,158,40.7s110-44,117.3-57.3c7.3-13.3,27.3-35.3,28.7-62.7 c1.3-27.3,0-92.7-20.7-127.3c-20.7-34.7-52.7-65.3-84-72c-31.3-6.7-44-8.7-60.7-6.7c-16.7,2-58.7,13.3-76,31.3 c-17.3,18-31.3,27.3-37.3,47.3s-16,33.3-12,61.3s12.7,59.3,33.3,78c20.7,18.7,50,30,68.7,29.3c18.7-0.7,44.7-1.3,65.3-16.7 c20.7-15.3,43.3-24.7,40.7-63.3c-2.7-38.7-8-60.7-30-72.7S325,195.7,303,197s-54.7,4-54,50.7c0.7,46.7,59.3,42,59.3,42"/> </svg> |
HTML側にSVGを貼付ける
必要なのは<svg>から</svg>の中身だけなので、余分な所は取り除く
余計な所を取るとこんな感じになる。これをHTMLの任意部分に貼付けるだけ。
|
1 2 3 4 5 6 7 8 |
<svg version="1.0" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 480" style="enable-background:new 0 0 640 480;" xml:space="preserve"> <path id="XMLID_3_" class="st0" d="M555,241c0,0-8.7-53.3-22.7-77.3s-49.3-82-85.3-98s-88-32-140-29.3C255,39,205,57,157,101.7 C109,146.3,93.7,207,93.7,251s28.7,124,69.3,151.3c40.7,27.3,92.7,49.3,158,40.7s110-44,117.3-57.3c7.3-13.3,27.3-35.3,28.7-62.7 c1.3-27.3,0-92.7-20.7-127.3c-20.7-34.7-52.7-65.3-84-72c-31.3-6.7-44-8.7-60.7-6.7c-16.7,2-58.7,13.3-76,31.3 c-17.3,18-31.3,27.3-37.3,47.3s-16,33.3-12,61.3s12.7,59.3,33.3,78c20.7,18.7,50,30,68.7,29.3c18.7-0.7,44.7-1.3,65.3-16.7 c20.7-15.3,43.3-24.7,40.7-63.3c-2.7-38.7-8-60.7-30-72.7S325,195.7,303,197s-54.7,4-54,50.7c0.7,46.7,59.3,42,59.3,42"/> </svg> |
CSS側のコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
svg{ width:100%; max-width:640px; height:auto; } .st0{ stroke:#F68829; fill:none; stroke-width:40; stroke-linecap:round;stroke-miterlimit:10; stroke-dasharray: 5000; stroke-dashoffset:5000; animation: DASH 3.4s ease-in-out alternate forwards; -webkit-animation:DASH 3.4s ease-in-out 0s forwards; animation:DASH 3.4s ease-in-out 0s forwards; } @keyframes DASH{ 0%{stroke-dashoffset:5000;} 100%{stroke-dashoffset:0;} } @-moz-keyframes DASH{ 0%{stroke-dashoffset:5000;} 100%{stroke-dashoffset:0;} } @-webkit-keyframes DASH{ 0%{stroke-dashoffset:5000;} 100%{stroke-dashoffset:0;} } |
今回はpathが重要で、class.st0が割り振られているので線の色や幅を設定。
animationで動作時間を設定。
keyframesで「stroke-dashoffset」関数で線の位置を設定する。5000から断続的に0まで動かす事で線が描画させるように見える。
今回は線が一筆書きなのでシンプルなのだが、線が複数有るときは「path」が複数有るのでkeyframesもクラスごとに複数割り当てる。
サンプル
最後に実際に動作させたサンプルを置いておく。
