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

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

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

缓动算法.easing案例体验

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

javascript 复制代码
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);//使用二次缓动函数

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

javascript 复制代码
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()语法格式

javascript 复制代码
// easing函数:缓动算法(运动效果)
// easing类型:定义缓动算法起作用地方
tween.easing(TWEEN.Easing.easing函数.easing类型);

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

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

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

官方案例03_graphs.html

官方案例tween.js-master\examples目录里面案例03_graphs.html可以查看各种缓动算法的曲线效果图。

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:指数衰减的正弦曲线缓动;TWEEN.Easing.Elastic.inout 会有弹性衰减往复运动感

Back:超过范围的三次方缓动((s+1)*t^3 -- s*t^2)会有弹性衰减往复运动感

Bounce:指数衰减的反弹缓动。会有弹性衰减往复运动感

匀速运动(特殊情况说明)

Linear:默认效果可以不设置,可以理解为没有加速过程直接进入匀速状态,或者说没有减速过程,直接刹车

注意:匀速设置 TWEEN.Easing.Linear.None(默认效果可以不设置)。

对于Linear不要设置TWEEN.Easing.Linear.InTWEEN.Easing.Linear.OutTWEEN.Easing.Linear.InOut,会报错

相关推荐
船长@Quant36 分钟前
PyTorch量化技术教程:第四章 PyTorch在量化交易中的应用
pytorch·python·深度学习·机器学习·量化交易·ta-lib
申朝先生1 小时前
面试的时候问到了HTML5的新特性有哪些
前端·信息可视化·html5
在下千玦1 小时前
#前端js发异步请求的几种方式
开发语言·前端·javascript
知否技术1 小时前
面试官最爱问的Vue3响应式原理:我给你讲明白了!
前端·vue.js
m0_678693332 小时前
深度学习笔记19-YOLOv5-C3模块实现(Pytorch)
笔记·深度学习·yolo
自由鬼2 小时前
Google开源机器学习框架TensorFlow探索更多ViT优化
人工智能·python·深度学习·机器学习·tensorflow·机器训练
-一杯为品-2 小时前
【动手学深度学习】#6 卷积神经网络
人工智能·深度学习·cnn
小周同学:2 小时前
vue将页面导出成word
前端·vue.js·word
阿杰在学习2 小时前
基于OpenGL ES实现的Android人体热力图可视化库
android·前端·opengl
xfq2 小时前
[ai] cline使用总结(包括mcp)
前端·后端·ai编程