Parameter Lanjutan: Animasi Berasaskan JavaScript dengan Anime.js, Bahagian 2

Dalam tutorial pertama dalam siri Anime.js, anda mempelajari tentang cara berbeza untuk menentukan elemen sasaran untuk dianimasikan dan jenis sifat CSS dan sifat DOM yang boleh dianimasikan. Animasi dalam tutorial sebelum ini adalah sangat asas. Semua elemen sasaran hanya bergerak pada jarak tertentu atau menukar jejari sempadan pada kelajuan tetap.

Kadangkala anda mungkin perlu menghidupkan elemen sasaran dengan cara yang lebih berirama. Sebagai contoh, anda mungkin mempunyai 10 elemen berbeza yang anda mahu alihkan dari kiri ke kanan, dengan kelewatan 500ms antara permulaan setiap animasi elemen. Begitu juga, anda mungkin ingin menambah atau mengurangkan tempoh animasi berdasarkan kedudukan setiap elemen.

Dalam tutorial ini, anda akan belajar cara menggunakan Anime.js untuk memasa animasi elemen berbeza dengan betul menggunakan parameter tertentu. Ini akan membolehkan anda mengawal susunan main balik urutan animasi untuk elemen individu atau untuk semua elemen.

Parameter atribut

Parameter ini membolehkan anda mengawal tempoh, kelewatan dan pelonggaran bagi satu hartanah atau sekumpulan hartanah sekaligus. Parameter tempoh dan delay dinyatakan dalam milisaat. Nilai lalai untuk tempoh ialah 1000 milisaat atau 1 saat. duration 和 delay 参数以毫秒为单位指定。持续时间的默认值为 1000 毫秒或 1 秒。

这意味着除非另有指定，否则应用于元素的任何动画都将播放 1 秒。 delay 参数指定动画在触发后开始所需的时间。延迟的默认值为 0。这意味着动画将在触发后立即开始。

您可以使用 easing 参数来控制动画在活动期间播放的速率。有些动画一开始很慢，中间加快速度，然后在最后再次减慢速度。其他人一开始速度很快，然后在剩下的时间里放慢速度。

但是，在所有情况下，动画始终在使用 duration 参数指定的时间内完成。 Anime.js 提供了许多缓动函数，您可以仅使用元素的名称直接将它们应用于元素。对于某些缓动函数，您还可以为 elasticity 参数设置一个值，以控制元素的值像弹簧一样来回弹跳的程度。

您将在本系列的最后一个教程中了解有关不同缓动函数的更多信息。以下代码片段展示了如何将所有这些参数应用于不同的动画。

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

正如您所看到的，这些参数可以独立于其他参数使用，也可以与它们结合使用。 cubicAnimation 同时应用了 duration 和 easing 参数。如果未指定持续时间，动画将运行 1 秒。现在，它将运行 1,200 毫秒或 1.2 秒。

上例中属性参数的一个主要限制是目标元素的所有动画都将具有相同的 duration、delay 和 easing 值。

这可能是也可能不是期望的行为。例如，您可能希望首先平移目标元素，然后为其边框半径设置动画，而不是同时平移和更改目标元素的边框半径。 Anime.js 允许您为 duration、delay、easing 和 指定不同的值各个属性的elastic 参数。下面的代码和演示应该会更清楚。

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

在上面的代码中，我们想要设置动画的所有属性都有不同的值。背景颜色动画的持续时间为400ms，而旋转和平移动画使用全局持续时间值1500ms。

背景颜色动画也有延迟，因此颜色的任何变化仅在 1500 毫秒过去后才开始。 rotate 和 translateY 属性使用 delay 和 easing

Ini bermakna mana-mana animasi yang digunakan pada elemen akan dimainkan selama 1 saat melainkan dinyatakan sebaliknya. Parameter delay menentukan tempoh masa yang diambil untuk animasi bermula selepas ia dicetuskan. Nilai lalai untuk kelewatan ialah 0. Ini bermakna animasi akan bermula sebaik sahaja ia dicetuskan.

Walau bagaimanapun, dalam semua kes, animasi sentiasa siap dalam masa yang ditetapkan menggunakan parameter duration. Anime.js menyediakan beberapa fungsi pelonggaran yang boleh anda gunakan terus pada elemen menggunakan namanya sahaja. Untuk beberapa fungsi pelonggaran, anda juga boleh menetapkan nilai untuk parameter keanjalan untuk mengawal berapa banyak nilai elemen itu melantun ke sana ke mari seperti spring. 🎜 🎜Anda akan mengetahui lebih lanjut tentang fungsi pelonggaran yang berbeza dalam tutorial terakhir siri ini. Coretan kod berikut menunjukkan cara menggunakan semua parameter ini pada animasi yang berbeza. 🎜

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

🎜Seperti yang anda lihat, parameter ini boleh digunakan secara berasingan daripada parameter lain atau digabungkan dengannya. cubicAnimation menggunakan kedua-dua parameter tempoh dan esing. Jika tiada tempoh dinyatakan, animasi akan berjalan selama 1 saat. Kini, ia akan berjalan selama 1,200 milisaat atau 1.2 saat. 🎜 🎜

以下代码使用 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 中目标元素的动画的不同类型的参数。属性参数用于控制各个属性的动画。

您可以使用它们来控制各个元素的动画播放顺序。函数参数允许您控制单个元素相对于整个组的动画时间和速率。动画参数允许您控制不同元素的动画本身的播放方式。

Atas ialah kandungan terperinci Parameter Lanjutan: Animasi Berasaskan JavaScript dengan Anime.js, Bahagian 2. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!