velocity.js로 구냐구냐 SVG 그리기

소개

로고나 캐치등에서 가끔 보이는, 곤약과 움직이는 SVG를 velocity.js를 사용해 실장해 보았습니다.
<이런 느낌의 녀석 (무슨 말을 하면 좋을까요. 라인 애니메이션, 스트로크 애니메이션, 라든지?)>



온라인에서 쉽게 만들 수있는 서비스도있는 것 같습니다.
h tp : // / zy ぃ 네 파인 r. 인후 /

준비하는 것

jQuery

velocity.js

svg 파일 (이번에는 Illustrator로 내보내기)

velocity.js란?
- 애니메이션을 실현하는 JS 라이브러리
- 다른 라이브러리와 CSS 애니메이션보다 빠릅니다.
- jQuery 애니메이션과 비슷한 설명이 가능
- jQuery를 사용하지 않아도 작동합니다.

구현

index.html

<!-- SVGファイルの読み込み -->
<object id="logo" data="./logo.svg" type="image/svg+xml">

script.js

$(function() {
    $(window).load(function() {
        var doc   = document.getElementById('logo').contentDocument;
        var $path = $(doc).find("path");

        // pathの長さをcssにセットする関数
        function setPathLengthToStyle($obj) {
            var len;
            var arr = [];
            Array.prototype.slice.call($obj).forEach(function(path, i) {
                arr.push(path);
                len = arr[i].getTotalLength() + 30 + 1 | 0; // +30は、Firefox対策。+1 | 0 は小数点切り上げ
                arr[i].style.strokeDasharray  = len;
                arr[i].style.strokeDashoffset = len;
            });
        }

        // CSSの設定
        $path.css({
            stroke      : "#4aa3df",
            fill        : "none",
            strokeWidth : 1
            // strokeDasharray, strokeDashoffsetは setPathLengthToStyle()で設定
        });
        setPathLengthToStyle($path);

        // アニメーション描画
        $path
             .velocity({ strokeDashoffset : 0 }, 3000 , "swing")
             .velocity({ fill: "#4aa3df" }, 1000 , "swing");
    });
});

path를 그리는 방법에는 약간의 버릇이 있지만, velocity.js 덕분에 애니메이션 자체는 매우 간단하고 알기 쉽게 할 수있었습니다.
또한 예를 들어 애니메이션 그리기를 다음과 같이 바꾸면 차례로 따라가는 표현을 할 수 있습니다.
<이런 느낌>

var pathLength = $path.length;
// アニメーション描画
$path.each(function(i) {
    $(this).velocity({
        strokeDashoffset: 0
    }, {
        delay    : 300 * i,
        duration : 1000,
        complete : function() {
            // ifを外して$(this)にすると、それぞれ終わった直後に塗りつぶしされていく
            if (i === (pathLength - 1)) {
                $path.velocity({
                    fill: "#4aa3df"
                }, 1000, "swing");
            }
        }
    });
});

참고

ht tp // 2 응아. 이 m / svg / svg - 파 thd 라우 ぃ ん g - 아니 마치 온 - ゔ ぇ - 아니 /