Tween补间运动使用

tweenJS文件备份地址：https://blog-static.cnblogs.com/files/enhengenhengNymph/Tween.js
学习参考地址：https://www.xdnote.com/tweenjs/
https://www.cnblogs.com/empist/p/9192942.html
https://blog.csdn.net/youlinhuanyan/article/details/104436252
有案例的参考地址：https://blog.csdn.net/ithanmang/article/details/82344171
https://github.com/tweenjs/tween.js/tree/master
基础使用内容

// 1. 定义元素
var position = { x: 100, y: 0 };
// 2. new 一个 Tween对象，构造参数传入需要变化的元素
var tween = new TWEEN.Tween(position);
// 3. 设置目标
tween.to({ x: 200 }, 1000);
// 4. 启动，通常情况下，2，3，4步一般习惯性写在一起，定义命名也省了
//    例如 new TWEEN.Tween(position).to({ x: 200 }, 1000).start();
tween.start();
// 5. （可选：）如果在变化过程中想自定义事件，则可以通过 `onUpdate` 实现
tween.onUpdate(function(pos) {
    console.log(pos.x);
});
// 6. 设置 requestAnimationFrame，在方法里面调用全局的 `TWEEN.update()`
//    在这个方法里面也可以加入其它的代码：d3, threejs 里面经常会用到。
//      比如THREEJS里面用到的变化，如 `renderer.render(scene, camera);` 等
function animate() {
    requestAnimationFrame(animate);
    TWEEN.update();
}
// 6. 启动全局的 animate
animate();

html中

<script src="./js/Tween.js"></script>
<script type="module">
new TWEEN.Tween(A2BOX.rotation).to({ z: radJ3 }, 1900).start();
</script>
// 或
<script>
new TWEEN.Tween(A2BOX.rotation).to({ z: radJ3 }, 1900).start();
</script>

vue中

// 引入
import * as TWEEN from '@/assets/js/Tween.js'
// 使用
new TWEEN.Tween(A2BOX.rotation).to({ z: radJ3 }, 1900).start();