【Laya】Ease 缓动函数

Laya.Ease 缓动函数

简介

Laya.Ease 类提供了大量缓动函数，用于实现 Laya.Tween 动画的具体缓动效果。缓动函数控制动画过程中数值变化的速度曲线，使运动更符合自然规律和人类认知。

适用场景：

• UI 动画（对话框弹出/关闭、按钮动效）
• 道具飞入背包等交互动画
• 场景过渡效果
• 物体运动效果

核心优势：

优势	说明
效果自然	模拟真实物理运动，避免僵硬的匀速运动
丰富多样	提供多种缓动类型满足不同需求
简单易用	配合 Tween 一行代码即可使用

---

目录

• 缓动函数分类
• 基础用法
• 实用示例
• 效果对比
• 最佳实践

---

缓动函数分类

1. Linear（线性/匀速）

函数	描述
linearNone	匀速运动（无变化）
linearIn	匀速进入
linearOut	匀速退出
linearInOut	匀速进入退出

特点：速度恒定，运动显得僵硬，不符合真实物理规律

2. Sine（正弦波）

函数	描述
sineIn	正弦加速进入
sineOut	正弦减速退出
sineInOut	正弦加减速

特点：平滑的自然运动效果

3. Quad（二次方）

函数	描述
quadIn	二次加速
quadOut	二次减速
quadInOut	二次加减速

特点：简单加速/减速效果

4. Cubic（三次方）

函数	描述
cubicIn	三次加速
cubicOut	三次减速
cubicInOut	三次加减速

特点：比 Quad 效果更明显

5. Quart（四次方）

函数	描述
quartIn	四次加速
quartOut	四次减速
quartInOut	四次加减速

特点：强加速/减速效果

6. Quint（五次方）

函数	描述
quintIn	五次加速
quintOut	五次减速
quintInOut	五次加减速

特点：极强加速/减速效果

7. Expo（指数）

函数	描述
expoIn	指数加速（从零速开始）
expoOut	指数减速
expoInOut	指数加减速

特点：以零速率开始，然后快速加速

8. Circ（圆形）

函数	描述
circIn	圆形加速
circOut	圆形减速
circInOut	圆形加减速

特点：基于圆形曲线的加速/减速

9. Elastic（弹性）

函数	描述
elasticIn	弹性进入（超出目标后回弹）
elasticOut	弹性退出
elasticInOut	弹性进入退出

特点：有弹跳效果，可配置幅度和周期参数

10. Back（回拉）

函数	描述
backIn	先往后退再向前冲
backOut	超出目标后返回
backInOut	回拉效果进入退出

特点：开始时反向运动，然后朝目标移动

11. Bounce（弹跳）

函数	描述
bounceIn	弹跳进入
bounceOut	弹跳退出
bounceInOut	弹跳进入退出

特点：像球落地一样弹跳

12. Strong（强力）

函数	描述
strongIn	快速加速
strongOut	快速减速
strongInOut	快速加减速

特点：比 Expo 更强的加速效果

---

基础用法

1. 基本调用

// 方式一：传入缓动函数
Laya.Tween.create(sprite).duration(1000).to("x", 600).ease(Laya.Ease.cubicOut);

// 方式二：使用函数名字符串
Laya.Tween.create(sprite).duration(1000).to("x", 600).ease("cubicOut");

2. 带参数的缓动函数

// elasticOut 可以额外设置弹性幅度和周期
Laya.Tween.create(sprite).duration(1000).to("x", 600).ease("elasticOut", 5);

3. 自定义缓动函数

// 使用自定义缓动函数
Laya.Tween.create(sprite).duration(1000).to("x", 600).ease(myEase);

// 自定义缓动函数
function myEase(t: number, b: number, c: number, d: number): number {
    // t: 当前时间, b: 初始值, c: 变化量, d: 持续时间
    return b + c * (t / d);
}

---

实用示例

示例1: UI 弹出动画

// 对话框弹出效果 - 使用 cubicOut 先快后慢
export class DialogAnimation {
    public static showDialog(dialog: Laya.Box): void {
        dialog.scaleX = 0;
        dialog.scaleY = 0;
        dialog.alpha = 0;

        Laya.Tween.create(dialog)
            .duration(300)
            .to("scaleX", 1)
            .to("scaleY", 1)
            .to("alpha", 1)
            .ease(Laya.Ease.cubicOut);
    }

    // 对话框关闭 - 使用 cubicIn 先慢后快
    public static hideDialog(dialog: Laya.Box): void {
        Laya.Tween.create(dialog)
            .duration(200)
            .to("scaleX", 0)
            .to("scaleY", 0)
            .to("alpha", 0)
            .ease(Laya.Ease.cubicIn)
            .then(() => {
                dialog.removeSelf();
            });
    }
}

示例2: 按钮交互动效

@regClass()
export class ButtonEffect extends Laya.Script {
    onMouseDown(): void {
        // 点击时缩小 - 使用 backOut 有回弹效果
        Laya.Tween.create(this.owner)
            .duration(100)
            .to("scaleX", 0.9)
            .to("scaleY", 0.9)
            .ease(Laya.Ease.backOut);
    }

