Figma 2022/02/04 (更新日:2023/01/10)

【css × figma】作成したオブジェクトをアニメーションさせる方法

figmaでオブジェクトを作成して、web上で表示させそれをアニメーションする方法を見ていきます。

【figma】必要なことを覚えてオブジェクトを自由に作成する

2022年02月05日

Figma

オブジェクトを作成してアニメーションさせる

figmaでオブジェクトを作成していきます。

① 500px × 500px のフレームを作成して、その② x=150px y=100px の位置に200pxの線のオブジェクトを作成します。
フレームのfill属性を削除、stroke属性を追加、線のオブジェクトはペンツールで作成、ストロークの色を変更して太さを10pxに指定しています。

SVGをブラウザで表示

③ フレームを右クリック > Copy/Paste as > Copy as SVG でコピーしたSVGをhtmlファイルにペーストします。

<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect x="0.5" y="0.5" width="499" height="499" stroke="black"/>
     <path id="line" d="M150 100H350" stroke="#37CBEC" stroke-width="10"/>
</svg>

3: 線のpathに id=”line” を追加します。

animateTransform要素でアニメーション

animateTransformでは、移動、スケーリング、回転およびまたはゆがみのアニメーション制御することができ、実用的な移動と、回転を見ていきます。

移動(translate)

<path id="line" d="M150 100H350" stroke="#37CBEC" stroke-width="10">
     <animateTransform attributeName="transform" type="translate" from="0 0" to="100 100" dur="4s" repeatCount="indefinite" />
</path>

pathの内部にanimateTransformタグを追加します。

水平方向や垂直方向 from=”x y” から to=”x y” へ移動します。
0 0が現在の位置で、マイナスも使うことができます。

共通属性

dur=”4s”　→　移動時間を4秒で指定、(ms, m ,h)が単位で使用できます。
repepatCount=”indefinite”　→　繰り返し移動が行われます、数値を入れるとその回数だけ行われます。

回転

<path id="line" d="M150 100H350" stroke="#37CBEC" stroke-width="10">
     <animateTransform attributeName="transform" type="rotate" from="0 250 100" to="360 250 100" dur="4s" repeatCount="indefinite" />
</path>

オブジェクトの中心の点 (250 100)の位置を中心に、0度から360度回転するアニメーションが行われます。

useタグに書いてもOK

<symbol id="a">
     <path id="line" d="M150 100H350" stroke="#37CBEC" stroke-width="10">
     </path>
</symbol>

<use xlink:href="#a">
     <animateTransform attributeName="transform" type="rotate" from="0 250 100" to="360 250 100" dur="4s" repeatCount="indefinite" />
</use>

useタグ内にanimateTransformタグを設置してもアニメーションします。

※symbolタグでpathを囲い、useタグでsymbolのidを指定して複数回呼びだすことができます。

cssプロパティでアニメーション

animateTransformでアニメーションを実装するよりもこちらのほうが、見やすく使い勝手がいいのでおすすめです。

#line {
     transform-origin: calc(100% * 250 / 500) calc(100% * 100 / 500);
     animation: animate 4s linear infinite;
}

@keyframes animate {
     0% {
          transform: translate(0, 0);
     }

     100% {
          transform: translate(100px, 100px);
     }
}

2: アニメーションの起点を設定します。
線のオブジェクトの中心を、フレームの左上の原点(0, 0)からの割合で指定します。

3: 100% × 中心点 ÷ 全体をx軸とy軸で指定しています。

※calc()を使うと、cssプロパティで計算することができます。

4: animationプロパティは以下のプロパティを一括指定することができます。

animation-name	アニメーション名
animation-duration	所要時間
animation-delay	開始時間を遅延
animation-direction	アニメーション再生の向き
animation-fill-mode	delay時、再生後にどのスタイルを適用させるか
animation-timing-function	再生速度の変化 linear ease-in-out etc..
animation-play-state	アニメーションの paused / running
animation-iteration-count	アニメーションが繰り返される回数、infiniteで無制限

animation: name duration timing count の順で指定しています。

アニメーションの作り方

@keyframes アニメーション名 その中に、6-14: 最初(0%)から最後(100%)までの割合で、プロパティを囲んでアニメーションを作ります。
12: 上の例は、最後の(100px, 100px) の位置まで水平移動するアニメーションになっています。

transformプロパティ

translate(100px, 100px);	水平移動
rotate(360deg);	回転
scale(1.5, 0);	拡大・縮小
skew(45deg, 45deg);	x, y方向の歪み

transformプロパティ以外にもstroke fill opacity 等のプロパティも使用できます。

【CSS×figma】SVGストロークアニメーションを作成する

2023年01月10日

Figma

モーフィングでアニメーション

アンカーポイントの移動やハンドルを変更による、オブジェクトの変形をアニメーションしていきます。

