下のようになった。
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 {}にそれぞれのタイミングでの胴体の伸び縮みを設定。
以上。