ホームページ > 記事 > ウェブフロントエンド > svgを使って美しいアニメーションを素早く描こう！

svgを使って美しいアニメーションを素早く描こう！

青灯夜游転載: 2021-02-14 09:13:293452ブラウズ

ヒーローが SVG を使用して Codepen で素晴らしいアニメーションを描画しているのをよく見かけます。私は常にそれらがどのように機能するかについて興味がありました。これを修正する必要があると常に感じています。 SVG を十分に理解し、SVG パターンを自分で描画した場合にのみ、SVG を動かすことができます。

でもそうではありません。今日は、SVG アニメーションをすぐに実装できる簡単なテクニックを教えます。

Codepen を開き、インターフェースの build ボタンをクリックすると、アニメーションを使用して家を建て、煙とともに家を建てることができます。

デモアドレス: https://codepen.io/johnYu243/pen/bGBVEwv

絶妙な SVG パターンを探しています

自分で描くことはできないので、既成のライブラリを探します。svg ライブラリはたくさんあります。Flaticon、iconfont、Iconfinder、icons8 などの Web サイトで、無料の svg パターンが多数提供されています。

svgを使って美しいアニメーションを素早く描こう！

SVG パターンの分析

OpendevtoolSVG パターンを観察すると、結果:

svgを使って美しいアニメーションを素早く描こう！

elementpath と circle はどちらも svg の DOM 要素です は、それぞれ svg パターン内の線と円を表します。

例:

<path></path>

上記のコードの d の内容: M はペンを (10, 25) に移動することを表し、L は (10, 75) に線を描画します。最後に原点に戻って三角形を描きます。

devtool を通じて、各 path がパターンのどの部分に対応するかを確認できます。

svgを使って美しいアニメーションを素早く描こう！

現時点では、アイデアは次のようになります。各要素がパターンのどの部分に対応するかを知ることができ、アニメーション化したい DOM 要素を操作できるためです。

TimelineLite/TimelineMax ツール

CSS や JavaScript を使って id と className だけでアニメーションを自分で処理するのは、やはりかなり難しく、さらに時間がかかります

#したがって、ツールを借りる必要があります。タイムライン (Lite|Max) と TweenMax はよく知られています GreenSock アニメーションプラットフォーム (略して GSAP) 有名なツールによって開始された作成可能なタイムライン (タイムライン)

GreenSock アニメーションプラットフォーム (GSAP と呼ばれます) は、アニメーションやその他のタイムラインのコンテナーとして使用され、アニメーション全体の制御と正確なタイミング管理を容易にします。

GSAP は、各 Ease 機能の効果を示す Ease Visualizer

も提供しており、次のコードも添付しています:

svgを使って美しいアニメーションを素早く描こう！

デモのアドレス: https://codepen.io/johnYu243/pen/jOVbMzX

数行の簡単なコードで次の効果を実現できます:

svgを使って美しいアニメーションを素早く描こう！

#GSAP の概要

GSAP の API 関数は非常に強力で、関連するコミュニティがあります: 公式 Web サイトのドキュメント、Forum、TimelineMax 中国語マニュアル

最初の住宅建築例では、主に TimelineMax の from と staggerFrom を使用しました。どちらの API も初期値を設定するだけで済み、指定された時間内にトゥイーンアニメーションが完了します:

  tl.from("#House > rect:nth-child(24)", 1, {
      scaleX: 0,
      transformOrigin: "center",
      ease: Power2.easeOut
    })

このステップでは、CSS セレクター #House > rect:nth-child(24) を実行します。 この要素は、scaleX を 0 として中心を変形の起点として開始し、Power2.easeOut を使用して 1 秒以内に元の状態に戻して補正を行います。アニメーション。

    .staggerFrom(
      ["#House > path:nth-child(34)", "#House > path:nth-child(32)"],
      0.8,
      {
        scaleY: 0,
        transformOrigin: "bottom",
        ease: Bounce.easeOut,
        stagger: 0.2
      },
      0,
      "scene1+=0.5"
    )

は from に似ていますが、staggerFrom は複数の CSS セレクターを一度に配置でき、stagger 属性を使用してセレクターを設定できる点が異なります。配列ではどのくらいの時間差が現れるのでしょうか？

詳細な API パラメータについては、公式ドキュメントを参照してください。

次に、SVG に戻り、devtool を使用して ## を削除する必要があります。 svg の内部要素の #CSS セレクター とても簡単です。要素パネルで対応する DOM 要素を見つけて右クリックし、Copy -> Copy selector を選択すると、直接実行できます。それを要素の CSS セレクターにコピーします:

svgを使って美しいアニメーションを素早く描こう！

现在我们能取得svg 中任意部分的CSS Selector，也知道怎么用GSAP API 来进行补间动画，现在是时候将其结合起来！

我们先调整下基本布局，一般在空白Html内直接放入svg时，图案大多会紧靠页面左上角，我们可以套用个margin: 0 auto将其置中，看起来会顺眼一些，你也能额外加些padding。我们在页面添加一个按钮来调用动画：

<!--html part-->
<button onclick="animateBike()"> Build! </button>
<!--css part-->
<style>
#Capa_1 {
  margin: 0 auto;
  display: block;
  width: 256px;
  height: 100%;
}
</style>

接着我们使用TimelineMax提供的staggerFrom函数，利用devtool将滑板车的轮子部分找出来，复制它们的CSS Selector，放入staggerFrom函数参数中，设定x与y轴的scale都从0开始，由center增长，采用Bounce.easeOut的ease function ，而四个Selector间以stagger: 0.2的属性值作为补间动画出现的时间差：

  const tl = new TimelineMax();
  tl.staggerFrom(
      [
        "#Capa_1 > g > path:nth-child(1)",
        "#Capa_1 > circle:nth-child(7)",
        "#Capa_1 > path:nth-child(6)",
        "#Capa_1 > circle:nth-child(5)"
      ],
      1,
      {
        scaleY: 0,
        scaleX: 0,
        transformOrigin: "center",
        ease: Bounce.easeOut,
        stagger: 0.2
      }
    )

简单几行代码，就能让我们的滑板车动起来！