① 線のオブジェクトをコピーして、線の中心にアンカーポイントを追加して② 曲線のオブジェクト（wave右上がり）を作成します。
③ フレームを右クリック > Copy/Paste as > Copy as SVG でコピーしたSVG から曲線のオブジェクト（右上がり）のpathタグを既存のsvgタグに追加します。

<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect x="0.5" y="0.5" width="499" height="499" stroke="black" />

     <path id="line" d="M150 100H350" stroke="#37CBEC" stroke-width="10">
     </path>

     <path d="M150 250C150 250 184.983 308.244 250 250C315.017 191.756 350 250 350 250" stroke="#37CBEC" stroke-width="10" />
</svg>

7: 曲線のオブジェクト(wave右上がり)、このpathタグの中にanimateタグを入れてアニメーションさせます。

① 曲線のオブジェクトの中心のアンカーポイントのハンドルを変更して、曲線のオブジェクト（wave右下がり）に変形します、
変形できたら先程と同様に、② フレームを右クリック > Copy/Paste as > Copy as SVG でコピーしたSVG から曲線のオブジェクト（右下がり）のpathタグを用意します。

※変形前、変形後のアンカーポイントの数は同じでなくてはいけません。

ここで変形前（右上がり）のpathタグ（A）と変形後（右下がり）のpathタグ（B）を用意できたので、アニメーションさせていきます。

わかりやすいように変更前と変更後を並べて比較していきます。

<path d="M150 250C150 250 184.983 308.244 250 250C315.017 191.756 350 250 350 250" stroke="#37CBEC" stroke-width="10" />

<path stroke="#37CBEC" stroke-width="10">
     <animate attributeName="d" begin="0" dur="2s" repeatCount="indefinite" 
values="M150 250C150 250 184.983 308.244 250 250C315.017 191.756 350 250 350 250;
     M150 250C150 250 198.636 187.174 250 250C301.364 312.826 350 250 350 250;
     M150 250C150 250 184.983 308.244 250 250C315.017 191.756 350 250 350 250
     " />
</path>

3: pathタグの d属性を取り除き、4: animateタグの values属性で指定しています。

attributeName=”d”　→　d属性に対してアニメーション
values　→　5: A(wave右上がり) ;(セミコロン)　→　6: B(wave右下がり) ;(セミコロン)　→　7: A(wave右上がり) と順にdの値を指定
begin　→　開始時間を0に指定、その他マウスイベント（click, mouseover）や他アニメーションの状態（#id.end, #id.start）を指定、セミコロンで区切って複数指定する事もできる。（0; click）
end　→　停止時間を指定、その他マウスイベント（click, mouseover）や他アニメーションの状態（#id.end, #id.start）を指定
dur　→　所要時間
repeatCount　→　アニメーションが繰り返される回数、indefiniteで無制限
fill　→　終了時どのスタイルが適用されるか、開始時 remove | 終了時 freeze

モーションパス

オブジェクトがオブジェクトに沿って動くアニメーションを作成します。

モーションパス用のオブジェクトを作成して、先程作ったwaveオブジェクトに沿って動かしていきます。

① フレームの原点を基準にアニメーションするので、星オブジェクト作成後、中心をフレームの原点に合わせた状態で、② フレームを右クリック > Copy/Paste as > Copy as SVG svgのコピーから、星オブジェクトのpathタグを用意します。

<path id="wave" stroke="#37CBEC" stroke-width="10">
     <animate id="wave1" attributeName="d" begin="0" dur="2s" repeatCount="indefinite"
values="M150 250C150 250 184.983 308.244 250 250C315.017 191.756 350 250 350 250;
     M150 250C150 250 198.636 187.174 250 250C301.364 312.826 350 250 350 250;
     M150 250C150 250 184.983 308.244 250 250C315.017 191.756 350 250 350 250
     " />
</path>

<path d="M0 -25L5.61285 -7.72543H23.7764L9.08178 2.95085L14.6946 20.2254L0 9.54915L-14.6946 20.2254L-9.08178 2.95085L-23.7764 -7.72543H-5.61285L0 -25Z" fill="#F0C964">
     <animateMotion dur="5s" repeatCount="indefinite" repeatCount="indefinite" keyPoints="0;0.5;1" keyTimes="0;0.3;1" calcMode="linear" rotate="auto">
          <mpath xlink:href="#wave"></mpath>
     </animateMotion>
</path>

1: waveオブジェクトに idを追加します。

9-13: 星オブジェクトのpathタグの中にanimateMotionタグを追加して、11: 更にmpathタグで対象のオブジェクトのidを指定ます。

rotate=”auto”　→　オブジェクトの傾きに沿って対象のオブジェクトが傾きます。初期値 0
keyPoints=”0; 0.5; 1″ keyTimes=”0; 0.3; 1″ calcMode=”linear”　→　開始 0から終了1までのアニメーションの速度を指定します。例は、中間点(0.5)に、1.5秒(0.3 × 5s(全体))で通過して3.5秒で終了点まで到達するように指定されています。keyPointsとkeyTimesの数は同数でなければいけません。

