weenjs 是使用 JavaScript 中的一个简单的补间动画库，支持数字、对象的属性和 CSS 样式属性的赋值。
tweenjs 以平滑的方式修改元素的属性值，需要传递给 tween 要修改的值、动画结束时的最终值和动画花费时间（duration），之后 tween 引擎就可以计算从开始动画点到结束动画点之间值，从而产生平滑的动画效果。
1. tween github
2. tweenCDN ：
https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.1.1/Tween.min.js
3. 下载tween.js文件
<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);
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的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿
TWEEN.update() ===> 更新渲染
这个动作将会更新所有被激活的 tweens ，在 3s 内 position.x 和position.y将变为 300 。
animate(); function animate(){ requestAnimationFrame(animate); TWEEN.update(); }
9.动画效果
Tween.js 本身不会运行，你需要通过 update 方法明确告诉它什么时候开始运行，推荐在动画主循环中使用该动画，可以调用 requestAnimationFrame 方法来获得良好的图像性能
使用无参数的调用方法，update 将明确当前时间。也可以为 update 方法法明确一个时间
TWEEN.update(100);
update 的时间为 100毫秒 ，可以使用这种方法来明确代码中所有随时间变化的函数。
start 和 stop ==> Tween.start 和 Tween.stop 分别用来控制 tween 动画的开始和结束
对于已经结束和没有开始的动画，Tween.stop 方法不起作用。 Tween.start 可以方法接收一个时间参数，若使用了该参数，tween 动画将在延迟该时间数后才开始动画，否则他将立刻开始动画。
update ==> 通过 TWEEN.update 方法执行动画的更新
chain ==> 制作多个多行，例如一个动画在另一个动画结束后开始，可以通过 chain 来实现
tweenA.chain(tweenB); //tweenB 在 tweenA 之后开始动画，故可以制作一个无线循环的动画 tweenB.chain(tweenA);
repeat ==> 制作循环动画，优于 chain，接收一个用于描述循环次数的参数
tween.repeat(10);
tween.repeat(infinity);
delay ==> 用于控制动画之间的延迟
tween.delay(1000);
tween.start()
可以在每次 tween 循环周期的指定时间点调用自定义的函数
onStart ==> tween 动画开始前的回调函数onStop ==> tween 动画结束后的回调函数onUpdate ==> 在 tween 动画每次更新后执行onComplete ==> 在 tween 动画全部结束后执行var tween = new TWEEN.Tween({ }).to({ }).onStart(function(){ }).onUpdate(function(){ })
.easing(TWEEN.Easing.easing函数.easing类型)
原文：https://www.cnblogs.com/yad123/p/12904131.html