本文同步发表于 微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

一、动画曲线

1. 动画曲线定义

• 是什么：属性关于时间的变化函数

• 作用：决定属性变化时产生动画的运动轨迹

• 特征：

  • 某时刻的斜率 = 动画速度

  • 斜率越大 → 属性变化越快

  • 斜率越小 → 属性变化越慢

2. 优秀动画曲线的标准

1. 连续光滑：运动轨迹平滑无突变

2. 符合意图：达到预期的视觉效果

3. 符合物理世界客观规律：运动方式符合现实物理规律

二、动画曲线分类

动画曲线
├── 物理曲线 (建议优先使用)
│   └── 弹簧曲线 (Spring Curve)
│       └── 阻尼弹簧曲线
│
└── 传统曲线 (传统数学曲线)
    └── 三阶贝塞尔曲线 (代表)
        ├── Linear
        ├── Ease
        ├── EaseIn
        ├── EaseOut
        ├── EaseInOut
        └── FastOutSlowIn

三、传统曲线

1. 基本特征

• 数学基础：基于数学公式构建

• 形状控制：通过调整曲线控制点改变形状

• 静态特性：形状不会因用户行为而改变

• 物理意义：不具备物理含义

2. 优缺点对比

优点	缺点
形状可精确控制	缺乏物理动画的自然感
实现简单	不够生动
计算效率高	不符合现实物理规律
可创建预期形状	缺少动态响应性

3. 使用建议

• 优先选择：建议优先采用物理曲线

四、传统曲线类型

6种传统曲线类型：

1. Curve.Linear - 线性曲线

特征	说明
运动方式	匀速运动
速度	恒定不变
斜率	恒定值
视觉感受	机械、呆板
应用场景	需要匀速变化的场景

2. Curve.Ease - 缓动曲线

特征	说明
运动方式	先加速后减速
速度变化	慢 → 快 → 慢
视觉感受	自然平滑
应用场景	通用动画效果

3. Curve.EaseIn - 缓入曲线

特征	说明
运动方式	开始慢，逐渐加速
速度变化	慢 → 快
视觉感受	从静止开始加速
应用场景	物体进入视线、逐渐显现

4. Curve.EaseOut - 缓出曲线

特征	说明
运动方式	开始快，逐渐减速
速度变化	快 → 慢
视觉感受	减速停止
应用场景	物体离开视线、逐渐消失

5. Curve.EaseInOut - 缓入缓出曲线

特征	说明
运动方式	先加速后减速
速度变化	慢 → 快 → 慢
视觉感受	平滑过渡
应用场景	完整的运动过程

6. Curve.FastOutSlowIn - 快速出慢速入

特征	说明
运动方式	快速开始，缓慢结束
速度变化	快 → 慢
视觉感受	强调结束时的精致感
应用场景	需要强调结束状态的动画

五、传统曲线示例

1. 代码

// 1. 定义曲线数据类
class TraditionalCurve {
    public title: string;      // 曲线名称
    public curve: Curve;       // 曲线类型
    public color: Color | string; // 显示颜色
}

// 2. 创建曲线数组
const traditionalCurves: TraditionalCurve[] = [
    new TraditionalCurve(' Linear', Curve.Linear, '#317AF7'),
    new TraditionalCurve(' Ease', Curve.Ease, '#D94838'),
    // ... 其他曲线
]

// 3. 在组件中使用
@Entry
@Component
struct CurveDemo {
    @State dRotate: number = 0; // 旋转角度状态
    
    build() {
        Column() {
            // 3.1 显示曲线图例
            Grid() {
                ForEach(traditionalCurves, (item: TraditionalCurve) => {
                    // 显示每个曲线的颜色标记和名称
                })
            }
            
            // 3.2 动画演示区域
            Stack() {
                // 摆动管道背景
                Row()
                    .width(290)
                    .height(290)
                    .border({
                        width: 15,
                        color: 0xE6E8EB,
                        radius: 145
                    })
                
                // 多个小球按不同曲线运动
                ForEach(traditionalCurves, (item: TraditionalCurve) => {
                    Column() {
                        Row()
                            .width(30)
                            .height(30)
                            .borderRadius(15)
                            .backgroundColor(item.color)
                    }
                    .width(20)
                    .height(300)
                    .rotate({ angle: this.dRotate })
                    .animation({
                        duration: 2000,       // 动画时长2秒
                        iterations: -1,       // 无限循环
                        curve: item.curve,    // 使用当前曲线
                        delay: 100           // 延迟100ms开始
                    })
                })
            }
            .onClick(() => {
                // 点击触发旋转动画
                this.dRotate ? null : this.dRotate = 360;
            })
        }
    }
}

2. 动画配置参数

参数	值	说明
duration	2000	动画持续时间2000ms（2秒）
iterations	-1	循环次数：-1表示无限循环
curve	item.curve	使用对应的传统曲线
delay	100	延迟100ms开始
angle	360	旋转360度（完整一圈）

3. 视觉效果

• 颜色区分：每种曲线使用不同颜色标记

• 同步对比：所有小球同时开始运动，便于对比不同曲线的运动特性

六、物理曲线与传统曲线的对比

方面	物理曲线	传统曲线
自然感	符合物理规律	缺乏物理含义
生动性	更加生动	相对呆板
响应性	可响应用户行为	静态不变
认知一致性	符合用户认知	需要学习理解