Three.js —— Tween.js 使用文档 (补间动画)

Tween.js官网文档:tween.js user guide | tween.js (tweenjs.github.io)

1. 引入Tween.js

import TWEEN from "./tween.js-master/dist/tween.esm.js"

2. 定义基本Tween动画

目的:将model模型的位置,从原来的(0,0,0)位置,经过1s移动到(20,50,30)的位置。

模式一:

 

// 1 设置动画
const action=new TWEEN.Tween({x:0,y:0,z:0}) // 初始值
    .to({x:20,y:50,z:30},1000) // 目标值,毫秒数
    // 在动画执行期,不断被调用。其中obj为"to"里面的内容
    .onUpdate(function(obj){ 
        model.position.x=obj.x; // x:20
        model.position.y=obj.y;
        model.position.z=obj.z;
    })
    .start()

// 2 启动动画
function loop(){
    // 更新动画
    TWEEN.update() 
    requestAnimationFrame(render);
}

模式二:

 

const action=new TWEEN.Tween(model.position) // 初始值:模型的初始位置
    .to({x:20,y:50,z:30},1000) // 目标值,毫秒数
    .start()

3 字段说明

const action=new TWEEN.Tween(需添加动画的属性)

const action=new TWEEN.Tween(需添加动画的属性)

字段含义示例备注
start执行动画action.start( ) action.start(num).start(毫秒数):延迟n毫秒之后运行动画
stop停止动画action.stop( )停止的动画必须为正在运行的动画
chain链式执行动画actA.chain(actB,actC)1. 当actA动画执行完后,立即执行actBactC动画,其中B和C同时被执行。2. 前提:actA.start( ), actB和actC不需要开启.start( )
repeat重复执行动画action.repeat(num) action.repeat(Infinity)1. num 重复执行的次数 2. Infinity 无限循环
yoyo重复执行时是否衔接(起始值-结束值-起始值)溜溜球action.yoyo(true)只有在repeat( )独立使用时有效
delay延迟执行动画action.delay(num)action.delay(1000).start( ) 延迟1000毫秒后执行动画,delaystart之前
to控制动画结束时的目标值+动画持续时间(毫秒)action.to(object,num)
easing缓动动画TWEEN.Easing.easing函数.easing类型easing函数:算法->运动效果 easing函数:算法起作用的地方InOutInOut
onUpdate在动画播放时,一直被调用onUpdate(function)function(obj){ } 形参obj指目标值(to( )的第1个参数)
onStart动画开始播放时被调用一次onStart(function)
onComplete动画结束时被调用一次onComplete(function)

警告:调用 actA.chain(actB) 实际上修改了actA,所以chain 的返回值只是actA,不是一个新的tween。

警告:yoyo(true) 只有在repeat(Infinity||200)单独使用时有效

 

4 easing 缓动动画

地址:/tween.js-master/examples/03_graphs.html 官方网址 · GitHub

Tween.js / easing with a power of number 

// 动画开始缓动-类比加速器
action.easing(TWEEN.Easing.Sinusoidal.In);
// 动画结束时缓动-类比减速刹车
action.easing(TWEEN.Easing.Sinusoidal.Out);
// 同时设置In和Out
action.easing(TWEEN.Easing.Sinusoidal.InOut);
 

5 例:相机旋转+模型淡入淡出动画

目的:

  1. 当镜头移动时,镜头始终对准model模型,模型呈现淡入的效果
  2. 当移动返回时,镜头始终对准model模型,模型呈现淡出的效果

镜头移动动画:

const cameraAct=new TWEEN.Tween(camera.position)
    .to({x:-100},3000)
    // 相机移动时,焦点始终为模型的位置
    .onUpdate(function(){
        camera.lookAt(model.position)
    })
    .start()

模型淡入动画:

const meshActIn = new TWEEN.Tween({ opacity: 0.0 })
    .to({ opacity: 1.0 }, 3000)
    // 动画开始:开启材质的透明度
    .onStart(function () {
        mat.transparent = true;
    })
    .onUpdate(function (obj) {
        mat.opacity = obj.opacity;
    })
    // 动画结束:关闭材质的透明度
    .onComplete(function () {
        mat.transparent = false;
    })
    .start();

模型淡出动画:

const meshActOut =new TWEEN.Tween({opacity:mat.opacity})
    .to({opacity:0.0}, 3000)
    // 动画开始:允许透明opacity属性才能生效
    .onStart(function(){
        material.transparent = true;
    })
    .onUpdate(function(obj){
        material.opacity = obj.opacity
    })
    .start();

备注

  1. 材质需开启transparent,才能设置透明程度opacity
const mat = new THREE.MeshLambertMaterial({
    color: 0x00ffff,
    transparent: true,
    opacity: 0.8,
});
  1. 调用 actA.chain(actB) 实际上修改了actA,所以chain 的返回值只是actA,不是一个新的tween。
  2. yoyo(true) 只有在repeat(Infinity||200)单独使用时有效

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
是的,three.jstween.js可以一起使用,实现复杂的动画效果,包括飞线动画。以下是一个简单的例子,演示了如何使用three.jstween.js创建一条飞线动画: ```javascript // 创建three.js场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建飞线路径 var curve = new THREE.CatmullRomCurve3([ new THREE.Vector3(-10, 0, 0), new THREE.Vector3(-5, 5, 0), new THREE.Vector3(0, 0, 0), new THREE.Vector3(5, -5, 0), new THREE.Vector3(10, 0, 0) ]); // 创建飞线材质 var material = new THREE.LineBasicMaterial({ color: 0xffffff }); // 将飞线路径转换为几何体 var geometry = new THREE.Geometry(); geometry.vertices = curve.getPoints(50); // 创建飞线网格 var line = new THREE.Line(geometry, material); scene.add(line); // 创建飞线动画 var tween = new TWEEN.Tween({t:0}) .to({t:1}, 5000) // 5秒钟 .onUpdate(function() { // 根据tween的进度计算飞线的位置 var position = curve.getPoint(this.t); // 更新飞线网格的位置 line.position.copy(position); }) .start(); // 渲染场景 function render() { requestAnimationFrame(render); TWEEN.update(); // 更新tween动画 renderer.render(scene, camera); } render(); ``` 在这段代码中,我们首先创建了一个three.js场景、相机和渲染器。然后,我们创建了一个CatmullRomCurve3曲线,用于定义飞线路径,并将其转换为three.js几何体。接下来,我们创建了一个TWEEN.Tween对象,将其起始值设置为0,结束值设置为1,表示飞线动画的进度。在Tween对象的 onUpdate 回调函数中,我们根据飞线路径计算当前进度对应的位置,并将飞线网格的位置更新为该位置。最后,我们创建了一个渲染函数,用于在每帧更新Tween动画和渲染场景。 希望这个例子可以帮助你了解如何使用three.jstween.js创建飞线动画
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小道士写程序

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值