Optimisation des performances d'animation avec KUTE.js : partie 5, Fonctions et propriétés d'accélération améliorées

Jusqu'à présent dans cette série, vous avez appris comment animer les propriétés CSS de différents éléments, comment créer différentes animations liées au SVG et comment animer le contenu textuel de différents éléments sur une page Web. Une autre façon d'utiliser KUTE.js pour animer des éléments sur votre page Web consiste à modifier les valeurs de différentes propriétés. Cela nécessite que vous incluiez le plugin Properties dans votre projet.

Dans ce tutoriel, vous apprendrez à utiliser le plugin Properties pour animer les valeurs de différents types de propriétés dans KUTE.js. Nous discuterons également des différentes fonctions d'accélération que vous pouvez utiliser pour contrôler différentes vitesses d'animation.

Fonction d'assouplissement

Les objets dans la vie réelle se déplacent rarement de manière linéaire. Soit ils accélèrent, soit ils ralentissent. Même l’accélération et la décélération se produisent à des amplitudes différentes. Jusqu’à présent, toutes nos animations ont progressé de manière linéaire. Cela ne semble pas du tout naturel. Dans cette section, vous découvrirez toutes les fonctions d'accélération fournies par KUTE.js pour contrôler différentes vitesses d'animation.

Les fonctions d'assouplissement de base de la bibliothèque sont incluses dans le moteur principal prêt à l'emploi. Disons que vous souhaitez appliquer QuadraticInOut l'assouplissement à une animation. Cela peut être réalisé de deux manières :

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

Chaque fonction d'accélération possède une courbe unique qui détermine la manière dont un élément accélère pendant l'animation. 正弦 曲线意味着线性加速度。请记住，这与 线性 缓动函数不同。 linear 函数表示动画的线性速度，而正弦曲线表示动画的线性加速速度。换句话说，动画的速度会线性增加或减少。同样， quadratic 意味着 2 的幂加速，cubic 意味着 3 的幂，quartic 意味着 4 的幂，而 quintic 表示 5 的幂。还有 circular 和 exponential Fonction d'assouplissement.

Vous pouvez utiliser In、Out 或 InOut 附加到任何缓动函数。值 In 意味着动画将非常缓慢地开始并不断加速直到结束。值 Out 意味着动画将以最大速度开始，然后缓慢减速，直到最后停止。值 InOut pour indiquer que l'animation va accélérer au début et ralentir à la fin.

Vous pouvez également utiliser bounce 和 elastic 缓动函数，并附加 In、Out，或者InOut pour n'importe lequel d'entre eux dans les animations. Dans la démo ci-dessous, j'ai appliqué toutes ces fonctions d'accélération sur différents cercles afin que vous puissiez voir comment elles affectent la vitesse de l'animation.

Il n'y a peut-être pas de fonction d'assouplissement de base qui fournit le rythme d'animation que vous recherchez. Dans ce cas, vous pouvez inclure les fonctions cubiques de Bézier de la branche Expérience dans votre projet et commencer à utiliser ces fonctions d'assouplissement.

De même, KUTE.js fournit également des fonctions d'assouplissement basées sur la physique importées de la bibliothèque Dynamics.js. Vous pouvez en savoir plus sur toutes ces fonctions d'assouplissement et comment les utiliser correctement sur la page des fonctions d'assouplissement de la bibliothèque.

Propriétés de l'animation

Les attributs en SVG peuvent accepter des nombres et des chaînes comme valeurs. La chaîne peut être une valeur de couleur ou un nombre avec un suffixe d'unité, tel que px、em 或 %. Le nom de la propriété elle-même peut également être constitué de deux mots reliés par un trait d'union. En gardant ces différences à l'esprit, KUTE.js nous propose différentes méthodes pour spécifier les valeurs des différentes propriétés.

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

Comme vous pouvez le constater, la valeur du suffixe doit être placée entre guillemets. De même, les propriétés dont le nom contient des traits d'union doivent être placées entre guillemets ou spécifiées dans camelCase.

Attribut sans unité

De nombreuses propriétés acceptent les valeurs sans unité. Par exemple, l'attribut 行程宽度 可以是无单位的。同样，您不必为 Circle 元素的 r、cx 和 cy d'un chemin spécifie les unités. Vous pouvez utiliser le plugin Properties pour animer toutes ces propriétés d'une valeur à une autre.

Maintenant que vous savez utiliser différentes fonctions d'accélération, vous pourrez animer différentes propriétés à différentes vitesses. Voici un exemple :

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!