Paramètres étendus : animation basée sur JavaScript avec Anime.js, partie 2

Dans le premier tutoriel de la série Anime.js, vous avez découvert les différentes manières de spécifier l'élément cible à animer et les types de propriétés CSS et de propriétés DOM qui peuvent être animées. L'animation du didacticiel précédent était très basique. Tous les éléments cibles se déplacent simplement sur une certaine distance ou modifient le rayon de délimitation à une vitesse fixe.

Parfois, vous devrez peut-être animer un élément cible de manière plus rythmée. Par exemple, vous pourriez vouloir déplacer 10 éléments différents de gauche à droite, avec un délai de 500 ms entre le début de l'animation de chaque élément. De même, vous souhaiterez peut-être augmenter ou diminuer la durée de l'animation en fonction de la position de chaque élément.

Dans ce tutoriel, vous apprendrez à utiliser Anime.js pour chronométrer correctement les animations de différents éléments à l'aide de paramètres spécifiques. Cela vous permettra de contrôler l'ordre de lecture des séquences d'animation pour des éléments individuels ou pour tous les éléments.

Paramètres d'attribut

Ces paramètres vous permettent de contrôler la durée, le délai et l'assouplissement d'une seule propriété ou d'un groupe de propriétés à la fois. duration 和 delay Les paramètres sont spécifiés en millisecondes. La valeur par défaut pour la durée est de 1 000 millisecondes ou 1 seconde.

Cela signifie que toute animation appliquée à un élément sera jouée pendant 1 seconde, sauf indication contraire. delay Le paramètre précise le temps nécessaire au démarrage de l'animation après le déclenchement. La valeur par défaut du délai est 0. Cela signifie que l'animation démarrera dès qu'elle sera déclenchée.

Vous pouvez utiliser le paramètre easing pour contrôler la vitesse à laquelle l'animation est jouée pendant l'activité. Certaines animations démarrent lentement, accélèrent au milieu, puis ralentissent à nouveau à la fin. D’autres commencent vite, puis ralentissent jusqu’au bout.

Dans tous les cas, cependant, l'animation définit toujours une valeur à l'aide du paramètre duration 参数指定的时间内完成。 Anime.js 提供了许多缓动函数，您可以仅使用元素的名称直接将它们应用于元素。对于某些缓动函数，您还可以为 elasticity pour contrôler dans quelle mesure la valeur de l'élément rebondit d'avant en arrière comme un ressort.

Vous en apprendrez plus sur les différentes fonctions d'assouplissement dans le tutoriel final de cette série. L'extrait de code suivant montre comment appliquer tous ces paramètres à différentes animations.

var slowAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 4000
});

var delayAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  delay: 800
});

var cubicAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 1200,
  easing: 'easeInOutCubic'
});

Comme vous pouvez le constater, ces paramètres peuvent être utilisés indépendamment d'autres paramètres ou en combinaison avec eux. cubicAnimation applique à la fois les paramètres duration et cubicAnimation 同时应用了 duration 和 easing. Si aucune durée n'est spécifiée, l'animation durera 1 seconde. Désormais, il fonctionnera pendant 1 200 millisecondes ou 1,2 seconde.

Une limitation majeure des paramètres d'attribut dans l'exemple ci-dessus est que toutes les animations de l'élément cible auront la même durée, duration、delay 和 easing et easing< /code> valeur. </p> <p>Cela peut ou non être le comportement souhaité. Par exemple, vous souhaiterez peut-être d'abord traduire l'élément cible, puis animer son rayon de bordure, plutôt que simultanément effectuer un panoramique et modifier le rayon de bordure de l'élément cible. Anime.js vous permet de spécifier différentes valeurs pour les paramètres <code class="inline">duration, duration、delay、easing 和 指定不同的值各个属性的elastic,

et elastic pour chaque propriété. Le code et la démo ci-dessous devraient le rendre plus clair.

var indiParam = anime({
  targets: '.square',
  translateY: {
    value: 250
  },
  rotate: {
    value: '2.125turn'
  },
  backgroundColor: {
    value: 'rgb(255,0,0)',
    duration: 400,
    delay: 1500,
    easing: 'linear'
  },
  duration: 1500
});

Dans le code ci-dessus, toutes les propriétés que nous souhaitons animer ont des valeurs différentes. L'animation de couleur d'arrière-plan a une durée de 400 ms, tandis que les animations de rotation et de panoramique utilisent une valeur de durée globale de 1 500 ms.

rotate 和 translateY 属性使用 delay 和 easingL'animation de la couleur d'arrière-plan est également retardée, de sorte que tout changement de couleur ne commence qu'après 1 500 millisecondes. Les attributs rotate et translateY utilisent les valeurs par défaut des paramètres

et

car nous ne fournissons ni valeurs locales ni globales ​pour eux de la valeur.

🎜🎜

基于函数的参数

