動かない!?anime.jsでsvgのテキストアニメーションの作り方【fillのサンプル】

プログラミング学習

anime jsの使い方覚書です。

前半はqiitaに寄稿しました。後半は主にsvgアニメーションの解説です。

anime jsはtimeline内loopできない!?

タイムラインの最後でループさせようと思いました。

iconが上下に移動するコードですが、こういうコードでは1回しか実装されません。

.add({
  targets: '.icon-anime',
  loop: true,
  keyframes: [
    {
      translateY: [-20, 0],
      duration: 1000,
      easing: 'linear'
    },
    {
      translateY: [0, -20],
      duration: 1000,
      easing: 'linear'
    }
  ]
})

こういう画面はcompleteの使い所のようです。これでうまくいきました。

complete: () => {
  anime({
    targets: '.icon-anime',
    loop: true,
    keyframes: [
        {
          translateY: [-20, 0],
          duration: 1000,
          easing: 'linear'
        },
        {
          translateY: [0, -20],
          duration: 1000,
          easing: 'linear'
        }
    ]
  })
}
スポンサーリンク

動かない!?anime.jsでsvgのpathアニメーションの作り方【サンプル】

svgのフォントが変わる原因はエスクポートデータがおかしい

illustratorやaffinity designer、クリスタでSVGファイルを作成します。

もっていない人はこの機会に契約や入手してもよいでしょう。

AdobeはxdがあったりAdobe fontsがついていたりすることがメリットです。

クリスタとaffinity designerは安価な買い切りです。

フォントはいい感じのものを用意します。フォントワークス などの有料フォントやフリーフォントがありますが、アウトライン化のライセンスを確認します。SVGはアウトライン化しますがHtmlに変換されるため組み込みとは別のようです。

データを作る際、3点ほど注意事項があります。

1、アウトライン化して書き出す必要があります(勘違いする人は少ないかもですが、ラスタライズはピクセル化ですから違いますよ)。

2、文字が表示される順番がある場合、グラフィックソフトでデータを作る際に下側にあるデータから表示されるようなので1文字ずつ分割してデータを作っておきます。アウトライン化した時点でそうなるはずですが、テキストや図形が複数ある場合はこの点を注意しましょう。

3、グラフィックソフトによりますが、レイヤーなど日本語で名前をつけているとidが日本語になる場合があります。グラフィックソフト側で英語に変えとくべきでしょう。なお、グラフィックソフトによるかもしれませんが、非表示レイヤーの情報は書き出されないようです。

svgの表示

エクスポートしたのち、SVGファイルを右クリックしてVsCodeで開きます。

そうするとSVGのデータを取得できます。

svgの部分をhtmlに埋め込むと表示できます。

<svg width="100%" height="100%">
</svg>

幅と高さは100%になっていましたが、削ってCSS側で指定してあげてもいいかもしれません。

anime.jaでsvgのpathが動かない!?

あとはanime.jsでアニメーションさせるだけです。

とはいえ、最初、コピペするだけでは動きませんでした。動かない場合はidやclass名を見直しましょう。グラフィックソフトの階層構造や図形なのか否かによって名前が変わるようです。

pathにclassが全部あれば動くはずです。

<path class="text-anime'">
</path>
anime({
    targets: '.text-anime',
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutSine',
    duration: 500,
    delay(el, i) {
      return i * 3000
    }
})

実際は面倒なのでid pathなんか指定されて紹介されていますね。

targets: '#id path',

図形にclass名の指定がなかったため手動指定しました。

また文字や図形が線だと思っていたけど実は塗りだったというオチでも動きません。線にアニメをかけているわけなので。うっかりと塗りを書き出さないようにします。

複数指定

targets: '#id path, #id2 path, .class path, #shap rect, #shap path',

アウトラインはpath、図形はrectになっていました。他useなどいろいろあるようです。

fill(塗りつぶし)

タイムラインにすると線画アニメーションしたあと、塗りつぶせます。

const timeline = anime.timeline({
    targets: '#id path, #id2 path, .class path',
    direction: 'normal',
    loop: false
})
timeline.add({
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutSine',
    fill: ['transparent', 'transparent'],
    duration: 2000,
    delay(el, i) {
    return i * 150
    }
})
timeline.add(
    {
    easing: 'easeInOutSine',
    fill: ['transparent', '#ffffff'],
    duration: 500
    },
    '-=200'
)

簡単でしたが、参考になれば幸いです。

コメント

タイトルとURLをコピーしました