KUTE.js を使用したアニメーションパフォーマンスの最適化: パート 5、強化されたイージング関数とプロパティ-＆＃＆プレス-php.cn

KUTE.js を使用したアニメーションパフォーマンスの最適化: パート 5、強化されたイージング関数とプロパティ

王林

リリース： 2023-09-02 23:09:03

オリジナル

757 人が閲覧しました

使用 KUTE.js 优化动画性能：第 5 部分，增强缓动函数和属性

このシリーズではこれまで、さまざまな要素の CSS プロパティをアニメーション化する方法、さまざまな SVG 関連アニメーションを作成する方法、Web ページ上のさまざまな要素をアニメーション化する方法を学習しました。テキストコンテンツがアニメーション化されます。 KUTE.js を使用して Web ページ上の要素をアニメーション化するもう 1 つの方法は、さまざまなプロパティの値を変更することです。これには、プロジェクトにプロパティプラグインを含める必要があります。

このチュートリアルでは、プロパティプラグインを使用して、KUTE.js のさまざまな種類のプロパティの値をアニメーション化する方法を学びます。また、さまざまなアニメーション速度を制御するために使用できるさまざまなイージング関数についても説明します。

イージング関数

現実の物体が直線的に動くことはほとんどありません。速度が上がるか遅くなるかのどちらかです。加速と減速も異なる大きさで発生します。これまでのところ、すべてのアニメーションは直線的に進んでいます。全然自然な感じがしないんです。このセクションでは、さまざまなアニメーション速度を制御するために KUTE.js が提供するすべてのイージング関数について学びます。

ライブラリ内のコアイージング関数は、そのままの状態でコアエンジンに含まれています。 QuadraticInOut イージングをアニメーションに適用するとします。これは 2 つの方法で実現できます:

リーリー

各イージング関数には、アニメーション中に要素がどのように加速するかを決定する独自の曲線があります。 Sine 曲線とは直線加速度を意味します。これは Linear イージング関数と同じではないことに注意してください。 linear この関数はアニメーションの線形速度を表し、正弦曲線はアニメーションの線形加速度を表します。つまり、アニメーションの速度は直線的に増加または減少します。同様に、quadratic は 2 のべき乗の加速を意味し、cubic は 3 のべき乗を意味し、quartic は 4 のべき乗を意味し、quintic 5の累乗を表します。 circular および exponential イージング関数もあります。

In、Out、または InOut をイージング関数に追加できます。値 In は、アニメーションが非常にゆっくりと開始され、終了するまで加速し続けることを意味します。値 Out は、アニメーションが最高速度で開始され、最終的に停止するまでゆっくりと減速することを意味します。値 InOut は、アニメーションが最初に加速し、最後に減速することを意味します。

In、Out、または を追加して、アニメーション内で bounce および elastic イージング関数を使用することもできます。 InOut をそれらのいずれかに送信します。以下のデモでは、これらすべてのイージング関数をさまざまな円に適用して、アニメーションの速度にどのような影響を与えるかを確認できます。

探しているアニメーションのペースを提供するコアのイージング関数が存在しない可能性があります。この場合、プロジェクトの Experiment ブランチから 3 次ベジェ関数を含めて、これらのイージング関数の使用を開始できます。

同様に、KUTE.js は、Dynamics.js ライブラリからインポートされたいくつかの物理ベースのイージング関数も提供します。これらすべてのイージング関数とその正しい使用方法の詳細については、ライブラリのイージング関数ページで読むことができます。

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

SVG の属性は、数値と文字列を値として受け入れることができます。文字列には、色の値、または px、em、% などの単位接尾辞が付いた数値を指定できます。プロパティ自体の名前は、ハイフンで接続された 2 つの単語で構成することもできます。これらの違いを念頭に置いて、KUTE.js はさまざまなプロパティの値を指定するためのさまざまなメソッドを提供します。

リーリー

ご覧のとおり、接尾辞の値は引用符で囲む必要があります。同様に、名前にハイフンが含まれるプロパティは引用符で囲むか、キャメルケースで指定する必要があります。

単位のない属性

多くのプロパティは単位のない値を受け入れます。たとえば、パスの ストローク幅 は単位なしにすることができます。同様に、Circle 要素の r、cx、および cy 属性に単位を指定する必要はありません。プロパティプラグインを使用すると、これらすべてのプロパティを 1 つの値から別の値にアニメーション化できます。

さまざまなイージング関数の使用方法がわかったので、さまざまなプロパティをさまざまな速度でアニメーション化できるようになります。以下に例を示します:

var radiusAnimation = KUTE.allTo(
  "circle",
  {
    attr: { r: 75 }
  },
  {
    repeat: 1,
    yoyo: true,
    offset: 1000,
    easing: 'easingCubicIn'
  }
);

var centerxAnimationA = KUTE.to(
  "#circle-a",
  {
    attr: { cx: 500 }
  },
  {
    repeat: 1,
    yoyo: true,
    easing: 'easingCubicInOut',
  }
);

var centerxAnimationB = KUTE.to(
  "#circle-b",
  {
    attr: { cx: 100 }
  },
  {
    repeat: 1,
    yoyo: true,
    easing: 'easingCubicInOut'
  }
);

var centeryAnimation = KUTE.allTo(
  "circle",
  {
    attr: { cy: 300 }
  },
  {
    repeat: 1,
    yoyo: true,
    offset: 1000,
    easing: 'easingCubicOut'
  }
);

ログイン後にコピー

第一个补间使用我们在第一个教程中讨论的 allTo() 方法同时对两个圆的半径进行动画处理。如果设置为 true，则 yoyo 属性以相反方向播放动画。

两个圆圈的 cx 属性分别进行动画处理。然而，它们都是由同一个按钮点击触发的。最后，两个圆圈的 cy 属性同时以 1000 毫秒的 offset 进行动画处理。

颜色属性

从版本 1.5.7 开始，KUTE.js 中的属性插件还允许您对 fill、行程 和 stopColor 进行动画处理属性。您可以使用有效的颜色名称或颜色的十六进制值。您还可以提供 RGB 或 HSL 格式的颜色值。

您必须记住的一件重要的事情是，只有当您没有在 CSS 中设置这些属性的值时，动画才会起作用。在下面的演示中，如果我在演示中添加了以下 CSS，则 fill 颜色根本不会有动画效果。

rect {
    fill: brown;
}

ログイン後にコピー

我创建的演示非常基础，但您可以通过应用变换和使用更多颜色使其变得更有趣。

后缀属性

许多 SVG 属性，例如 r 和 行程宽度 可以使用或不使用后缀。例如，您可以将 r 的值设置为 10 等数字或 10em 等 em 单位。有一些属性，例如用于颜色停止的 offset 属性，始终要求您添加后缀。在 KUTE.js 中为后缀属性指定值时，请始终确保将该值括在引号内。

在下面的示例中，我对渐变中第一个停止点的偏移值和第二个停止点的颜色进行了动画处理。由于 offset 需要后缀，因此我将值括在引号内。

var offsetAnimation = KUTE.allTo(
  ".stop1",
  {
    attr: { offset: '90%'}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

var colorAnimation = KUTE.allTo(
  ".stop2",
  {
    attr: { stopColor: 'black'}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

var scaleAnimation = KUTE.allTo(
  "circle",
  {
    svgTransform: { scale: 2}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

ログイン後にコピー

演示中有三种不同的渐变，每个渐变都有两个颜色停止点，其类名称为 stop1 和 stop2。我还使用 svgTransform 属性应用了缩放变换，我们在本系列的第三个教程中对此进行了讨论。