Animation

Animation

线性补间动画效果 和 播放控制

// 示例1, 在6000毫秒内,n从0逐渐变为2*Math.PI (即node旋转一周)
let animation = new Animation(0, 2 * Math.PI, 6000, function (n) {
    // 旋转一个节点
    node.rotateTo(n);

    // 重绘
    layer.update();
});

// 示例2
let animation = new Animation();
animation.set(0, 2 * Math.PI, 6000);
animation.onUpdate((n) => {
    // 旋转一个节点
    node.rotateTo(n);

    // 重绘
    layer.update();   
});
animation.play();

// 3秒后停止
setTimeout(()=>{
   animation.stop(); 
}, 3000);

构造器

new Animation(begin, end, time, action)

begin 、end 可以是数字,也可以是包含数字的数组

创建实例时begin、end、time、action参数可以为空, 但是调用play()方法之前要确保都已经被赋过值。
参数:
Name Type Description
begin Number | Array | Undefined
end Number | Array | Undefined
time Number | Undefined

动画事件

action function | Undefined

动画每一帧回调函数

方法

continue() → {Animation}

继续,从暂停处继续

调用返回:

self

Type
Animation

onUpdate(action) → {Animation}

设置动画每一帧的回调函数

参数:
Name Type Description
action function
调用返回:

self

Type
Animation

pause() → {Animation}

暂停

调用返回:

self

Type
Animation

play() → {Promise}

开始

调用返回:

自身

Type
Promise

setBegin(begin) → {Animation}

设置开始数据

参数:
Name Type Description
begin Number | Array

结束数据

调用返回:

self

Type
Animation

setEnd(end) → {Animation}

设置结束数据

参数:
Name Type Description
end Number | Array

结束数据

调用返回:

self

Type
Animation

setTime(time) → {Animation}

设置时间, 再次调用play时生效

参数:
Name Type Description
time Number
调用返回:

self

Type
Animation

stop() → {Animation}

停止

调用返回:

self

Type
Animation