前端急速入门动画库---tweenjs

说明：tweenjs对于js动画简直是一个神器(比如threejs的粒子动画借助它来实现，平时的canvas动画，js2D动画都比较实用)，本文不会涉及比较深入的tweenjs用法，但你可以花5分钟就掌握它的最常用的基础用法，最后有兴趣的同学可以看一下tweenjs的基本原理。

1、动画场景

// html
<div class="circle" style="top: 0px;left: 0px;"></div>

// css
.circle{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: orange;
    position: absolute;
}

// 初始状态如下图
复制代码

2、目标：让其向右移动500px

既然要动，那么需要
1、初始位置: left: 0px
2、要到哪里: left: 500px
3、花多少时间: 1000毫秒
4、这段时间内 我们要做什么：让这个div的style.left = 不断变化的left的值
(这个值刚开始是0px，随着时间的变化，第20毫秒，left变为10px,第40毫秒，
left变为20px....第500毫秒变为250px....第1000毫秒变为500px，然后动画结束 )
复制代码

3、代码实现

const position = { x: 0 } // position 对应初始位置 也就是left 是0px
const div = document.querySelector('.circle'); // 获取dom元素
const tweenA = new TWEEN.Tween(position). // new TWEEN.Tween里面放置初始位置，也就是left 是0px
to({ x: 500 }, 1000) // to函数第一个参数里面放置要到哪里 也就是left:500px的地方
                    // to函数第二个参数是要花多少时间，也就是1000毫秒
. onUpdate(function(){ // onUpdate函数放置这段时间我们做什么，也就是div的left值不断变化，
    div.style.left = position.x +'px' // position.x就是上面说的不断变化的left值，
});

复制代码

好了，tweenjs的基础配置就是这么多，接下来是我们需要让它动起来，都是固定写法，所有的都按以下写法写就行了

tweenA.start() // 启动这个动画

function animate(){ 
    requestAnimationFrame(animate); // requestAnimationFrame可以看成setTimeout(animate, 17)
    TWEEN.update(); // 每隔一段时间，update方法会调用上面的onUpdate函数，这样让left变化，小球位置也变化
 }
 animate();

复制代码

本文结束。

4、后续深入

// tweenjs的链式调用，例如
let position = { x: 0 }
const tweenA = new TWEEN.Tween(position).to({ x: 500 }, 1000).onUpdate(function(){
    div.style.left = position.x +'px'
}).start();

const tweenB = new TWEEN.Tween(position).to({ x: 0}, 1000).onUpdate(function(){
    div.style.left = position.x +'px'
});
我们想让tweenA调用完，接着调用tweenB

这就是需要用到chain方法
tweenA.chain(tweenB)
复制代码

5、tweenjs本质就是一系列缓动函数算法

原理参考博文 https://www.zhangxinxu.com/wordpress/2016/12/how-use-tween-js-animation-easing/