tweenjs创建threejs动画

TweenJS是一个由JavaScript语言编写的补间动画库，如果需要tweenjs辅助你生成动画，对于任何前端web项目，你都可以选择tweenjs库。

如果你使用three.js开发web3d项目，使用tween.js辅助three.js生成动画效果也是比较好的选择。

• github地址：https://github.com/tweenjs/tween.js/
• npm地址：https://www.npmjs.com/package/@tweenjs/tween.js
• 官网：https://createjs.com/tweenjs

npm安装

在工程化开发的时候可以通过npm命令行安装tween.js模块。

npm i @tweenjs/tween.js@^18

import TWEEN from '@tweenjs/tween.js';

.html引入tween.js

tween.js-master文件包/dist目录下有多个js文件，如果你想script标签直接引入tween.umd.js即可。

<script src="./tween.js-master/dist/tween.umd.js"></script>

.html学习环境模拟开发环境中引入方式,就可以和开发环境一样书写import TWEEN from '@tweenjs/tween.js'。

<!-- type="importmap"功能：tween在html学习环境和开发环境一样写法 -->
<script type="importmap">
    {
		"imports": {
			"@tweenjs/tween.js": "./tween.esm.js"
		}
	}
</script>
<script type="module">
    import TWEEN from '@tweenjs/tween.js';
</script>

tweenjs基本语法

tweenjs功能从语法的角度讲，就是改变自己的参数对象。

const pos = {x: 0,y: 0};
const tween = new TWEEN.Tween(pos);//创建一段tween动画
//经过2000毫秒，pos对象的x和y属性分别从零变化为100、50
tween.to({x: 100,y: 50}, 2000);
//tween动画开始执行
tween.start();

在requestAnimationFrame动画中，tween更新.update()，tween才能正常执行

function loop() {
    requestAnimationFrame(loop);
}
loop();

function loop() {
    TWEEN.update();//tween更新
    requestAnimationFrame(loop);
}

浏览器控制台测试查看tweenjs是否逐渐改变pos对象的x和y属性

function loop() {
    TWEEN.update();
    // 测试tweenjs是否逐渐改变pos对象的x和y属性
    console.log(pos.x,pos.y);
    requestAnimationFrame(loop);
}

tweenjs改变threejs模型对象位置

three.js模型的位置mesh.position属性是一个具有.x、.y、.z属性的对象，可以直接使用tweenjs直接改变。

//创建一段mesh平移的动画
const tween = new TWEEN.Tween(mesh.position);
//经过2000毫秒，pos对象的x和y属性分别从零变化为100、50
tween.to({x: 100,y: 50}, 2000);
//tween动画开始执行
tween.start(); 

最后不要忘记在渲染循环中更新TWEEN.update();即可。

// 渲染循环
function render() {
    TWEEN.update();
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

换个语法形式书写也可以，更简洁

const tween = new TWEEN.Tween(mesh.position).to({x: 100,y: 50}, 2000).start();

const tween = new TWEEN.Tween(mesh.position)
.to({x: 100,y: 50}, 2000)
.start();

测试模型缩放动画

模型的缩放属性mesh.scale和.position属性一样是一个具有.x、.y、.z属性的对象,你也可以直接用tweenjs动画控制。

new TWEEN.Tween(mesh.scale).to({
    x: 100,
    y: 50
}, 2000).start();