Optimieren der Animationsleistung mit KUTE.js: Teil 5, Erweiterte Beschleunigungsfunktionen und -eigenschaften

Bisher haben Sie in dieser Serie gelernt, wie Sie CSS-Eigenschaften verschiedener Elemente animieren, wie Sie verschiedene SVG-bezogene Animationen erstellen und wie Sie den Textinhalt verschiedener Elemente auf einer Webseite animieren. Eine andere Möglichkeit, KUTE.js zum Animieren von Elementen auf Ihrer Webseite zu verwenden, besteht darin, die Werte verschiedener Eigenschaften zu ändern. Dazu müssen Sie das Eigenschaften-Plugin in Ihr Projekt einbinden.

In diesem Tutorial erfahren Sie, wie Sie das Eigenschaften-Plugin verwenden, um die Werte verschiedener Arten von Eigenschaften in KUTE.js zu animieren. Wir besprechen auch die verschiedenen Beschleunigungsfunktionen, mit denen Sie unterschiedliche Animationsgeschwindigkeiten steuern können.

Beruhigungsfunktion

Objekte im wirklichen Leben bewegen sich selten linear. Sie werden entweder schneller oder langsamer. Sogar Beschleunigung und Verzögerung treten in unterschiedlichem Ausmaß auf. Bisher verliefen alle unsere Animationen linear. Es fühlt sich überhaupt nicht natürlich an. In diesem Abschnitt erfahren Sie mehr über alle Easing-Funktionen, die KUTE.js zur Steuerung verschiedener Animationsgeschwindigkeiten bietet.

Core-Easing-Funktionen aus der Bibliothek sind sofort in der Core-Engine enthalten. Nehmen wir an, Sie möchten QuadraticInOut Easing auf eine Animation anwenden. Dies kann auf zwei Arten erreicht werden:

easing: KUTE.Easing.easingQuadraticInOut
// OR
easing: 'easingQuadraticInOut'

Jede Beschleunigungsfunktion verfügt über eine einzigartige Kurve, die bestimmt, wie ein Element während der Animation beschleunigt wird. 正弦 曲线意味着线性加速度。请记住，这与 线性 缓动函数不同。 linear 函数表示动画的线性速度，而正弦曲线表示动画的线性加速速度。换句话说，动画的速度会线性增加或减少。同样， quadratic 意味着 2 的幂加速，cubic 意味着 3 的幂，quartic 意味着 4 的幂，而 quintic 表示 5 的幂。还有 circular 和 exponential Easing-Funktion.

Mit In、Out 或 InOut 附加到任何缓动函数。值 In 意味着动画将非常缓慢地开始并不断加速直到结束。值 Out 意味着动画将以最大速度开始，然后缓慢减速，直到最后停止。值 InOut können Sie angeben, dass die Animation am Anfang schneller und am Ende langsamer wird.

Sie können bounce 和 elastic 缓动函数，并附加 In、Out，或者InOut auch für jede davon in Animationen verwenden. In der Demo unten habe ich alle diese Beschleunigungsfunktionen auf verschiedene Kreise angewendet, damit Sie sehen können, wie sie sich auf die Geschwindigkeit der Animation auswirken.

Möglicherweise gibt es keine zentrale Beschleunigungsfunktion, die das gewünschte Animationstempo bietet. In diesem Fall können Sie die kubischen Bezier-Funktionen aus dem Experiment-Zweig in Ihr Projekt einbinden und mit der Verwendung dieser Beschleunigungsfunktionen beginnen.

In ähnlicher Weise bietet KUTE.js auch einige physikbasierte Beschleunigungsfunktionen, die aus der Dynamics.js-Bibliothek importiert wurden. Weitere Informationen zu all diesen Beschleunigungsfunktionen und ihrer korrekten Verwendung finden Sie auf der Seite Beschleunigungsfunktionen der Bibliothek.

Animationseigenschaften

Attribute in SVG können Zahlen und Zeichenfolgen als Werte akzeptieren. Die Zeichenfolge kann ein Farbwert oder eine Zahl mit einem Einheitensuffix sein, z. B. px、em 或 %. Der Name der Immobilie selbst kann auch aus zwei durch einen Bindestrich verbundenen Wörtern bestehen. Unter Berücksichtigung dieser Unterschiede stellt uns KUTE.js verschiedene Methoden zur Angabe der Werte verschiedener Eigenschaften zur Verfügung.

var tween = KUTE.to('selector', {attr: {'r': 100}});
var tween = KUTE.to('selector', {attr: {'r': '10%'}});

var tween = KUTE.to('selector', {attr: {'stroke-width': 10}});
var tween = KUTE.to('selector', {attr: {strokeWidth: 10}});

Wie Sie sehen, muss der Suffixwert in Anführungszeichen gesetzt werden. Ebenso müssen Eigenschaften mit Bindestrichen im Namen in Anführungszeichen gesetzt oder in camelCase angegeben werden.

Einheitenloses Attribut

Viele Eigenschaften akzeptieren Werte ohne Einheit. Beispielsweise gibt das Attribut 行程宽度 可以是无单位的。同样，您不必为 Circle 元素的 r、cx 和 cy eines Pfads Einheiten an. Mit dem Eigenschaften-Plugin können Sie alle diese Eigenschaften von einem Wert zum anderen animieren.

Da Sie nun wissen, wie Sie verschiedene Beschleunigungsfunktionen verwenden, können Sie verschiedene Eigenschaften mit unterschiedlichen Geschwindigkeiten animieren. Hier ein Beispiel:

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 属性应用了缩放变换，我们在本系列的第三个教程中对此进行了讨论。

最终想法

在本教程中，您了解了 KUTE.js 中提供的不同缓动函数以及如何使用它们来控制自己的动画的速度。您还学习了如何为不同类型的属性设置动画。

我试图在本系列中涵盖 KUTE.js 的所有重要方面。这应该足以帮助您在自己的项目中自信地使用 KUTE.js。您还可以阅读文档以了解有关该库的更多信息。

我还建议您仔细阅读源代码并了解该库的实际工作原理。如果您有任何与本教程相关的问题或提示，请随时在评论中分享。

Das obige ist der detaillierte Inhalt vonOptimieren der Animationsleistung mit KUTE.js: Teil 5, Erweiterte Beschleunigungsfunktionen und -eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!