当您想要更改单个属性的动画顺序和持续时间时，基于属性的参数非常有用。但是，相同的 duration 和 delay 仍将应用于所有目标元素上的各个属性。基于函数的参数允许您单独指定 duration、delay、elasticity 和 easing以紧凑的方式针对不同的目标元素。

在这种情况下，您可以使用函数而不是数字来设置不同参数的值。这些函数接受三个参数：target、index 和 targetCount。 target 参数存储对当前目标元素的引用。 index 参数存储当前目标元素的索引或位置。 targetCount 参数存储目标元素的总数。

当需要根据目标元素的某些属性设置动画值时，target 参数非常有用。例如，您可以将目标元素的 delay、duration 或 easing 值存储在数据属性中，然后稍后访问它们.

类似地，您可以访问目标元素的背景颜色，然后操作它来为各个元素设置最终的唯一颜色值。通过这种方式，您可以对所有元素进行动画处理，使其背景颜色比当前颜色深 20%。

index 参数为您提供当前目标在目标元素列表中的位置。您可以使用它逐步更改不同元素的 duration 和 delay 等参数的值。

当您想要按升序设置值时，这通常很有用。您还可以从 targetCount 中减去 index 以按降序设置值。以下代码片段使用这两个参数来按升序和降序指定值。

var delaySequence = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  }
});

var delaySequenceR = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index, targetCount) {
    return (targetCount - index) * 200;
  }
});

以下代码使用 index 参数为每​​个目标元素设置不同的 easing 值。

var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic'];

var easeInSequence = anime({
  targets: '.square',
  translateY: 250,
  duration: 2000,
  easing: function(target, index) {
    return easeInValues[index];
  },
  autoplay: false
});

动画参数

最后一组参数允许您指定动画应播放的次数以及播放的方向。您可以使用loop参数指定动画播放的次数。还有一个 autoplay 参数，可以设置为 true 或 false。它的默认值为 true，但您可以通过将其设置为 false 来阻止动画自行启动。

direction 参数控制动画播放的方向。它可以具有三个值：normal、reverse 和 alternate。默认值为 normal，它使动画从开始值到结束值正常播放。一旦目标元素达到结束值，如果 loop 值大于 1，目标元素会突然跳回起始值，然后再次开始动画。

当direction 设置为reverse 并且loop 值大于1 时，动画将反转。换句话说，目标元素从最终状态开始动画，然后向后到达初始状态。一旦它们处于初始状态，元素就会跳回到最终状态，然后再次开始反向动画。 alternate 方向值会在每次循环后更改动画方向。

var normalLoop = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  },
  loop: 4,
  easing: 'easeInSine',
  autoplay: false
});

在下面的演示中，我将循环次数设置为四，以便您可以轻松注意到不同模式下元素动画的差异。

使用 stagger() 方法

到目前为止，在本教程中，我们已经使用函数将不同的值传递给目标元素的动画延迟或持续时间。您还可以借助 Anime.js 中的 stagger() 方法获得相同的功能。

stagger() 方法基本上允许您控制动画如何在多个元素上发生。它接受两个参数。第一个是您想要应用的值，第二个是一个带有一堆参数的对象，这些参数决定如何应用交错。

下面是一个示例，展示 stagger() 如何与我们到目前为止编写的常规函数​​进行比较：

// A function to introduce animation delay in elements.
delay: function(target, index) {
    return index * 200;
}

// The stagger() Equivalent
delay: anime.stagger(200);

您现在可能会问是否有一种方法可以反向应用动画延迟，就像我们对函数所做的那样。是的，这绝对是可能的。这是一个例子：

// Reversing the delay direction
delay: function(target, index, targetCount) {
    return (targetCount - index) * 200;
}

// Equivalent functionality with stagger()
delay: anime.stagger(200, {"direction": "reverse"})
  

我们可以类似地对动画持续时间应用交错。由于交错，前面示例中第一个元素的延迟值被设置为 0，这也是我们想要做的。但是，第一个元素的动画持续时间必须非零。否则，页面加载后就会处于结束阶段。

可以借助 start 参数设置第一个元素的动画的非零持续时间，该参数设置为 1000 以达到惊人效果。这是一个例子：

// Duration starts at 1000 and increases by 800
duration: function(target, index) {
    return 1000 + index * 800;
}

// Equivalent functionality with stagger()
duration: anime.stagger(800, {"start": 1000})

如果在开始最后一个元素时必须应用非零持续时间值怎么办？在这种情况下，我们可以对 stagger() 方法使用以下参数：

// A non-zero duration in reverse direction
duration: function(target, index, targetCount) {
    return 1000 + (targetCount - index) * 800;
}

// Equivalent functionality with stagger()
duration: anime.stagger(800, {"start": 1000, "direction": "reverse"})

以下 CodePen 演示的所有操作与“基于函数的参数”部分下的示例类似，但它使用 stagger() 方法来执行此操作。正如您所看到的，最终结果没有任何区别。

我想指出的一件事是交错方法在旧版本的库中不起作用。确保您使用的是最新版本以避免任何错误。

最终想法

在本教程中，您了解了可用于控制 Anime.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!