扩展参数：使用Anime.js进行基于JavaScript的动画，第二部分

发布日期： 2023-09-08 阅读量： 作者： ADMIN

扩展参数：使用anime.js进行基于javascript的动画，第二部分

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

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

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

属性参数

这些参数允许您一次控制单个属性或一组属性的持续时间、延迟和缓动。 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'
});

登录后复制

# 动画 # Animejs # 参数扩展

上一篇: CSS 布局：如何使奇偶行元素在两列中灵活排布？

下一篇: 如何使用 JavaScript 和 jQuery 实现网页滚

扩展参数：使用Anime.js进行基于JavaScript的动画，第二部分

随便看看