マスク

あるオブジェクト（mask）と重なる部分のみを表示させる事ができます。

① waveオブジェクトの中間周辺を覆うようにオブジェクトを作成します。
② フレームを右クリック > Copy/Paste as > Copy as SVG でコピーしたSVG から四角のオブジェクトのpathタグ飲みを既存のSVGにコピーします。

追加したオブジェクトをmaskにして星のオブジェクトがその範囲のみ見えるようにしていきます。

<g mask="url(#rect)">
     <path d="M0 -25L5.61285 -7.72543H23.7764L9.08178 2.95085L14.6946 20.2254L0 9.54915L-14.6946 20.2254L-9.08178 2.95085L-23.7764 -7.72543H-5.61285L0 -25Z" fill="#F0C964">
          <animateMotion dur="5s" repeatCount="indefinite" keyPoints="0;0.5;1" keyTimes="0;0.3;1" calcMode="linear" rotate="auto">
               <mpath xlink:href="#wave"></mpath>
          </animateMotion>
     </path>
</g>

<mask id="rect">
     <rect x="198.636" y="155.101" width="96.2207" height="186.027" fill="#E25656" />
</mask>

maskを作成する

10: 追加したオブジェクトのpathタグ
このオブジェクトをmaskにする場合、9-11: maskタグで囲いidを指定します。

maskを適用させる

1-7: 星のオブジェクトのpathタグをg(group)タグで囲ってmaskを指定します。

mask="url(#rect)"

交差部分のみ表示されているのがわかります。

style=”mask-type: luminance;”　→　輝度マスクが適用されます。マスクが白に近づくほどオブジェクトがはっきり表示され、黒だと表示されません。例の場合は中間色なので透過して表示されています。
style=”mask-type: alpha;”　→　アルファマスクが適用されます。マスクが不透明（opacity: 1）に近づくほどオブジェクトがはっきり表示され、透明（opacity: 0;）だと表示されません。

以上figmaでオブジェクトを作成して、web上で表示させそれをアニメーションする方法でした。

全体のコード

<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect x="0.5" y="0.5" width="499" height="499" stroke="black" />

     <path id="line" d="M150 100H350" stroke="#37CBEC" stroke-width="10">
     </path>

     <!-- <path d="M150 250C150 250 184.983 308.244 250 250C315.017 191.756 350 250 350 250" stroke="#37CBEC" stroke-width="10" /> -->

     <path id="wave" stroke="#37CBEC" stroke-width="10">
          <animate attributeName="d" begin="0" dur="2s" repeatCount="indefinite" values="M150 250C150 250 184.983 308.244 250 250C315.017 191.756 350 250 350 250;
                    M150 250C150 250 198.636 187.174 250 250C301.364 312.826 350 250 350 250;
                    M150 250C150 250 184.983 308.244 250 250C315.017 191.756 350 250 350 250
                    " />
     </path>

     <g mask="url(#rect)">
          <path d="M0 -25L5.61285 -7.72543H23.7764L9.08178 2.95085L14.6946 20.2254L0 9.54915L-14.6946 20.2254L-9.08178 2.95085L-23.7764 -7.72543H-5.61285L0 -25Z" fill="#F0C964">
               <animateMotion dur="5s" repeatCount="indefinite" keyPoints="0;0.5;1" keyTimes="0;0.3;1" calcMode="linear" rotate="auto">
                    <mpath xlink:href="#wave"></mpath>
               </animateMotion>
          </path>
     </g>

     <mask id="rect" style="mask-type: luminance;">
          <rect x="198.636" y="155.101" width="96.2207" height="186.027" fill="#ccc" />
     </mask>

</svg>

#line {
     transform-origin: calc(100% * 250 / 500) calc(100% * 100 / 500);
     /* animation: animate 4s linear 1; */
}

@keyframes animate {

     100% {
          /* transform: translate(100px, 100px); */
          /* transform: rotate(360deg); */
          /* transform: scale(1.5, 0); */
          /* transform: skew(100deg); */
     }
}

【css × figma】作成したオブジェクトをアニメーションさせる方法

関連記事

【figma】必要なことを覚えてオブジェクトを自由に作成する

オブジェクトを作成してアニメーションさせる

SVGをブラウザで表示

animateTransform要素でアニメーション

移動(translate)

共通属性

回転

useタグに書いてもOK

cssプロパティでアニメーション

アニメーションの作り方

transformプロパティ

関連記事

【CSS×figma】SVGストロークアニメーションを作成する

モーフィングでアニメーション

モーションパス

マスク

maskを作成する

maskを適用させる

全体のコード

Figma SVG形式のリストアイコンの作成・適用させる方法

【figma】必要なことを覚えてオブジェクトを自由に作成する

Figma photosを使って無料画像素材サイトにアクセスする

【css × figma】作成したオブジェクトをアニメーションさせる方法

【CSS×figma】SVGストロークアニメーションを作成する