remove() V4

从时间轴中移除动画、定时器、时间线、目标或特定的 tween 属性。

如果所有目标、动画、定时器和时间线都被移除，时间轴将自动暂停。

从时间轴中移除项目不会影响其持续时间。如果您需要更改时间轴的形状和持续时间，则应创建一个新的时间轴。

移除动画、定时器或时间线

timeline.remove([animation, timer, timeline]);

参数	接受
object	动画 \| 定时器 \| 时间轴
position ^(可选)	时间位置

移除目标

timeline.remove(targets);

参数	接受
targets	目标

移除目标属性

timeline.remove(targets, propertyName);

参数	接受
targets	目标
propertyName	有效的可动画属性 `String`

返回值

时间轴本身

可以与其他时间轴方法链式调用。

remove() 代码示例

import { 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>

上一个 下一个