17.Tweenjs动画库

最新推荐文章于 2024-05-25 09:49:04 发布

焦焦焦焦焦

最新推荐文章于 2024-05-25 09:49:04 发布

阅读量687

点赞数

分类专栏： threejs 文章标签：前端

本文链接：https://blog.csdn.net/weixin_60645637/article/details/131506188

版权

threejs 专栏收录该内容

22 篇文章 4 订阅

订阅专栏

文章介绍了如何结合Tweenjs库来为Threejs的3D项目创建平滑的动画效果。Tweenjs通过改变对象参数实现动画，如物体平移和相机运动，并提供了多种缓动算法以实现不同速度效果。此外，还提到了回调函数如onStart(),onUpdate(),onComplete()以及不同的缓动模式(easeIn,easeOut,easeInOut)。

摘要由CSDN通过智能技术生成

Tweenjs创建threejs动画

tweenjs是一个JavaScript编写的补间动画库，如果你使用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 i @tweenjs/tween.js@^18

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

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

const geometry = new THREE.BoxGeometry(10, 10, 10);
const material = new THREE.MeshLambertMaterial({
    color: 0x00ffff,
});
const mesh = new THREE.Mesh(geometry, material);

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

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

tweenjs相机运动动画

const R = 150;
new TWEEN.Tween({ angle: 0 })  // 给定一个开始参数angle，为0
    .to({ angle: Math.PI * 2 }, 10000)  // 结束时angle为360度，用时10秒
    .onUpdate(function (obj) {  // tweenjs数据时更新执行此函数
        camera.position.x = R * Math.cos(obj.angle);
        camera.position.z = R * Math.sin(obj.angle);
        camera.lookAt(0, 0, 0);
    })
    .start();

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

tweenjs回调函数

tweenjs回调函数有onStart()、onUpdate()、onComplete()三种

onStart：动画开始执行前触发
onUpdate：动画执行过程中，一直被重复执行
onComplete：动画成功执行完毕后触发

tweenjs缓动算法.easing()

在动画播放的时候，默认是匀速状态的，在项目开发中，如果在动画播放的某一段进行一个缓慢、缓冲的效果，将会看起来更加自然

常见的算法名称有如下

Linear：线性匀速运动效果（默认效果）；
Quadratic：二次方的缓动（t^2）；
Cubic：三次方的缓动（t^3）；
Quartic：四次方的缓动（t^4）；
Quintic：五次方的缓动（t^5）；
Sinusoidal：正弦曲线的缓动（sin(t)）；
Exponential：指数曲线的缓动（2^t）；
Circular：圆形曲线的缓动（sqrt(1-t^2)）；
Elastic：指数衰减的正弦曲线缓动；
Back：超过范围的三次方缓动（(s+1)*t^3 – s*t^2）；
Bounce：指数衰减的反弹缓动。

每个算法又有三种缓动方式

easeIn：从0开始加速的缓动，也就是先慢后快；
easeOut：减速到0的缓动，也就是先快后慢；
easeInOut：前半段从0开始加速，后半段减速到0的缓动。

示例如下

// 创建tweenjs动画，改变threejs相机位置
new TWEEN.Tween(camera.position)
    .to({
        x: 300,
        y: 300,
        z: 300,
    }, 3000)
    // 二次方缓动算法，先快后慢
    .easing(TWEEN.Easing.Quadratic.Out)
    .start();