扩展参数:Anime.js用于基于javascript的动画，第二部分(JavaScript扩展脚本屋)

在Anime.js & # 31995列的第一个教程中，您了解了指定要设置动画的目标元素的不同方法以及可以设置动画的CSS & # 23646性和DOM & # 23646性的类型。上一个教程中的动画非常基础。所有目标元素只是移动一定距离或以固定速度改变边界半径。

有时，您可能需要以更有节奏的方式为目标元素设置动画。例如，您可能有10 个不同的元素，想要从左向右移动，每个元素的动画开始之间有500 毫秒的延迟。同样，您可能希望根据每个元素的位置增加或减少动画持续时间。

在本教程中，您将学习如何使用Anime.js & # 20351用特定参数正确计时不同元素的动画。这将允许您控制单个元素或所有元素的动画序列的播放顺序。

属性参数这些参数允许您一次控制单个属性或一组属性的持续时间、延迟和缓动。持续时间& # 21644；延迟& # 21442；数以毫秒为单位指定。持续时间的默认值为1000 毫秒或1 秒。

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

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

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

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

var slowAnimation = anime({ targets:'。square '，translateY: 250，borderRadius: 50，duration:4000 })；var delay animation = anime({ targets:'。square '，translateY: 250，borderRadius: 50，delay:800 })；var cubic animation = anime({ targets:'。square '，translateY: 250，borderRadius: 50，duration: 1200，easing:' easeInOutCubic ' })；正如您所看到的，这些参数可以独立于其他参数使用，也可以与它们结合使用。立方动画& # 21516；时应用了持续时间& # 21644；宽松& # 21442；数。如果未指定持续时间，动画将运行1 秒。现在，它将运行1,200 毫秒或1.2 秒。

上例中属性参数的一个主要限制是目标元素的所有动画都将具有相同的持续时间& # 12289；延迟& # 21644；宽松& # 20540；。

这可能是也可能不是期望的行为。例如，您可能希望首先平移目标元素，然后为其边框半径设置动画，而不是同时平移和更改目标元素的边框半径。Anime.js & # 20801许您为持续时间& # 12289；延迟& # 12289；宽松& # 21644；指定不同的值各个属性的弹性& # 21442；数。下面的代码和演示应该会更清楚。

var indiParam = anime({ targets:'。square '，translateY: { value: 250 }，rotate: { value: '2.125turn' }，background color:{ value:' RGB(255，0，0)'，duration: 400，delay: 1500，easing: 'linear' }，duration:1500 })；在上面的代码中，我们想要设置动画的所有属性都有不同的值。背景颜色动画的持续时间为400毫秒& # 65292；而旋转和平移动画使用全局持续时间值1500毫秒

背景颜色动画也有延迟，因此颜色的任何变化仅在1500 毫秒过去后才开始。旋转& # 21644；translateY & # 23646性使用延迟& # 21644；宽松& # 21442；数的默认值，因为我们既没有为它们提供本地值也没有提供全局值。

基于函数的参数当您想要更改单个属性的动画顺序和持续时间时，基于属性的参数非常有用。但是，相同的持续时间& # 21644；延迟& # 20173；将应用于所有目标元素上的各个属性。基于函数的参数允许您单独指定持续时间& # 12289；延迟& # 12289；弹性& # 21644；宽松& # 20197；紧凑的方式针对不同的目标元素。

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

当需要根据目标元素的某些属性设置动画值时，目标& # 21442；数非常有用。例如，您可以将目标元素的延迟& # 12289；持续时间& # 25110；宽松& # 20540；存储在数据属性中，然后稍后访问它们。

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

index & # 21442数为您提供当前目标在目标元素列表中的位置。您可以使用它逐步更改不同元素的持续时间& # 21644；延迟& # 31561；参数的值。

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

var delay sequence = anime({ targets:'。square '，translateY: 250，delay: function(target，index){ return index * 200；}});var delay sequencer = anime({ targets:'。square '，translateY: 250，delay: function(target，index，target count){ return(target count-index)* 200；}});

以下代码使用index & # 21442数为每​​个目标元素设置不同的宽松& # 20540；。

var easeInValues = ['easeInQuad '，' easeInCubic '，' easeInQuart '，' easeInQuint '，' easeInSine '，' easeInExpo '，' easeInCirc '，' easeInBack '，' ease elastic ']；var easeInSequence = anime({ targets:'。square '，translateY: 250，duration: 2000，easing: function(target，index){ return easeInValues[index]；}，autoplay:false })；

动画参数最后一组参数允许您指定动画应播放的次数以及播放的方向。您可以使用loop & # 21442数指定动画播放的次数。还有一个自动播放& # 21442；数，可以设置为真& # 25110；假& # 12290；它的默认值为真& # 65292；但您可以通过将其设置为假& # 26469；阻止动画自行启动。

方向& # 21442；数控制动画播放的方向。它可以具有三个值：正常& # 12289；反向& # 21644；候补& # 12290；默认值为普通& # 65292；它使动画从开始值到结束值正常播放。一旦目标元素达到结束值，如果loop & # 20540大于1，目标元素会突然跳回起始值，然后再次开始动画。

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

var normalLoop = anime({ targets:'。square '，translateY: 250，delay: function(target，index){ return index * 200；}，loop: 4，easing: 'easeInSine '，autoplay:false })；在下面的演示中，我将循环次数设置为四，以便您可以轻松注意到不同模式下元素动画的差异。

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

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

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

//在元素中引入动画延迟的函数. delay: function(target，index){ return index * 200；}//The stagger()equivalent delay:anime . stagger(200)；您现在可能会问是否有一种方法可以反向应用动画延迟，就像我们对函数所做的那样。是的，这绝对是可能的。这是一个例子：

//反转延迟方向delay: function(target，index，target count){ return(target count-index)* 200；}//与stagger()delay等效的功能:anime.stagger(200，{ " direction ":" reverse " })& # 25105；们可以类似地对动画持续时间应用交错。由于交错，前面示例中第一个元素的延迟值被设置为0，这也是我们想要做的。但是，第一个元素的动画持续时间必须非零。否则，页面加载后就会处于结束阶段。

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

// Duration从1000开始，增加800duration: function(target，index){ return 100小编index * 800；}//与stagger()时长相当的功能:anime.stagger(800，{ " start ":1000 })& # 22914；果在开始最后一个元素时必须应用非零持续时间值怎么办？在这种情况下，我们可以对stagger()& # 26041；法使用以下参数：

//一个非零的反方向持续时间:function(target，index，target count){ return 100小编(target count-index)* 800；}//与stagger()时长相当的功能:anime.stagger(800，{"start": 1000，" direction ":" reverse " })& # 20197；下CodePen & # 28436示的所有操作与& ldquo基于函数的参数& rdquo部分下的示例类似，但它使用stagger()& # 26041；法来执行此操作。正如您所看到的，最终结果没有任何区别。

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

最终想法在本教程中，您了解了可用于控制Anime.js & # 20013目标元素的动画的不同类型的参数。属性参数用于控制各个属性的动画。

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

以下是扩展参数:基于JavaScript使用animation.js的动画，第二部分的详细内容请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：扩展参数:Anime.js用于基于javascript的动画，第二部分(JavaScript扩展脚本屋) https://zhujicankao.com/96563.html