使用 Anime.js 基于 JavaScript 的动画，第 3 部分：探索值、时间轴和播放

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

使用 anime.js 基于 javascript 的动画，第 3 部分：探索值、时间轴和播放

在 Anime.js 系列的上一篇教程中，您了解了控制不同目标元素的动画方式的不同类型的参数。您还学习了如何使用函数参数来逐渐更改元素的延迟或持续时间。

在本教程中，我们将更进一步，学习如何使用常规数字、基于函数的值和关键帧来指定属性值本身。您还将学习如何使用时间轴按顺序播放动画。

指定属性值

Anime.js 允许您指定目标元素的可动画属性的最终值。动画的初始值或起始值是该属性的默认值。 CSS 中指定的任何值也可以作为起始值。有多种指定最终值的方法。

它也可以是无单位的数字。在这种情况下，在计算任何属性值时将使用属性的原始或默认单位。您还可以将值指定为字符串，但该字符串必须至少包含一个数值。字符串值的示例为 10vh、80% 和 9.125turn。

您还可以指定相对于当前值的属性值，而不是指定绝对值。例如，您可以使用 +=150px 作为值，将最终 translateY 值设置为比当前值大 150px 。请记住，在指定相对值时只能使用加法、乘法和减法。

在设置颜色动画时，您不能使用红色、黑色和蓝色等颜色名称来设置动画的最终颜色值。在这种情况下，颜色动画根本不会发生，并且变化将是即时的。对颜色进行动画处理的唯一方法是将值指定为十六进制数字或 RGB 和 HSL 值。

您可能已经注意到，我们没有为目标元素指定初始值来为其设置动画。 Anime.js 根据我们的 CSS 和这些属性的默认值自动确定初始值。但是，您可以使用数组指定属性的默认值以外的初始值。数组中的第一项表示初始值，第二项表示最终值。

您可以使用函数为不同的参数设置不同的值，而不是为所有目标元素使用相同的最终值。该过程类似于指定基于函数的属性参数。

var uniqueTranslation = anime({
  targets: '.square',
  translateY: function(el, i) {
    return 50 * (i + 1);
  },
  autoplay: false
});

var randomScaling = anime({
  targets: '.square',
  scale: function(el, i) {
    return Math.random()*1.5 + i/10;
  },
  autoplay: false
});

var randomRotation = anime({
  targets: '.square',
  rotate: function() {
    return anime.random(-180, 180);
  },
  autoplay: false
});

var randomRadius = anime({
  targets: '.square',
  borderRadius: function(el) {
    return 20 + Math.random()*el.offsetWidth/4;
  },
  autoplay: false
});

var randomAll = anime({
  targets: '.square',
  translateY: function(el, i) {
    return 50 + 50 * i;
  },
  scale: function(el, i) {
    return Math.random()*1.5 + i/10;
  },
  rotate: function() {
    return anime.random(-180, 180);
  },
  borderRadius: function(el) {
    return Math.random()*el.offsetWidth/2;
  },
  duration: function() { return anime.random(1500, 2400); },
  delay: function() { return anime.random(0, 1000); },
  autoplay: false
});

登录后复制

上一篇: 关于微信小程序生命周期的介绍

下一篇: 关于微信小程序的商城开发（ecshop ）

使用 Anime.js 基于 JavaScript 的动画，第 3 部分：探索值、时间轴和播放

随便看看