1. 项目概述与核心价值在Cocos Creator中制作UI动画如果只是让一个按钮从A点直线移动到B点那感觉就像喝白开水一样平淡无奇。真正能让用户眼前一亮、让交互体验充满质感的往往是那些带有“灵性”的过渡效果——比如一个弹窗入场时轻微的“回弹”或者一个物品被点击时俏皮的“抖动”。这些效果的灵魂就是缓动函数Easing Function。它决定了动画过程中属性值随时间变化的“节奏”是连接起止状态的桥梁。今天我们就来深入聊聊Cocos引擎中UI动画的缓动函数特别是如何实现和应用线性、弹性与弹跳这三种最具代表性的效果让你的界面瞬间“活”起来。对于前端和游戏开发者而言理解并熟练运用缓动函数是提升产品细节和用户体验的必修课。它不仅仅是调用一个API那么简单更关乎你对动画节奏、物理模拟和用户心理预期的把握。无论是制作一个平滑的进度条线性还是一个充满惊喜的庆祝弹窗弹性/弹跳合适的缓动函数都能事半功倍。本文将基于Cocos Creator 3.x的Tween系统带你从原理到实践彻底掌握这些动画“魔术”背后的秘密。2. 缓动函数的核心原理与Cocos实现机制2.1 什么是缓动函数从数学到感知简单来说缓动函数是一个定义了“进度-比率”映射关系的数学函数。它接收一个归一化的时间进度通常是从0到1输出一个对应的属性变化比率。这个比率再与属性的起始值和目标值结合计算出当前帧的具体属性值。举个例子一个最简单的线性缓动函数是progress time。这意味着时间过去10%属性值也变化10%整个过程匀速进行。但自然界中很少有绝对匀速的运动更多是加速、减速或带有惯性的运动。因此我们有了quadIn先慢后快、quadOut先快后慢、elasticOut像皮筋一样弹动等丰富的函数。在Cocos Creator中这套机制被封装在tween系统里。当你调用tween(node).to(duration, props, { easing: ‘bounceOut’ })时引擎会在每一帧根据已过去的时间计算归一化进度t0到1。将t传入指定的缓动函数如bounceOut得到一个映射后的进度r。根据r对props中定义的每个属性如position,scale,opacity在起始值和目标值之间进行插值通常是线性插值lerp。将计算出的新值赋给节点的对应属性。2.2 Cocos Creator中的缓动函数家族Cocos Creator内置了非常全面的缓动函数主要可以分为几大类无缓动linear线性constant常数通常用于步骤动画。幂函数缓动quad,cubic,quart,quint。它们遵循t^n的数学模型n越大加速/减速的感觉越强烈。每种又分In缓入开始慢、Out缓出结束慢、InOut缓入缓出两头慢、OutIn缓出缓入中间快。正弦与圆形缓动sine,circ。基于三角函数或圆形函数能产生非常平滑、自然的加速减速效果。指数缓动expo。变化非常剧烈适合表现快速爆发或消失的效果。“过冲”类缓动back。动画会稍微“冲过”目标点再回来模拟一种蓄力或过冲的效果。物理模拟类缓动这也是本文的重点弹性Elastic模拟弹簧振动会有多次逐渐衰减的过冲和回弹。elasticIn是振动着开始elasticOut是振动着结束最常用elasticInOut是两头都振动。弹跳Bounce模拟小球落地弹跳有几次明显的、幅度递减的弹跳。bounceOut是最常用的模拟物体落地弹跳至静止。注意smooth和fade是Cocos Creator特有的内置函数smooth提供了一个非常标准的平滑过渡而fade通常用于淡入淡出其曲线可能经过特殊优化。2.3 为何选择Tween系统在Cocos中制作动画你可能有多个选择Animation组件、脚本中每帧更新、或者Tween。Tween系统在UI动画领域的优势非常明显声明式编程用链式调用清晰描述动画序列代码可读性高。高性能引擎内部优化避免每帧手动计算和赋值。功能强大支持并行、串行、重复、反转等复杂动画组合以及丰富的回调onUpdate,onComplete等。与脚本深度集成非常适合由逻辑事件触发的动态UI动画。3. 三大核心效果线性、弹性、弹跳的实战解析理论说再多不如一行代码。我们直接进入实战看看如何用Cocos Tween实现这三种效果并剖析其中的关键参数和技巧。3.1 线性Linear运动稳定与可控的基石线性缓动是基础它意味着匀速运动。虽然听起来简单但它是许多复杂动画的组成部分或者在某些需要精确、无加速感的场景下如机械UI、计时器是唯一选择。// 示例一个水平匀速移动的进度条背景或飞船 import { _decorator, Component, Node, tween, Vec3 } from cc; ccclass(LinearMotion) export class LinearMotion extends Component { start() { // 假设this.node是一个需要水平移动的UI元素 const startPos this.node.position.clone(); const endPos new Vec3(300, startPos.y, startPos.z); // 向右移动300像素 tween(this.node) .to(2.0, { position: endPos }, { easing: linear, // 明确指定线性缓动 onUpdate: (target: Vec3, ratio: number) { // 线性缓动下ratio 基本等于 timeElapsed / duration // console.log(进度: ${(ratio * 100).toFixed(1)}%, 位置: ${target.x.toFixed(1)}); } }) .start(); } }关键点与技巧何时使用需要绝对匀速、可预测的动画时。例如计时器数字滚动、匀速旋转的加载图标、沿固定路径平移的UI如跑马灯。注意事项线性运动在视觉上可能显得“呆板”或“机械”。在大多数追求自然感的UI交互中应谨慎使用纯线性动画。一个常见的技巧是对多个属性使用不同的缓动比如位置linear但透明度用sineOut可以增加层次感。性能线性计算最简单性能开销最小但这在当代设备上差异微乎其微不应作为选型首要考虑。3.2 弹性Elastic效果赋予界面生命力弹性效果模拟了弹簧的物理特性是营造“活泼”、“有弹性”感觉的利器。Cocos内置的elasticOut、elasticInOut等函数已经封装好了复杂的衰减振动算法。// 示例一个对话框弹窗的入场动画 import { _decorator, Component, Node, tween, Vec3, v3 } from cc; ccclass(ElasticPopup) export class ElasticPopup extends Component { // 弹窗节点 property(Node) popupPanel: Node null!; showPopup() { if (!this.popupPanel) return; // 初始状态缩小并透明 this.popupPanel.setScale(Vec3.ZERO); this.popupPanel.active true; // 使用弹性动画放大并显示 tween(this.popupPanel) .to(0.8, { scale: v3(1, 1, 1), // 放大到原始尺寸 // 通常也会同时改变position或rotation来增加效果 }, { easing: elasticOut, // 核心弹性缓出 // 弹性函数有内置参数控制振动幅度和次数但Cocos内置函数不直接暴露。 // 如需更精细控制需使用progress自定义或寻找扩展库。 onStart: () { console.log(弹窗开始展示); }, onComplete: () { console.log(弹窗展示完毕); } } ) .start(); } // 可以配合一个缓入elasticIn或回弹backOut的关闭动画 hidePopup() { tween(this.popupPanel) .to(0.5, { scale: Vec3.ZERO }, { easing: backIn }) .call(() { this.popupPanel.active false; }) .start(); } }关键点与技巧参数理解标准的弹性函数通常有振幅(amplitude)、周期(period)或衰减(damping)参数。Cocos内置的elastic系列函数使用了预设的、视觉效果不错的参数。如果你觉得振动太强或太弱可能需要寻找社区扩展或自己实现progress函数。使用场景elasticOut最常用。用于物体“飞入”或“弹出”到最终位置带有 overshoot 和 settle 的效果。非常适合重要通知、成就解锁、可拖动元素归位。elasticIn物体从静止开始振动着离开。可用于元素被“甩出”或“震碎”的动画。elasticInOut两头都振动感觉比较“拖沓”使用场景较少。组合使用不要只动画scale。尝试组合position轻微上下移动、rotation微小角度旋转能让弹性感更立体。但注意幅度要小避免眩晕。性能提示弹性计算涉及三角函数比线性计算稍复杂但在现代GPU上对单个UI元素的性能影响可以忽略不计。避免在同一帧对上百个元素同时进行复杂的弹性动画。3.3 弹跳Bounce效果趣味与反馈的利器弹跳效果模拟了现实世界中物体落地弹跳动能逐渐衰减的过程。它比弹性效果更“卡通化”节奏感更强常用于游戏化UI或积极的反馈。// 示例一个收集金币的UI反馈动画 import { _decorator, Component, Node, tween, Vec3, v3, UIOpacity } from cc; ccclass(BounceCoin) export class BounceCoin extends Component { property(Node) coinIcon: Node null!; // 金币图标 collectCoin(atWorldPos: Vec3) { // 1. 将世界坐标转换到UI坐标这里假设coinIcon在UI Canvas下 // ... 坐标转换逻辑 ... // 2. 让金币图标跳到某个目标位置比如积分栏 const startPos this.coinIcon.position.clone(); const targetPos new Vec3(100, -50, 0); // 积分栏位置 tween(this.coinIcon) .to(1.2, { position: targetPos, // 弹跳过程中可以加入轻微的缩放变化增强体积感 }, { easing: bounceOut, // 核心弹跳缓出 } ) .start(); // 3. 可以并行一个淡出动画 const opacityComp this.coinIcon.getComponent(UIOpacity) || this.coinIcon.addComponent(UIOpacity); opacityComp.opacity 255; tween(opacityComp) .delay(0.8) // 弹跳一会后再开始淡出 .to(0.4, { opacity: 0 }, { easing: sineOut }) .start(); } // 示例按钮被点击时的“按压”弹跳反馈 onButtonClick() { const btn this.node; // 假设这个脚本挂在按钮上 const originalScale btn.scale.clone(); // 先快速缩小按压再弹回原尺寸 tween(btn) .to(0.1, { scale: v3(0.9, 0.9, 1) }, { easing: quadOut }) .to(0.3, { scale: originalScale }, { easing: bounceOut }) // 用弹跳效果恢复 .start(); } }关键点与技巧与弹性的区别弹跳(bounce)的“过冲”是离散的、次数较少的弹跳而弹性(elastic)是连续的、频率较高的振动。bounce更像皮球elastic更像弹簧。节奏控制bounceOut的节奏是固定的。如果你需要更多或更少的弹跳次数必须通过自定义progress函数实现。一个简单的自定义弹跳函数可能需要分段处理时间进度。使用场景得分/奖励反馈分数跳出来时弹几下。任务完成提示。活泼的按钮交互如上例。物体掉落配合重力感可能用bounceIn更合适实际上bounceIn是反向的从目标点“掉下来”弹跳使用前务必测试。避免滥用弹跳效果非常吸引眼球也容易让人疲劳。不要在频繁触发的操作上使用比如每次点击按钮都弹跳应留给重要的、积极的反馈。4. 进阶应用自定义缓动与复杂动画序列内置函数虽好但总有满足不了需求的时候。Cocos Tween的progress选项和链式调用给了我们极大的灵活性。4.1 使用progress自定义缓动曲线当内置的elastic或bounce参数不满足你时或者你想创造一个独一无二的曲线progress回调是你的画板。// 示例实现一个自定义的、更“紧绷”的弹性效果 import { _decorator, Component, Node, tween, Vec3, math } from cc; function myTightElastic(period: number 0.3, amplitude: number 1.0) { // 一个简化的弹性函数实现仅Out return (start: number, end: number, current: number, ratio: number): number { // ratio 是时间进度 (0-1) if (ratio 0 || ratio 1) { return math.lerp(start, end, ratio); } // 基于正弦衰减函数模拟弹性 const s period / 4; // 可调参数 // 这是一个简化版实际完整的elastic函数更复杂 const t ratio - 1; const result Math.pow(2, -10 * t) * Math.sin((t - s) * (2 * Math.PI) / period) 1; // 将结果映射到[start, end] return start (end - start) * result; }; } ccclass(CustomEasing) export class CustomEasing extends Component { start() { tween(this.node.position) .to(2.0, new Vec3(200, 0, 0), { // 使用自定义progress函数 progress: (start: Vec3, end: Vec3, current: Vec3, ratio: number): Vec3 { // 分别对x, y, z应用缓动。这里x用自定义弹性y用标准二次缓出。 const x start.x (end.x - start.x) * myTightElastic(0.2, 0.8)(0, 1, ratio, ratio); const y start.y (end.y - start.y) * math.smooth(0, 1, ratio); // 使用math.smooth return new Vec3(x, y, current.z); }, onUpdate: (target: Vec3) { this.node.position target; } }) .start(); } }重要提示直接修改Vec3这样的值类型并让Tween动画需要将其作为目标对象并在onUpdate中手动赋值。更常见的做法是直接tween节点属性使用内置easing字符串。自定义progress通常用于更特殊的插值需求。4.2 构建复杂的动画序列与组合真实的UI动画很少是单一的移动。通常是缩放、旋转、透明度变化、颜色变化的组合并且有先后顺序。// 示例一个复杂的卡片翻转展示动画 import { _decorator, Component, Node, tween, Vec3, v3, Quat, quat, UIOpacity, Color } from cc; ccclass(CardAnimation) export class CardAnimation extends Component { property(Node) cardNode: Node null!; revealCard() { const card this.cardNode; const opacityComp card.getComponent(UIOpacity) || card.addComponent(UIOpacity); // 1. 初始状态隐藏并缩小 card.setScale(v3(0.5, 0.5, 1)); opacityComp.opacity 0; card.active true; // 2. 动画序列淡入 放大同时 tween(card) .parallel( // 并行执行 tween().to(0.4, { scale: v3(1.1, 1.1, 1) }, { easing: backOut }), // 稍微放大一点 tween(opacityComp).to(0.4, { opacity: 255 }, { easing: quadOut }) ) .to(0.2, { scale: v3(1, 1, 1) }, { easing: bounceOut }) // 再轻微弹回正常尺寸 .delay(0.5) // 停留片刻 .call(() { // 3. 翻转动画简化版通过缩放模拟 tween(card) .to(0.3, { scale: v3(0.05, 1, 1) }, { easing: sineInOut }) // 压扁 .call(() { // 这里可以切换卡面图片 console.log(切换为卡牌正面); }) .to(0.3, { scale: v3(1, 1, 1) }, { easing: elasticOut }) // 弹性恢复 .start(); }) .start(); } }技巧总结.parallel()用于让多个动画同时执行。.sequence()或直接链式调用默认是顺序用于让动画按顺序执行。.delay()插入等待时间。.call()在特定时间点执行回调函数用于触发逻辑如播放音效、切换纹理。.repeat()/.repeatForever()用于循环动画。缓动函数可以用于任何数值属性包括自定义组件的属性。例如你可以tween一个进度条的progress属性0-1并指定easing: ‘quadOut’就能得到非线性的填充效果。5. 性能优化与常见问题排查5.1 性能优化要点减少活动Tween数量及时停止不再需要的动画。使用tween(node).stop()或tween(node).stopAll()。特别是在场景切换或UI销毁时。合并属性动画尽可能在同一个.to()调用中动画多个属性这比创建多个独立的Tween效率更高。谨慎使用每帧回调onUpdate回调每帧都会执行避免在其中进行复杂的计算或DOM查询。对于大量重复动画例如列表中的多个项目依次入场考虑使用delay错开它们的启动时间而不是为每个创建完全独立的复杂序列可以减少单帧的计算压力。善用缓存对于频繁使用的动画目标如Vec3.ZERO可以预先创建并复用。5.2 常见问题与解决方案问题1动画不播放或没效果。检查节点状态确保node.active为true且节点在场景树中。检查属性名确保.to()或.by()中的属性名是节点存在的属性且可写。例如{ position: new Vec3() }是正确的{ pos: ... }则无效。检查Tween是否启动链式调用的最后必须调用.start()。检查时间缩放tween系统受director.getDeltaTime()影响但通常不受timeScale影响除非你自己处理。确保游戏没有暂停。问题2动画卡顿或不流畅。性能分析使用Cocos Creator的Profiler工具查看Script和Animation部分的耗时。检查是否在同一帧创建或更新了过多Tween。简化复杂progress函数自定义的progress函数如果包含大量数学运算可能会成为瓶颈。检查垃圾回收避免在onUpdate中频繁创建新对象如new Vec3()。可以在外部创建变量并复用。问题3弹性/弹跳效果不符合预期太夸张或太微弱。内置函数限制Cocos内置的elastic和bounce参数不可调。如果不符合需求你必须使用progress自定义或寻找社区提供的、参数可调的缓动函数库例如将Penner’s Easing Functions移植到Cocos。动画时长影响缓动曲线的“感觉”与总时长强相关。同样的elasticOut持续0.3秒和持续2.0秒视觉效果差异巨大。通常弹性动画时长在0.5秒到1.2秒之间比较合适。属性变化范围将一个节点从位置(0,0)移动到(10,10)的弹性和移动到(1000,1000)的弹性观感也不同。需要结合变化幅度调整时长。问题4如何实现“回弹”到原始位置这通常不是靠单个缓动函数完成的而是一个动画序列。例如// 被拖动元素释放后回弹 tween(node) .to(0.3, { position: originalPos }, { easing: elasticOut }) // 弹性回弹 .start();或者先快速移动到目标点附近再弹性归位模拟“投掷”感。问题5如何在动画中途停止并切换到另一个动画停止所有tween(node).stopAll()。停止特定标签创建Tween时可以用.tag(‘someTag’)标记然后用tween(node).stop(‘someTag’)停止。直接开始新动画新的tween(node).to(...).start()会自动停止该节点上之前由Tween系统驱动的相同属性的动画。对于不同属性它们会并行。这是最常用的方式。掌握缓动函数就像一位厨师掌握了火候。它不能解决所有动画问题但能让最基础的食材平移、缩放、旋转变成美味佳肴。从今天起别再只用linear和quadOut了大胆地把elasticOut和bounceOut加入你的UI动画工具箱仔细观察那些优秀应用和游戏的细节你会发现生动的交互就藏在这些微妙的曲线之中。多尝试多调试找到最适合你产品性格的那一款“动效调味料”。
Cocos Creator UI动画：线性、弹性与弹跳缓动函数实战指南
发布时间：2026/7/12 12:23:56
1. 项目概述与核心价值在Cocos Creator中制作UI动画如果只是让一个按钮从A点直线移动到B点那感觉就像喝白开水一样平淡无奇。真正能让用户眼前一亮、让交互体验充满质感的往往是那些带有“灵性”的过渡效果——比如一个弹窗入场时轻微的“回弹”或者一个物品被点击时俏皮的“抖动”。这些效果的灵魂就是缓动函数Easing Function。它决定了动画过程中属性值随时间变化的“节奏”是连接起止状态的桥梁。今天我们就来深入聊聊Cocos引擎中UI动画的缓动函数特别是如何实现和应用线性、弹性与弹跳这三种最具代表性的效果让你的界面瞬间“活”起来。对于前端和游戏开发者而言理解并熟练运用缓动函数是提升产品细节和用户体验的必修课。它不仅仅是调用一个API那么简单更关乎你对动画节奏、物理模拟和用户心理预期的把握。无论是制作一个平滑的进度条线性还是一个充满惊喜的庆祝弹窗弹性/弹跳合适的缓动函数都能事半功倍。本文将基于Cocos Creator 3.x的Tween系统带你从原理到实践彻底掌握这些动画“魔术”背后的秘密。2. 缓动函数的核心原理与Cocos实现机制2.1 什么是缓动函数从数学到感知简单来说缓动函数是一个定义了“进度-比率”映射关系的数学函数。它接收一个归一化的时间进度通常是从0到1输出一个对应的属性变化比率。这个比率再与属性的起始值和目标值结合计算出当前帧的具体属性值。举个例子一个最简单的线性缓动函数是progress time。这意味着时间过去10%属性值也变化10%整个过程匀速进行。但自然界中很少有绝对匀速的运动更多是加速、减速或带有惯性的运动。因此我们有了quadIn先慢后快、quadOut先快后慢、elasticOut像皮筋一样弹动等丰富的函数。在Cocos Creator中这套机制被封装在tween系统里。当你调用tween(node).to(duration, props, { easing: ‘bounceOut’ })时引擎会在每一帧根据已过去的时间计算归一化进度t0到1。将t传入指定的缓动函数如bounceOut得到一个映射后的进度r。根据r对props中定义的每个属性如position,scale,opacity在起始值和目标值之间进行插值通常是线性插值lerp。将计算出的新值赋给节点的对应属性。2.2 Cocos Creator中的缓动函数家族Cocos Creator内置了非常全面的缓动函数主要可以分为几大类无缓动linear线性constant常数通常用于步骤动画。幂函数缓动quad,cubic,quart,quint。它们遵循t^n的数学模型n越大加速/减速的感觉越强烈。每种又分In缓入开始慢、Out缓出结束慢、InOut缓入缓出两头慢、OutIn缓出缓入中间快。正弦与圆形缓动sine,circ。基于三角函数或圆形函数能产生非常平滑、自然的加速减速效果。指数缓动expo。变化非常剧烈适合表现快速爆发或消失的效果。“过冲”类缓动back。动画会稍微“冲过”目标点再回来模拟一种蓄力或过冲的效果。物理模拟类缓动这也是本文的重点弹性Elastic模拟弹簧振动会有多次逐渐衰减的过冲和回弹。elasticIn是振动着开始elasticOut是振动着结束最常用elasticInOut是两头都振动。弹跳Bounce模拟小球落地弹跳有几次明显的、幅度递减的弹跳。bounceOut是最常用的模拟物体落地弹跳至静止。注意smooth和fade是Cocos Creator特有的内置函数smooth提供了一个非常标准的平滑过渡而fade通常用于淡入淡出其曲线可能经过特殊优化。2.3 为何选择Tween系统在Cocos中制作动画你可能有多个选择Animation组件、脚本中每帧更新、或者Tween。Tween系统在UI动画领域的优势非常明显声明式编程用链式调用清晰描述动画序列代码可读性高。高性能引擎内部优化避免每帧手动计算和赋值。功能强大支持并行、串行、重复、反转等复杂动画组合以及丰富的回调onUpdate,onComplete等。与脚本深度集成非常适合由逻辑事件触发的动态UI动画。3. 三大核心效果线性、弹性、弹跳的实战解析理论说再多不如一行代码。我们直接进入实战看看如何用Cocos Tween实现这三种效果并剖析其中的关键参数和技巧。3.1 线性Linear运动稳定与可控的基石线性缓动是基础它意味着匀速运动。虽然听起来简单但它是许多复杂动画的组成部分或者在某些需要精确、无加速感的场景下如机械UI、计时器是唯一选择。// 示例一个水平匀速移动的进度条背景或飞船 import { _decorator, Component, Node, tween, Vec3 } from cc; ccclass(LinearMotion) export class LinearMotion extends Component { start() { // 假设this.node是一个需要水平移动的UI元素 const startPos this.node.position.clone(); const endPos new Vec3(300, startPos.y, startPos.z); // 向右移动300像素 tween(this.node) .to(2.0, { position: endPos }, { easing: linear, // 明确指定线性缓动 onUpdate: (target: Vec3, ratio: number) { // 线性缓动下ratio 基本等于 timeElapsed / duration // console.log(进度: ${(ratio * 100).toFixed(1)}%, 位置: ${target.x.toFixed(1)}); } }) .start(); } }关键点与技巧何时使用需要绝对匀速、可预测的动画时。例如计时器数字滚动、匀速旋转的加载图标、沿固定路径平移的UI如跑马灯。注意事项线性运动在视觉上可能显得“呆板”或“机械”。在大多数追求自然感的UI交互中应谨慎使用纯线性动画。一个常见的技巧是对多个属性使用不同的缓动比如位置linear但透明度用sineOut可以增加层次感。性能线性计算最简单性能开销最小但这在当代设备上差异微乎其微不应作为选型首要考虑。3.2 弹性Elastic效果赋予界面生命力弹性效果模拟了弹簧的物理特性是营造“活泼”、“有弹性”感觉的利器。Cocos内置的elasticOut、elasticInOut等函数已经封装好了复杂的衰减振动算法。// 示例一个对话框弹窗的入场动画 import { _decorator, Component, Node, tween, Vec3, v3 } from cc; ccclass(ElasticPopup) export class ElasticPopup extends Component { // 弹窗节点 property(Node) popupPanel: Node null!; showPopup() { if (!this.popupPanel) return; // 初始状态缩小并透明 this.popupPanel.setScale(Vec3.ZERO); this.popupPanel.active true; // 使用弹性动画放大并显示 tween(this.popupPanel) .to(0.8, { scale: v3(1, 1, 1), // 放大到原始尺寸 // 通常也会同时改变position或rotation来增加效果 }, { easing: elasticOut, // 核心弹性缓出 // 弹性函数有内置参数控制振动幅度和次数但Cocos内置函数不直接暴露。 // 如需更精细控制需使用progress自定义或寻找扩展库。 onStart: () { console.log(弹窗开始展示); }, onComplete: () { console.log(弹窗展示完毕); } } ) .start(); } // 可以配合一个缓入elasticIn或回弹backOut的关闭动画 hidePopup() { tween(this.popupPanel) .to(0.5, { scale: Vec3.ZERO }, { easing: backIn }) .call(() { this.popupPanel.active false; }) .start(); } }关键点与技巧参数理解标准的弹性函数通常有振幅(amplitude)、周期(period)或衰减(damping)参数。Cocos内置的elastic系列函数使用了预设的、视觉效果不错的参数。如果你觉得振动太强或太弱可能需要寻找社区扩展或自己实现progress函数。使用场景elasticOut最常用。用于物体“飞入”或“弹出”到最终位置带有 overshoot 和 settle 的效果。非常适合重要通知、成就解锁、可拖动元素归位。elasticIn物体从静止开始振动着离开。可用于元素被“甩出”或“震碎”的动画。elasticInOut两头都振动感觉比较“拖沓”使用场景较少。组合使用不要只动画scale。尝试组合position轻微上下移动、rotation微小角度旋转能让弹性感更立体。但注意幅度要小避免眩晕。性能提示弹性计算涉及三角函数比线性计算稍复杂但在现代GPU上对单个UI元素的性能影响可以忽略不计。避免在同一帧对上百个元素同时进行复杂的弹性动画。3.3 弹跳Bounce效果趣味与反馈的利器弹跳效果模拟了现实世界中物体落地弹跳动能逐渐衰减的过程。它比弹性效果更“卡通化”节奏感更强常用于游戏化UI或积极的反馈。// 示例一个收集金币的UI反馈动画 import { _decorator, Component, Node, tween, Vec3, v3, UIOpacity } from cc; ccclass(BounceCoin) export class BounceCoin extends Component { property(Node) coinIcon: Node null!; // 金币图标 collectCoin(atWorldPos: Vec3) { // 1. 将世界坐标转换到UI坐标这里假设coinIcon在UI Canvas下 // ... 坐标转换逻辑 ... // 2. 让金币图标跳到某个目标位置比如积分栏 const startPos this.coinIcon.position.clone(); const targetPos new Vec3(100, -50, 0); // 积分栏位置 tween(this.coinIcon) .to(1.2, { position: targetPos, // 弹跳过程中可以加入轻微的缩放变化增强体积感 }, { easing: bounceOut, // 核心弹跳缓出 } ) .start(); // 3. 可以并行一个淡出动画 const opacityComp this.coinIcon.getComponent(UIOpacity) || this.coinIcon.addComponent(UIOpacity); opacityComp.opacity 255; tween(opacityComp) .delay(0.8) // 弹跳一会后再开始淡出 .to(0.4, { opacity: 0 }, { easing: sineOut }) .start(); } // 示例按钮被点击时的“按压”弹跳反馈 onButtonClick() { const btn this.node; // 假设这个脚本挂在按钮上 const originalScale btn.scale.clone(); // 先快速缩小按压再弹回原尺寸 tween(btn) .to(0.1, { scale: v3(0.9, 0.9, 1) }, { easing: quadOut }) .to(0.3, { scale: originalScale }, { easing: bounceOut }) // 用弹跳效果恢复 .start(); } }关键点与技巧与弹性的区别弹跳(bounce)的“过冲”是离散的、次数较少的弹跳而弹性(elastic)是连续的、频率较高的振动。bounce更像皮球elastic更像弹簧。节奏控制bounceOut的节奏是固定的。如果你需要更多或更少的弹跳次数必须通过自定义progress函数实现。一个简单的自定义弹跳函数可能需要分段处理时间进度。使用场景得分/奖励反馈分数跳出来时弹几下。任务完成提示。活泼的按钮交互如上例。物体掉落配合重力感可能用bounceIn更合适实际上bounceIn是反向的从目标点“掉下来”弹跳使用前务必测试。避免滥用弹跳效果非常吸引眼球也容易让人疲劳。不要在频繁触发的操作上使用比如每次点击按钮都弹跳应留给重要的、积极的反馈。4. 进阶应用自定义缓动与复杂动画序列内置函数虽好但总有满足不了需求的时候。Cocos Tween的progress选项和链式调用给了我们极大的灵活性。4.1 使用progress自定义缓动曲线当内置的elastic或bounce参数不满足你时或者你想创造一个独一无二的曲线progress回调是你的画板。// 示例实现一个自定义的、更“紧绷”的弹性效果 import { _decorator, Component, Node, tween, Vec3, math } from cc; function myTightElastic(period: number 0.3, amplitude: number 1.0) { // 一个简化的弹性函数实现仅Out return (start: number, end: number, current: number, ratio: number): number { // ratio 是时间进度 (0-1) if (ratio 0 || ratio 1) { return math.lerp(start, end, ratio); } // 基于正弦衰减函数模拟弹性 const s period / 4; // 可调参数 // 这是一个简化版实际完整的elastic函数更复杂 const t ratio - 1; const result Math.pow(2, -10 * t) * Math.sin((t - s) * (2 * Math.PI) / period) 1; // 将结果映射到[start, end] return start (end - start) * result; }; } ccclass(CustomEasing) export class CustomEasing extends Component { start() { tween(this.node.position) .to(2.0, new Vec3(200, 0, 0), { // 使用自定义progress函数 progress: (start: Vec3, end: Vec3, current: Vec3, ratio: number): Vec3 { // 分别对x, y, z应用缓动。这里x用自定义弹性y用标准二次缓出。 const x start.x (end.x - start.x) * myTightElastic(0.2, 0.8)(0, 1, ratio, ratio); const y start.y (end.y - start.y) * math.smooth(0, 1, ratio); // 使用math.smooth return new Vec3(x, y, current.z); }, onUpdate: (target: Vec3) { this.node.position target; } }) .start(); } }重要提示直接修改Vec3这样的值类型并让Tween动画需要将其作为目标对象并在onUpdate中手动赋值。更常见的做法是直接tween节点属性使用内置easing字符串。自定义progress通常用于更特殊的插值需求。4.2 构建复杂的动画序列与组合真实的UI动画很少是单一的移动。通常是缩放、旋转、透明度变化、颜色变化的组合并且有先后顺序。// 示例一个复杂的卡片翻转展示动画 import { _decorator, Component, Node, tween, Vec3, v3, Quat, quat, UIOpacity, Color } from cc; ccclass(CardAnimation) export class CardAnimation extends Component { property(Node) cardNode: Node null!; revealCard() { const card this.cardNode; const opacityComp card.getComponent(UIOpacity) || card.addComponent(UIOpacity); // 1. 初始状态隐藏并缩小 card.setScale(v3(0.5, 0.5, 1)); opacityComp.opacity 0; card.active true; // 2. 动画序列淡入 放大同时 tween(card) .parallel( // 并行执行 tween().to(0.4, { scale: v3(1.1, 1.1, 1) }, { easing: backOut }), // 稍微放大一点 tween(opacityComp).to(0.4, { opacity: 255 }, { easing: quadOut }) ) .to(0.2, { scale: v3(1, 1, 1) }, { easing: bounceOut }) // 再轻微弹回正常尺寸 .delay(0.5) // 停留片刻 .call(() { // 3. 翻转动画简化版通过缩放模拟 tween(card) .to(0.3, { scale: v3(0.05, 1, 1) }, { easing: sineInOut }) // 压扁 .call(() { // 这里可以切换卡面图片 console.log(切换为卡牌正面); }) .to(0.3, { scale: v3(1, 1, 1) }, { easing: elasticOut }) // 弹性恢复 .start(); }) .start(); } }技巧总结.parallel()用于让多个动画同时执行。.sequence()或直接链式调用默认是顺序用于让动画按顺序执行。.delay()插入等待时间。.call()在特定时间点执行回调函数用于触发逻辑如播放音效、切换纹理。.repeat()/.repeatForever()用于循环动画。缓动函数可以用于任何数值属性包括自定义组件的属性。例如你可以tween一个进度条的progress属性0-1并指定easing: ‘quadOut’就能得到非线性的填充效果。5. 性能优化与常见问题排查5.1 性能优化要点减少活动Tween数量及时停止不再需要的动画。使用tween(node).stop()或tween(node).stopAll()。特别是在场景切换或UI销毁时。合并属性动画尽可能在同一个.to()调用中动画多个属性这比创建多个独立的Tween效率更高。谨慎使用每帧回调onUpdate回调每帧都会执行避免在其中进行复杂的计算或DOM查询。对于大量重复动画例如列表中的多个项目依次入场考虑使用delay错开它们的启动时间而不是为每个创建完全独立的复杂序列可以减少单帧的计算压力。善用缓存对于频繁使用的动画目标如Vec3.ZERO可以预先创建并复用。5.2 常见问题与解决方案问题1动画不播放或没效果。检查节点状态确保node.active为true且节点在场景树中。检查属性名确保.to()或.by()中的属性名是节点存在的属性且可写。例如{ position: new Vec3() }是正确的{ pos: ... }则无效。检查Tween是否启动链式调用的最后必须调用.start()。检查时间缩放tween系统受director.getDeltaTime()影响但通常不受timeScale影响除非你自己处理。确保游戏没有暂停。问题2动画卡顿或不流畅。性能分析使用Cocos Creator的Profiler工具查看Script和Animation部分的耗时。检查是否在同一帧创建或更新了过多Tween。简化复杂progress函数自定义的progress函数如果包含大量数学运算可能会成为瓶颈。检查垃圾回收避免在onUpdate中频繁创建新对象如new Vec3()。可以在外部创建变量并复用。问题3弹性/弹跳效果不符合预期太夸张或太微弱。内置函数限制Cocos内置的elastic和bounce参数不可调。如果不符合需求你必须使用progress自定义或寻找社区提供的、参数可调的缓动函数库例如将Penner’s Easing Functions移植到Cocos。动画时长影响缓动曲线的“感觉”与总时长强相关。同样的elasticOut持续0.3秒和持续2.0秒视觉效果差异巨大。通常弹性动画时长在0.5秒到1.2秒之间比较合适。属性变化范围将一个节点从位置(0,0)移动到(10,10)的弹性和移动到(1000,1000)的弹性观感也不同。需要结合变化幅度调整时长。问题4如何实现“回弹”到原始位置这通常不是靠单个缓动函数完成的而是一个动画序列。例如// 被拖动元素释放后回弹 tween(node) .to(0.3, { position: originalPos }, { easing: elasticOut }) // 弹性回弹 .start();或者先快速移动到目标点附近再弹性归位模拟“投掷”感。问题5如何在动画中途停止并切换到另一个动画停止所有tween(node).stopAll()。停止特定标签创建Tween时可以用.tag(‘someTag’)标记然后用tween(node).stop(‘someTag’)停止。直接开始新动画新的tween(node).to(...).start()会自动停止该节点上之前由Tween系统驱动的相同属性的动画。对于不同属性它们会并行。这是最常用的方式。掌握缓动函数就像一位厨师掌握了火候。它不能解决所有动画问题但能让最基础的食材平移、缩放、旋转变成美味佳肴。从今天起别再只用linear和quadOut了大胆地把elasticOut和bounceOut加入你的UI动画工具箱仔细观察那些优秀应用和游戏的细节你会发现生动的交互就藏在这些微妙的曲线之中。多尝试多调试找到最适合你产品性格的那一款“动效调味料”。
