补间动画库tweenjs

简介

tweenjs 是使用 JavaScript 中的一个简单的补间动画库，支持数字、对象的属性和 CSS 样式属性的赋值。

tweenjs 以平滑的方式修改元素的属性值，需要传递给 tween 要修改的值、动画结束时的最终值和动画花费时间（duration），之后 tween 引擎就可以计算从开始动画点到结束动画点之间值，从而产生平滑的动画效果。

使用

将附件中下载的 tween.js 文件引入到需要使用动画的页面即可。

调用

var box = document.createElement('div');
box.style.setProperty('background-color', '#008800');
box.style.setProperty('width', '200px');
box.style.setProperty('height', '200px');
document.body.appendChild(box); 
function animate(time) {
  requestAnimationFrame(animate);
  TWEEN.update(time);
}
requestAnimationFrame(animate);
var coords = { x: 0, y: 0 };
var tween = new TWEEN.Tween(coords)
            .to({ x: 300, y: 200 }, 1000)
            .easing(TWEEN.Easing.Quadratic.Out)
            .onUpdate(function() { 
              box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)');
            })
            .start();

说明：

1. 设置对象的初始位置：

var coords = { x: 0, y: 0 };

2. 设置对象的新位置，持续时间为 1s：

var tween = new TWEEN.Tween(coords) .to({ x: 300, y: 200 }, 1000)

3. 启动动画：

 tween.start();

4.  为了平滑的动画效果，需要在同一个循环动画中调用 TWEEN.update 方法:

animate();
function animate(){
    requestAnimationFrame(animate);
    TWEEN.update();
}

tweenjs 动画说明

Tween.js 本身不会运行，你需要通过 update 方法明确告诉它什么时候开始运行，推荐在动画主循环中使用该动画，可以调用 requestAnimationFrame 方法来获得良好的图像性能使用无参数的调用方法，update 将明确当前时间。也可以为 update 方法法明确一个时间。

TWEEN.update(100);

update 的时间为 100毫秒 ，可以使用这种方法来明确代码中所有随时间变化的函数。

动画控制

1.    start 和 stop ==> Tween.start 和 Tween.stop 分别用来控制 tween 动画的开始和结束。对于已经结束和没有开始的动画，Tween.stop 方法不起作用。 Tween.start 可以方法接收一个时间参数，若使用了该参数，tween 动画将在延迟该时间数后才开始动画，否则他将立刻开始动画。
2.  update ==> 通过 TWEEN.update 方法执行动画的更新。


3.  chain ==> 制作多个多行，例如一个动画在另一个动画结束后开始，可以通过 chain 来实现：
tweenA.chain(tweenB);  //tweenB 在 tweenA 之后开始动画，故可以制作一个无线循环的动画
tweenB.chain(tweenA);
4.  repeat ==> 制作循环动画，优于 chain，接收一个用于描述循环次数的参数：
tween.repeat(10);
tween.repeat(infinity);
5.  delay ==> 用于控制动画之间的延迟：
tween.delay(1000);
tween.start()

相关链接

官网地址 ：  https://createjs.com/

中文文档 ：  http://www.hzhcontrols.com/new-1441744.html

GitHub 地址 ：  https://github.com/CreateJS/TweenJS