    onMouseUp(): void {
        // 释放时恢复 - 使用 elasticOut 有弹性
        Laya.Tween.create(this.owner)
            .duration(300)
            .to("scaleX", 1)
            .to("scaleY", 1)
            .ease(Laya.Ease.elasticOut);
    }
}

示例3: 道具飞入背包

export class ItemFlyEffect {
    // 道具飞入背包效果
    public static flyToBag(itemIcon: Laya.Image, targetX: number, targetY: number): void {
        Laya.Tween.create(itemIcon)
            .duration(500)
            .to("x", targetX)
            .to("y", targetY)
            .to("scaleX", 0.5)
            .to("scaleY", 0.5)
            .ease(Laya.Ease.cubicIn)
            .then(() => {
                itemIcon.removeSelf();
            });
    }
}

示例4: 页面切换效果

export class PageTransition {
    // 页面从右侧滑入
    public static slideInFromRight(page: Laya.Box, stageWidth: number): void {
        page.x = stageWidth;

        Laya.Tween.create(page)
            .duration(400)
            .to("x", 0)
            .ease(Laya.Ease.cubicOut);
    }

    // 页面向左滑出
    public static slideOutToLeft(page: Laya.Box, stageWidth: number): void {
        Laya.Tween.create(page)
            .duration(300)
            .to("x", -stageWidth)
            .ease(Laya.Ease.cubicIn);
    }
}

示例5: 跳跃效果

export class JumpEffect {
    // 角色跳跃效果 - 使用 expoOut 模拟重力
    public static jump(sprite: Laya.Sprite, targetY: number): void {
        let startY = sprite.y;

        // 上升
        Laya.Tween.create(sprite)
            .duration(300)
            .to("y", targetY)
            .ease(Laya.Ease.expoOut)
            .then(() => {
                // 下落
                Laya.Tween.create(sprite)
                    .duration(300)
                    .to("y", startY)
                    .ease(Laya.Ease.bounceOut);
            });
    }
}

---

效果对比

常用效果对比表

效果	适用场景	推荐函数
弹出窗口	UI 出现	cubicOut
关闭窗口	UI 消失	cubicIn
按钮点击	交互反馈	backOut
按钮释放	弹性恢复	elasticOut
物品移动	飞入效果	cubicIn
页面切换	滑动过渡	cubicOut
跳跃效果	模拟重力	expoOut + bounceOut
提示框	吸引注意	elasticOut
普通移动	自然流畅	sineOut
长距离移动	快速开始	expoOut

运动曲线对比

加速类 (In):
        /          quadIn, cubicIn, expoIn
       /
      /
_____/

减速类 (Out):
      \
       \         quadOut, cubicOut, expoOut
        \
         _______

加减速类 (InOut):
        /\
       /  \
      /    \    quadInOut, cubicInOut
_____/      \
            \_____

回拉类 (Back):
   |
   |          backIn
   |
    \
     \
      \______
           |
           |    backOut
    _______/

---

最佳实践

1. UI 动画推荐组合

// ✅ 推荐：弹出用 cubicOut，收起用 cubicIn
show: ease(Laya.Ease.cubicOut)
hide: ease(Laya.Ease.cubicIn)

// ✅ 推荐：按钮用 elasticOut 增加趣味性
buttonClick: ease(Laya.Ease.elasticOut)

2. 避免过度使用弹性效果

// ❌ 不推荐：所有地方都用弹性
Laya.Tween.create(sprite).to("x", 100).ease(Laya.Ease.elasticOut);

// ✅ 推荐：只在需要吸引注意时使用弹性
Laya.Tween.create(rewardIcon).to("x", 100).ease(Laya.Ease.elasticOut);

3. 根据距离选择缓动

// 短距离移动用 sineOut
Laya.Tween.create(sprite).duration(200).to("x", targetX + 50).ease(Laya.Ease.sineOut);

// 长距离移动用 expoOut
Laya.Tween.create(sprite).duration(500).to("x", targetX + 500).ease(Laya.Ease.expoOut);

4. 配合延迟使用

// 先显示，然后延迟，再执行下一步动画
Laya.Tween.create(dialog)
    .duration(300)
    .to("alpha", 1)
    .ease(Laya.Ease.cubicOut)
    .delay(1000)
    .to("alpha", 0)
    .ease(Laya.Ease.cubicIn);

5. 缓动时长建议

动画类型	推荐时长	推荐缓动
弹窗显示	200-400ms	cubicOut
弹窗关闭	150-250ms	cubicIn
按钮点击	80-150ms	backOut
页面切换	300-500ms	cubicOut
道具飞行	400-800ms	cubicIn
提示动画	300-600ms	elasticOut

---

注意事项

1. 必须使用 Laya.Ease 前缀 ：访问缓动函数时需加上 Laya. 命名空间
2. 配合 Tween 使用 ：Ease 函数需要配合 Laya.Tween.ease() 方法使用
3. 避免过度复杂：简单的动画用简单的缓动，不要为了炫技而过度复杂化
4. 性能考虑：大量同时运行的缓动动画可能影响性能
5. 参数类型：缓动函数可以传入函数引用或字符串函数名

---

相关文档

• Tween 使用说明
• Laya.TimeLine 使用说明
• Handler 使用说明