返回介绍

时间轴(Timeline)

发布于 2020-01-07 22:20:35 字数 3168 浏览 2271 评论 0 收藏 0

基础时间轴

时间轴可让你将多个动画同步在一起。
默认情况下,添加到时间轴的每个动画都会在上一个动画结束时开始。

创建时间轴:

var myTimeline = anime.timeline(parameters);
ArgumentTypeInfoRequired
parametersObjectThe default parameters of the timeline inherited by childrenNo

将动画添加到时间轴:

myTimeline.add(parameters, offset);
ArgumentTypesInfoRequired
parametersObject要添加到时间轴的子时间轴或动画Yes
time offsetString or Number偏移量,即动画添加到时间轴的位置。可为绝对位置或相对位置。No
// 使用默认参数创建时间轴
var tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

// 增加子项
tl
.add({
  targets: '.basic-timeline-demo .el.square',
  translateX: 250,
})
.add({
  targets: '.basic-timeline-demo .el.circle',
  translateX: 250,
})
.add({
  targets: '.basic-timeline-demo .el.triangle',
  translateX: 250,
});

时间轴偏移量

可以使用时间轴的 .add()函数的第二个可选参数指定时间偏移。它定义动画在时间轴中的开始时间,如果未指定偏移,则动画将在上一个动画结束后开始。
偏移可以相对于最后一个动画,也可以相对于整个时间轴。

TypeOffsetExampleInfos
String'+=''+=200'相对位置:在上一个动画结束后200ms开始
String'-=''-=200'相对位置:在上一个动画结束前200ms开始
NumberNumber100绝对位置:无论时间轴的上一个动画何时结束,这个动画都在100毫秒处开始
// 使用默认参数创建时间轴
var tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

tl
.add({
  targets: '.offsets-demo .el.square',
  translateX: 250,
})
.add({
  targets: '.offsets-demo .el.circle',
  translateX: 250,
}, '-=600') // 相对偏移量
.add({
  targets: '.offsets-demo .el.triangle',
  translateX: 250,
}, 0); // 绝对偏移量

参数继承

父时间轴实例中设置的参数将由所有子项继承。

可被继承的参数
targets
duration
delay
endDelay
round
var tl = anime.timeline({
  targets: '.params-inheritance-demo .el',
  delay: function(el, i) { return i * 200 },
  duration: 500,
  easing: 'easeOutExpo',
  direction: 'alternate',
  loop: true
});

tl
.add({
  translateX: 250,
  // override the easing parameter
  easing: 'spring',
})
.add({
  opacity: .5,
  scale: 2
})
.add({
  // override the targets parameter
  targets: '.params-inheritance-demo .el.triangle',
  rotate: 180
})
.add({
  translateX: 0,
  scale: 1
});

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

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

发布评论

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