时间轴(Timeline)

优质

小牛编辑

131浏览

2023-12-01

基础时间轴

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

创建时间轴：

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
});