文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
时间轴(Timeline)
基础时间轴
时间轴可让你将多个动画同步在一起。
默认情况下,添加到时间轴的每个动画都会在上一个动画结束时开始。
创建时间轴:
var myTimeline = anime.timeline(parameters);
Argument | Type | Info | Required |
parameters | Object | The default parameters of the timeline inherited by children | No |
将动画添加到时间轴:
myTimeline.add(parameters, offset);
Argument | Types | Info | Required |
parameters | Object | 要添加到时间轴的子时间轴或动画 | Yes |
time offset | String 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()
函数的第二个可选参数指定时间偏移。它定义动画在时间轴中的开始时间,如果未指定偏移,则动画将在上一个动画结束后开始。
偏移可以相对于最后一个动画,也可以相对于整个时间轴。
Type | Offset | Example | Infos |
String | '+=' | '+=200' | 相对位置:在上一个动画结束后200ms开始 |
String | '-=' | '-=200' | 相对位置:在上一个动画结束前200ms开始 |
Number | Number | 100 | 绝对位置:无论时间轴的上一个动画何时结束,这个动画都在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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论