remove()
从时间轴中移除动画、计时器、时间线、目标或特定的补间属性。
如果删除所有目标、动画、计时器和时间轴,时间轴将会自动暂停。
从时间轴中删除项目不会影响其持续时间。如果你需要更改时间轴的形状和持续时间,你应创建一个新的时间轴。
移除动画、计时器或时间轴
timeline.remove([animation, timer, timeline]);
| 参数 | 接受 |
|---|---|
| object | Animation | Timer | Timeline |
| position (opt) | Time position |
移除目标
timeline.remove(targets);
| 参数 | 接受 |
|---|---|
| targets | Targets |
移除目标属性
timeline.remove(targets, propertyName);
| 参数 | 接受 |
|---|---|
| targets | Targets |
| propertyName | 有效的 可动画属性 字符串 |
返回
时间线本身
可以与其他时间线方法链式调用。
remove() 代码示例
import { animate, createTimeline, utils } from 'animejs';
const [ $removeA, $removeB, $removeC ] = utils.$('.button');
const animation = animate('.circle', { x: '15rem', scale: [1, .5, 1] });
const tl = createTimeline({ loop: true, alternate: true })
.sync(animation)
.add('.triangle', { x: '15rem', rotate: 360 }, 100)
.add('.square', { x: '15rem' }, 200);
const removeAnimation = () => tl.remove(animation);
const removeTarget = () => tl.remove('.square');
const removeRotate = () => tl.remove('.triangle', 'rotate');
$removeA.addEventListener('click', removeAnimation);
$removeB.addEventListener('click', removeTarget);
$removeC.addEventListener('click', removeRotate);
<div class="large row">
<div class="medium pyramid">
<div class="triangle"></div>
<div class="square"></div>
<div class="circle"></div>
</div>
</div>
<div class="medium row">
<fieldset class="controls">
<button class="button">Remove anim</button>
<button class="button">Remove target</button>
<button class="button">remove tween</button>
</fieldset>
</div>