返回介绍

动画基础参数

发布于 2020-01-07 22:20:34 字数 4186 浏览 1898 评论 0 收藏 0

duraion(持续时间)

定义动画的持续时间(以毫秒为单位)。

TypeDefaultExample
Number10003000
anime.staggerSee staggering sectionanime.stagger(150)
FunctionSee function based parameters section(el, i) => i * 150
anime({
  targets: '.duration-demo .el',
  translateX: 250,
  duration: 3000
});

delay(延迟)

定义动画的延迟(以毫秒为单位)。

TypeDefaultExample
Number01000
anime.staggerSee staggering sectionanime.stagger(150)
FunctionSee function based parameters section(el, i) => i * 150
anime({
  targets: '.delay-demo .el',
  translateX: 250,
  delay: 1000
});

endDelay(末端延迟)

在动画结束时以毫秒为单位添加一些额外时间。

TypeDefaultExample
Number01000
anime.staggerSee staggering sectionanime.stagger(150)
FunctionSee function based parameters section(el, i) => i * 150
anime({
  targets: '.end-delay-demo .el',
  translateX: 250,
  endDelay: 1000,
  direction: 'alternate'
});

easing(时间曲线)

定义动画的时间曲线。

Check out the easings section for a complete list of available easing and parameters.

TypeDefaultExample
String'easeOutElastic(1, .5)'easing: 'easeInOutQuad'
anime({
  targets: '.easing-demo .el',
  translateX: 250,
  easing: 'easeInOutExpo'
});

round(数字格式)

将值向上舍入为x小数。

TypeDefaultExample
Number0round: 10
var roundLogEl = document.querySelector('.round-log');

anime({
  targets: roundLogEl,
  innerHTML: [0, 10000],
  easing: 'linear',
  round: 10 // Will round the animated value to 1 decimal
});

特殊属性

使用Object作为值为动画的每个属性定义特定参数。
未在Object中指定的其他属性继承自主动画。

TypeExample
Objectrotate: { value: 360, duration: 1800, easing: 'easeInOutSine' }
anime({
  targets: '.specific-prop-params-demo .el',
  translateX: {
    value: 250,
    duration: 800
  },
  rotate: {
    value: 360,
    duration: 1800,
    easing: 'easeInOutSine'
  },
  scale: {
    value: 2,
    duration: 1600,
    delay: 800,
    easing: 'easeInOutQuart'
  },
  delay: 250 // All properties except 'scale' inherit 250ms delay
});

function 参数

为动画的每个目标和属性设置不同的值。

function 接受三个参数:

ArgumentsInfos
target当前动画目标元素
index动画目标的索引
targetsLength总动画目标数

请参阅交错动画部分以便更轻松地操纵值。

anime({
  targets: '.function-based-params-demo .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  delay: function(el, i, l) {
    return i * 100;
  },
  endDelay: function(el, i, l) {
    return (l - i) * 100;
  }
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文