tween.js补间动画库

一、tween.js

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

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

二、使用

2. tweenCDN ：

https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.1.1/Tween.min.js

3. 下载tween.js文件

三、tween实例

<script type="text/javascript" src="./js/tween.min.js"></script>
<script type="text/javascript">
    var box = document.createElement('div');
    box.style.setProperty('background-color', '#f66');
    box.style.setProperty('width', '100px');
    box.style.setProperty('height', '100px');
    document.body.appendChild(box);
        
    var position = { x: 0, y: 0 }
    var tween = new TWEEN.Tween(position)
    tween.to({x: 300, y: 300 }, 3000)
    tween.easing(TWEEN.Easing.Quadratic.Out)
    tween.onUpdate(function(){
        console.log( this.x );
        box.style.setProperty('transform', 'translate(' + position.x + 'px, '     + position.y + 'px)');
    })
    tween.start();
        
    animate();
    function animate(){
        requestAnimationFrame(animate);
        TWEEN.update();
    }    
</script>

四、示例解析

1.首先引入tween.js文件

2.在页面上创建一个div

var box = document.createElement('div');
box.style.setProperty('background-color', '#f66');
box.style.setProperty('width', '100px');
box.style.setProperty('height', '100px');
document.body.appendChild(box);

创建div

3.定义一个初始位置对象 position 坐标为x和y

var position = { x: 0, y: 0 }

4.新建一个tween对象，改变 x 和y的值分别从 0到 300 ，持续时间为 3s

var tween = new TWEEN.Tween(position)
tween.to({x: 300, y: 300 }, 3000)

5.给这个动画添加一个先快后慢的缓动效果

tween.easing(TWEEN.Easing.Quadratic.Out)

6.调用onUpdate回调函数，在 tween 动画每次更新后将位置参数添加到div上，同时打印到控制台方便查看

tween.onUpdate(function(){
        console.log( this.x );
        box.style.setProperty('transform', 'translate(' + position.x + 'px, '     + position.y + 'px)');
    })

7.开始动画

tween.start();

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

requestAnimationFrame() ===> 类似settimeout的函数由,系统决定回调函数的执行时机。60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