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 ini membolehkan anda mengawal tempoh, kelewatan dan pelonggaran bagi satu harta atau sekumpulan hartanah sekali gus. 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
和 elasticity
参数指定不同的值特性。下面的代码和演示应该会更清楚。
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
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; } });
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. 🎜
🎜