目录
Tween.js介绍
Tween.js是一个可以产生平滑动画效果的js库,其官方地址为:GitHub - tweenjs/tween.js: JavaScript/TypeScript animation engine,在这里只将使用 npm 下载
安装指令:npm install @tweenjs/tween.js
一、Tween.js使用方法
使用起来非常简单,只需要三步就可以了:
- new 一个 Tween 的实例并将要修改的变量作为参数传递进去
- 使用 Tween().to() 方法将最终值和动画花费多少时间传入进去
- 使用 Tween().to() 方法,启动动画tween引擎就可以计算从开始动画点到结束动画点之间值,来产生平滑的动画效果
但是要特别注意的是,在 Three.js 中使用的时候一定要在 requestAnimationFrame 中加入TWEEN.update()
二、Tween.js核心方法
-
.to()
控制补间的运动形式及方向 .to() , 当tween启动时,Tween.js将读取当前属性值并 应用相对值来找出新的最终值
-
.start(time)
补间动画启动的方法, .start 方法接受一个参数 time , 如果加入这个参数,那么补间不会立即开始直到特定时刻才会开始
-
.stop()
关闭补间动画 .stop() , 关闭这个正在执行的补间动画
-
.repeat()
使用该方法可以使动画重复执行,它接受一个参数 , 描述需要重复多少次
-
.delay()
延迟执行动画的方法 .delay() , 接受一个参数用于控制延迟的具体时间,表示延迟多少时间后才开始执行动画
-
.pause()
暂停动画.pause() , 暂停当前补间运动,与resume方法配合使用
-
.resume()
恢复动画 .resume() , 恢复这个已经被暂停的补间运动
-
.yoyo()
控制补间重复的模式 .yoyo() , 这个功能只有在使用 repeat 时才有效果 ,该动画像悠悠球一样来回运动 , 而不是重新开始
-
.update()
更新补间动画 TWEEN.update() , 动态更新补间运动一般配合 window.requestAnimationFrame 使用
-
.chain()
链式补间动画,当我们顺序排列不同的补间动画时,比如我们在上一个补间结束的时候立即启动另外一个补间动画,使用 .chain() 方法来做。
tween1.chain(tween2) //tween2在tween1后执行
-
.getAll()
获取所有的补间组 TWEEN.getAll()
-
.removeAll()
删除所有的补间组 TWEEN.removeAll()
-
.add()
新增补间 TWEEN.add(tween) ,添加一个特定的补间
var tween=new TWEEN.Tween()
-
.remove()
删除补间 TWEEN.remove(tween),删除一个特定的补间
var tween=new TWEEN.Tween()
三、Tween.js 缓动函数
Tween.js 中游封装好了的常用缓动动画,如线性,二次,三次,四次,五次,正弦,指数,圆形,弹性,下落和弹跳等缓动函数。
-
缓动类型
In (先慢后快) ;Out (先快后慢) 和 InOut (前半段加速,后半段减速)
-
常见缓动动画
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 – st^2);
Bounce:指数衰减的反弹缓动。
以上每个效果都分三个缓动类型,分别是:
easeIn:从0开始加速的缓动,也就是先慢后快;
easeOut:减速到0的缓动,也就是先快后慢;
easeInOut:前半段从0开始加速,后半段减速到0的缓动。
四、函数封装
代码:
const tweenFunc = (event) => {
const tween = new TWEEN.Tween(camera.position);
tween.to({ x: event.x, y: event.y, z: event.z }, 2000)
tween.easing(TWEEN.Easing.Cubic.InOut);
tween.onUpdate(function () {
camera.lookAt(0, 0, 0)
console.log("我执行了",event)
})
tween.start();// 当在start里面加入了延迟执行的number的时候,就意味着只执行一次动画效果
}
const onDocumentMouseDown = (event) => {
// 点击屏幕创建一个向量
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window
.innerHeight) * 2 + 1, 0.5);
vector = vector.unproject(camera); // 将屏幕的坐标转换成三维场景中的坐标
// var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var raycaster = new THREE.Raycaster()
const mouse: THREE.Vector2 = new THREE.Vector2(
(event.clientX / window.innerWidth) * 2 - 1,
-(event.clientY / window.innerHeight) * 2 + 1
);
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(scene.children, true);
if (intersects.length <= 0) return void 0;
console.log(intersects[0].point, intersects[0].object)
tweenFunc(intersects[0].object.position)
return intersects[0].object;
}
window.addEventListener('click', onDocumentMouseDown)
当然我也是才开始接触Tween.js,所以也不大熟悉,有什么写的不大对的地方还请见谅~欢迎各位小伙伴踊跃交流沟通和提出我的不足之处~