Optimizing Animation Performance with KUTE.js: Part 5, Enhanced Easing Functions and Properties

So far in this series, you have learned how to animate CSS properties of different elements, how to create different SVG-related animations, and how to animate different elements on a web page. The text content is animated. Another way you can use KUTE.js to animate elements on your web page is by changing the values ​​of different properties. This requires you to include the properties plugin in your project.

In this tutorial, you will learn how to use the properties plugin to animate the values ​​of different types of properties in KUTE.js. We'll also discuss the different easing functions you can use to control different animation speeds.

Easing function

Objects in real life rarely move linearly. They either speed up or slow down. Even acceleration and deceleration occur at different magnitudes. So far, all our animations have progressed linearly. It doesn't feel natural at all. In this section, you will learn about all the easing functions provided by KUTE.js for controlling different animation speeds.

The core easing functions in the library are included in the core engine out of the box. Suppose you want to apply QuadraticInOut easing to an animation. This can be achieved in two ways:

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

Each easing function has a unique curve that determines how an element accelerates during animation. Sine Curve means linear acceleration. Keep in mind that this is not the same as the Linear easing function. linear The function represents the linear speed of the animation, while the sine curve represents the linear acceleration speed of the animation. In other words, the speed of the animation increases or decreases linearly. Likewise, quadratic means acceleration to a power of 2, cubic means a power of 3, quartic means a power of 4, and quintic Represents a power of 5. There are also circular and exponential easing functions.

You can append In, Out, or InOut to any easing function. A value of In means that the animation will start very slowly and continue to accelerate until it ends. A value of Out means that the animation will start at maximum speed, then slow down slowly until it finally stops. A value of InOut means the animation will speed up at the beginning and slow down at the end.

You can also use the bounce and elastic easing functions in animations, appended with In, Out, or InOut to any of them. In the demo below, I've applied all of these easing functions on different circles so you can see how they affect the speed of the animation.

There may not be a core easing function that provides the animation pacing you are looking for. In this case, you can include the cubic Bezier functions from the Experiment branch in your project and start using these easing functions.

Similarly, KUTE.js also provides some physics-based easing functions imported from the Dynamics.js library. You can read more about all these easing functions and how to use them correctly on the library's easing functions page.

Animation Properties

Attributes in SVG can accept numbers and strings as their values. The string can be a color value or a number with a unit suffix, such as px, em, or %. The name of the property itself can also consist of two words connected by a hyphen. Keeping these differences in mind, KUTE.js provides us with different methods for specifying the values ​​of different properties.

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}});

As you can see, the suffix value needs to be enclosed in quotes. Likewise, properties that contain hyphens in their names need to be enclosed in quotes or specified in camelCase.

Unitless attribute

Many properties accept unitless values. For example, the stroke width of a path can be unitless. Likewise, you do not have to specify units for the r, cx, and cy attributes of the Circle element. You can use the properties plugin to animate all these properties from one value to another.

Now that you know how to use different easing functions, you will be able to animate different properties at different speeds. Here is an example:

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。您还可以阅读文档以了解有关该库的更多信息。

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

The above is the detailed content of Optimizing Animation Performance with KUTE.js: Part 5, Enhanced Easing Functions and Properties. For more information, please follow other related articles on the PHP Chinese website!