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,会报错

相关推荐
桂月二二29 分钟前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
AI浩1 小时前
【面试总结】FFN(前馈神经网络)在Transformer模型中先升维再降维的原因
人工智能·深度学习·计算机视觉·transformer
hunter2062062 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb2 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角2 小时前
CSS 颜色
前端·css
IE063 小时前
深度学习系列75:sql大模型工具vanna
深度学习
不惑_3 小时前
深度学习 · 手撕 DeepLearning4J ,用Java实现手写数字识别 (附UI效果展示)
java·深度学习·ui
浪浪山小白兔3 小时前
HTML5 新表单属性详解
前端·html·html5
lee5763 小时前
npm run dev 时直接打开Chrome浏览器
前端·chrome·npm
2401_897579653 小时前
AI赋能Flutter开发:ScriptEcho助你高效构建跨端应用
前端·人工智能·flutter