当前位置：首页 > article >正文

157. 缓动算法.easing(地球渐入相机动画)

article 2025/3/1 14:59:32

动画片段tween通过.easing()方法可以设置缓动算法，在一些动画场景中你设置合理的缓动算法，可以让动画看起来非常自然，比如一辆车从静止进入匀速状态，动画最好有一个加速过程的过渡，对于这个加速的方式就可以通过缓动算法实现。

形象理解：所谓缓动，你可以理解为运动缓缓加速的过程，缓动算法就是运动加速的算法，推广一下，不一定针对运动，比如颜色渐变、相机动画也可以类比车辆运动加减速。

缓动算法.easing案例体验

你可以对比课件案例源码地球相机动画设置和不设置缓动的视觉差异，你会发现设置缓动函数后，视觉效果更加舒适和自然。

camera.position.set(3000, 3000, 3000);
camera.lookAt(0, 0, 0);

// 视觉效果：地球从小到大出现(透视投影相机远小近大投影规律)
new TWEEN.Tween(camera.position)
.to({x: 300,y: 300,z: 300}, 3000)
.start()
.easing(TWEEN.Easing.Quadratic.Out);//使用二次缓动函数

你可以把上上节课，相机镜头切换动画加上缓动动画，进行测试。

camera.position.set(3000, 3000, 3000);
camera.lookAt(0, 0, 0);

// 视觉效果：地球从小到大出现(透视投影相机远小近大投影规律)
new TWEEN.Tween(camera.position)
.to({x: 300,y: 300,z: 300}, 3000)
.start()
.easing(TWEEN.Easing.Sinusoidal.InOut)//进入和结束都设置缓动

`.easing()`语法格式

// easing函数：缓动算法(运动效果)
// easing类型：定义缓动算法起作用地方
tween.easing(TWEEN.Easing.easing函数.easing类型);

easing类型(定义缓动算法起作用地方)

easing函数和easing类型都有多种方式，可以自由组合使用(Linear除外)。

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