home / blog / SVG+CSSアニメーションで歩く人を作った

SVG+CSSアニメーションで歩く人を作った

下のようになった。

illustratorでベクターデータを作成

illustratorで作成したデータ

illustratorで動体と脚を分けて作成。脚は2本重ねてあります。

SVGコードをコピーする。

(XDだと選択したオブジェクトを右クリックでSVGコードのコピーができるから楽。illustratorからXDにコピペしてSVGコードコピーしてるけどもっといいやり方ありそう。)

SVGで書き出すと以下のようなコードが得られる。

<svg xmlns="http://www.w3.org/2000/svg" width="53.295" height="164.166" viewBox="0 0 53.295 164.166">
    <path id="パス_22" data-name="パス 22" d="M34.934,111.051c-.4,7.938-3.874,43.114-4.067,45.93,3.145.26,5.741.348,8.293.735a2.77,2.77,0,0,1,2.57,3,3.093,3.093,0,0,1-2.987,3.14c-.709.084-6.6-.107-9.062.163-4.791.535-6.014-.239-6.565-5.037-1.287-11.2-5.228-48.8-5.288-49.659-.4-5.742,17.412-4.346,17.106,1.727" fill="#fff"/>
    <path id="パス_22" data-name="パス 22" d="M34.934,111.051c-.4,7.938-3.874,43.114-4.067,45.93,3.145.26,5.741.348,8.293.735a2.77,2.77,0,0,1,2.57,3,3.093,3.093,0,0,1-2.987,3.14c-.709.084-6.6-.107-9.062.163-4.791.535-6.014-.239-6.565-5.037-1.287-11.2-5.228-48.8-5.288-49.659-.4-5.742,17.412-4.346,17.106,1.727" fill="#fff"/>
    <path id="パス_21" data-name="パス 21" d="M36.735,42.614C43.546,41.1,53.295,32.2,53.295,21.345A21.823,21.823,0,0,0,31.272,0C16.128,0,9.332,10.97,9.332,20.987c0,8.347,4.832,13.751,13.028,21.174C15.457,51.612,4.467,68.2.111,108.759-1.518,126,15.23,129.12,25.724,129c8.56.118,27.572.015,27.571-21.416,0-37.33-10.95-55.357-16.56-64.972" fill="#fff"/>
</svg>

data-nameを削除。idを英語表記に置き換えしておく。

CSSアニメーションを追加

styleタグをsvgタグの中に追加してCSSアニメーションを設定します。

<svg xmlns="http://www.w3.org/2000/svg" id="man-svg" width="53.295" height="164.166" viewBox="-10 -10 80 180">
  <path id="man-foot-1" d="M34.934,111.051c-.4,7.938-3.874,43.114-4.067,45.93,3.145.26,5.741.348,8.293.735a2.77,2.77,0,0,1,2.57,3,3.093,3.093,0,0,1-2.987,3.14c-.709.084-6.6-.107-9.062.163-4.791.535-6.014-.239-6.565-5.037-1.287-11.2-5.228-48.8-5.288-49.659-.4-5.742,17.412-4.346,17.106,1.727" fill="#00A3D6"/>
  <path id="man-foot-2" d="M34.934,111.051c-.4,7.938-3.874,43.114-4.067,45.93,3.145.26,5.741.348,8.293.735a2.77,2.77,0,0,1,2.57,3,3.093,3.093,0,0,1-2.987,3.14c-.709.084-6.6-.107-9.062.163-4.791.535-6.014-.239-6.565-5.037-1.287-11.2-5.228-48.8-5.288-49.659-.4-5.742,17.412-4.346,17.106,1.727" fill="#00A3D6"/>
  <path id="man-body" d="M36.735,42.614C43.546,41.1,53.295,32.2,53.295,21.345A21.823,21.823,0,0,0,31.272,0C16.128,0,9.332,10.97,9.332,20.987c0,8.347,4.832,13.751,13.028,21.174C15.457,51.612,4.467,68.2.111,108.759-1.518,126,15.23,129.12,25.724,129c8.56.118,27.572.015,27.571-21.416,0-37.33-10.95-55.357-16.56-64.972" fill="#00A3D6"/>

    <style>
        #man-foot-1 {
            transform-origin: 20% 30%;
            animation: walkAnim-1 2s linear infinite 0s;
        }
        @keyframes walkAnim-1{
            0% {
                transform: rotate(-15deg)
            }
            50% {
                transform: rotate(18deg)
            }
            100% {
                transform: rotate(-15deg)
            }
        }
        #man-foot-2 {
            transform-origin: 20% 30%;
            animation: walkAnim-2 2s linear infinite 0s;
        }
        @keyframes walkAnim-2{
            0% {
                transform: rotate(18deg)
            }
            50% {
                transform: rotate(-15deg)
            }
            100% {
                transform: rotate(18deg)
            }
        }
        #man-body {
            transform-origin: 0% 100%;
            animation: walkAnim-body 2s linear infinite 0s;
        }
        @keyframes walkAnim-body{
            0% {
                transform: scaleY(1)
            }
            25% {
                transform: scaleY(1.05)
            }
            50% {
                transform: scaleY(1)
            }
            75% {
                transform: scaleY(1.05)
            }
            100% {
                transform: scaleY(1)
            }
        }
    </style>
</svg>

CSSアニメーションのコードの説明

脚のアニメーション

#man-foot-1 {
    transform-origin: 20% 30%;
    animation: walkAnim-1 2s linear infinite 0s;
}
@keyframes walkAnim-1{
    0% {
        transform: rotate(-15deg)
    }
    50% {
        transform: rotate(18deg)
    }
    100% {
        transform: rotate(-15deg)
    }
}

transform-originでtransformの原点を設定します。脚の回転の中心がちょうどいい場所になる所を探して調整。

animation: walkAnim-1(アニメーション名) 2s(アニメーションの長さ) linear(アニメーションの進行速度を一定にする) infinite(アニメーションをループする) 0s(アニメーション開始時間);

@keyframes walkAnim-1 {}の中にそれぞれのタイミングでの脚の角度を設定。

胴体のアニメーション

#man-body {
    transform-origin: 0% 100%;
    animation: walkAnim-body 2s linear infinite 0s;
}
@keyframes walkAnim-body{
    0% {
        transform: scaleY(1)
    }
    25% {
        transform: scaleY(1.05)
    }
    50% {
        transform: scaleY(1)
    }
    75% {
        transform: scaleY(1.05)
    }
    100% {
        transform: scaleY(1)
    }
}

animationの値は脚と同じ。

@keyframes walkAnim-body {}にそれぞれのタイミングでの胴体の伸び縮みを設定。

以上。