KUTE.js をアニメーションに効率的に使用する: パート 3、SVG アニメーション-＆＃＆プレス-php.cn

KUTE.js をアニメーションに効率的に使用する: パート 3、SVG アニメーション

王林

リリース： 2023-08-29 12:33:16

オリジナル

1446 人が閲覧しました

KUTE.js をアニメーションに効率的に使用する: パート 3、SVG アニメーション

このシリーズの前のチュートリアルでは、KUTE.js を使用して要素のさまざまな CSS プロパティをアニメーション化する方法を説明しました。ただし、コアエンジンでは、SVG 要素に固有のプロパティをアニメーション化することはできません。同様に、ストロークを使用して、SVG をさまざまなパス形状に変形したり、さまざまな SVG 要素の描画をアニメーション化することはできません。これらのタスクを実行するには、KUTE.js SVG プラグインを使用する必要があります。

始める前に、このチュートリアルの例が適切に動作するには、KUTE.js コアエンジンと SVG プラグインを含める必要があることに注意してください。

変形したSVG形状

ある SVG シェイプを別の SVG シェイプにモーフィングすることは、よく遭遇する機能です。 KUTE.js SVG プラグインは、独自のモーフィングアニメーションを簡単に作成するために必要なものをすべて提供します。

このライブラリを使用すると、SVG 形状を 3 つの方法で変形できます:

fromTo() メソッドを使用して、要素の最初と最後の SVG パスを指定できます。
to() メソッドを使用して、初期パスの指定を避けることもできます。この場合、変換の開始値は、変換対象として選択された要素の d 属性の値に基づいて決定されます。
最終パスを文字列としてトゥイーンに直接渡すオプションもあります。こうすることで、SVG 内に 2 つの異なるパスが存在することを回避できます。

リーリー

初期化中に、ライブラリは提供されたパスに基づいていくつかのポイントをサンプリングします。これらの点は 2 つの異なる配列に格納されます。最後に、これらの配列は補間に使用されます。さまざまなパスの変形動作を制御するために、多くのオプションを設定できます。

morphPrecision: ご想像のとおり、このオプションを使用すると、モーフの精度を指定できます。これは数値として指定され、値が小さいほど精度が高くなります。精度が高くなると精度も向上しますが、パフォーマンスも低下することに注意してください。このオプションは、d 属性に h、l、v のみが含まれる多角形シェイプまたはパスを扱う場合には適用されません。この場合、新しいパスをサンプリングする代わりに、元のポリゴンパスが使用されます。
reverseFirstPath: このオプションの値を true に設定すると、最初の図形の描画パスを反転できます。デフォルト値は false です。
reverseSecondPath: このオプションの値を true に設定すると、2 番目のシェイプの描画パスを反転できます。デフォルト値も false です。
morphIndex: 場合によっては、モーフィングプロセス中にパス上のポイントが長距離をカバーする必要がある場合があります。この動作は、morphIndex パラメータを使用して制御できます。このパラメータを指定すると、すべてのポイントが最短距離で移動するように最終パスを回転できます。

これまでに学んだことを利用して、バッテリーアイコンをブックマークアイコンに変えてみましょう。相対パスを指定するために小文字の l を使用していることに注意してください。これは必須のタグです:

リーリー

次の JavaScript はトゥイーンオブジェクトを作成し、ボタンをクリックするとアニメーションを開始します。リーリー

これは、上記のコードの動作を示すデモです。また、変換アニメーションで

reverseFirstPath を true に設定する追加要素も追加しました。これは、さまざまな構成オプションが変形に及ぼす全体的な影響を理解するのに役立ちます。 2 つのアニメーションをよく見て違いに気づくことができるように、アニメーションの長さは 5 秒に設定されています。

前の例では、メインパスにはサブパスがありませんでした。これにより、変形が非常に簡単になります。ただし、常にそうとは限りません。

