Help us understand the problem. What is going on with this article?

SVGアニメーション作成

More than 1 year has passed since last update.

SVGアニメーション作成

SVGアニメーションがずっと上手く設定できなくて悩んでいたけど、
急に理解できたのでメモ書き。

HTML側記述例

<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="768" viewBox="0 0 1024 768">
  <path d="M690,0c172.1,66.9,151,140.4,334,207V0H690z">
    <animate
      id="open"
      attributeName="d"
      begin="indefinite"
      dur="800ms"
      fill="freeze"
      keyTimes="0; 0.5; 1"
      calcMode="spline"
      keySplines=".43,.07,.71,.41; .3,.56,.64,1.02"
      values="M690,0c172.1,66.9,151,140.4,334,207V0H690z;
              M0,0c723.3,241.9,416.7,592.6,1024,768V0H0z;
              M0,0c-54.8,945.6-263.8,938.6,1024,768V0H0z" />
    <animate
      id="close"
      attributeName="d"
      begin="indefinite"
      dur="800ms"
      fill="freeze"
      keyTimes="0; 0.5; 1"
      calcMode="spline"
      keySplines=".43,.07,.71,.41; .3,.56,.64,1.02"
      values="M0,0c-54.8,945.6-263.8,938.6,1024,768V0H0z;
              M0,0c723.3,241.9,416.7,592.6,1024,768V0H0z;
              M690,0c172.1,66.9,151,140.4,334,207V0H690z" />
  </path>
</svg>
  • idはjsから操作する際に使用。
  • attributeNameはアニメーション対象の属性を指定。
  • beginで開始タイミングを設定。(jsから指定する際などはindefiniteを設定)
  • keyTimesは時間配分の設定。
  • calcMode="spline"を設定することでアニメーション間のイージングを設定可能になる。
  • keySplinesでアニメーション間のイージングを設定。
  • valuesでアニメーションの動きを指定する。今回はパスを指定している。色なども設定可能。

javaScript側の設定

$(btnOpen).on('click', (e) => {
  //svg openのアニメーションスタート
  $('#open')[0].beginElement();
});

$(btnClose).on('click', (e) => {
  //svg closeのアニメーションスタート
  $('#close')[0].beginElement();
});

HTML側で設定したanimateのどれを起動させるかによってアニメーションを使い分ける。
参考
https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimationElement

注意点

頂点の数があっていないとアニメーションが上手く動かない。
イラストレーターで同じ数のアンカーから作成したもの同士であれば比較的きちんとアニメーションしてくれるので作成時に注意が必要。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away