バッテリーアイコンとともに追加のサブパスをブックマークに追加しましょう。ここでアイコンを変更すると、最初のサブパスのみがアニメーション化されていることがわかります。 2 番目のサブパスはアニメーションの開始時に消え、アニメーションの終了時に再び表示されます。この場合、すべてのサブパスをアニメーション化する唯一の方法は、サブパスを別のパスに変更することです。以下に例を示します:

リーリー

アニメーションSVGストローク

もう 1 つの人気のある SVG 関連のアニメーション効果には、SVG ストロークを使用して事前定義された形状を最初から描画することが含まれます。これを使用して、ロゴやその他のオブジェクトの描画をアニメーション化できます。このセクションでは、KUTE.js を使用して Font Awesome 自転車アイコンのストロークアニメーションを作成する方法を学習します。

在 KUTE.js 中可以通过三种方式对 SVG 笔画进行动画处理。您可以通过将 fromTo 值设置为 0% 0% 和 0% 100% 来设置从 0% 到 100% 的动画。您还可以通过将值设置为 0% 5% 和 95% 100% 等值来绘制 SVG 形状的一部分。最后，您可以将结束值设置为0% 0%，以创建擦除效果而不是绘图效果。

这是我用来为自行车设置动画的 JavaScript 代码：

var wholeAnimation = KUTE.fromTo(
  "#icon",
  { draw: "0% 0%" },
  { draw: "0% 100%" },
  { duration: 10000}
);

var partialAnimation = KUTE.fromTo(
  "#icon",
  { draw: "0% 5%" },
  { draw: "95% 100%" },
  { duration: 10000}
);

var eraseAnimation = KUTE.fromTo(
  "#icon",
  { draw: "0% 100%" },
  { draw: "0% 0%" },
  { duration: 5000}
);

ログイン後にコピー

正如您在下面的示例中看到的，您无需担心路径内的多个子路径。 KUTE.js 单独为所有这些子路径设置动画，没有任何问题。动画持续时间用于确定最长路径的动画时间。然后根据其余子路径的长度确定其笔画持续时间。

动画 SVG 变换

我们已经在本系列的第二个教程中学习了如何对 CSS 变换值进行动画处理。 KUTE.js SVG 插件还允许您使用 svgTransform 属性来旋转、平移、缩放或倾斜网页上的不同 SVG 元素。

rotate 属性接受确定旋转角度的单个值。默认情况下，旋转发生在元素的中心点周围，但您可以使用 transformOrigin 属性指定新的旋转中心。

translate 属性接受格式为 translate: [x, y] 或 translate: x 的值。当提供单个值时，y 的值假定为零。

当倾斜元素时，您必须使用 skewX 和 skewY。 SVG 中不支持 skew[x, y]。同样，scale 属性也只接受一个值。相同的值用于在 x 和 y 方向上缩放元素。

下面是一个代码片段，它将所有这些转换应用于矩形和圆形。

var rotation = KUTE.allTo(
  "rect, circle",
  { svgTransform: { rotate: 360 } },
  { repeat: 1, yoyo: true }
);

var scaling = KUTE.allTo(
  "rect, circle",
  { svgTransform: { scale: 1.5 } },
  { repeat: 1, yoyo: true }
);

var translation = KUTE.allTo(
  "rect, circle",
  { svgTransform: { translate: [100, -50] } },
  { repeat: 1, yoyo: true }
);

var skewing = KUTE.allTo(
  "rect, circle",
  { svgTransform: { skewX: 25 } },
  { repeat: 1, yoyo: true }
);

ログイン後にコピー

我已将 yoyo 参数设置为 true ，以便在反向播放动画后，变换属性将设置为其初始值。这样，我们就可以通过单击按钮来一次又一次地重播动画。

如果您在演示中按下旋转按钮，您会发现它似乎对圆圈没有任何影响。要观察圆的旋转，您必须对其应用倾斜变换以更改其形状，然后立即单击“旋转”。