当前位置：首页 > news >正文

HarmonyOS从入门到精通：动画设计与实现之六 - 动画曲线与运动节奏控制

news 2025/7/13 21:10:01

动画的灵魂不仅在于"动"，更在于"如何动"。相同的位移距离，使用不同的动画曲线（速度变化规律）会产生截然不同的视觉感受：有的生硬机械，有的流畅自然，有的富有弹性。鸿蒙系统提供了丰富的动画曲线工具，从基础的缓动曲线到物理模拟的弹簧曲线，再到完全自定义的贝塞尔曲线，全方位满足开发者对动画节奏的精确控制。本文将深入解析动画曲线的数学原理、内置曲线的应用场景及自定义曲线的实战技巧，帮助开发者打造符合自然规律的动画体验。

一、动画曲线的核心原理：时间与进度的映射关系

动画曲线本质上是时间（0→1）与进度（0→1）的映射函数。在动画开始（时间=0）时，进度为0；动画结束（时间=1）时，进度为1。曲线的形状决定了进度随时间变化的速率，进而影响动画的"节奏感"。

1. 曲线的数学表达

鸿蒙中的动画曲线可分为两类：

参数曲线：通过预设参数定义（如弹簧曲线的刚度、阻尼）；
贝塞尔曲线：通过控制点定义的三次贝塞尔曲线（Cubic Bézier），是应用最广泛的曲线类型。

三次贝塞尔曲线的数学公式为：

P(t) = (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃,  t∈[0,1]

其中：

P₀固定为(0,0)（曲线起点）；
P₃固定为(1,1)（曲线终点）；
P₁(x₁,y₁)和P₂(x₂,y₂)为控制点，决定曲线形状。

2. 曲线形状与视觉感受的关系

曲线的斜率代表动画的"速度"（进度变化率），不同斜率变化会产生不同的视觉效果：

斜率为正且增大：加速运动（如物体下落）；
斜率为正且减小：减速运动（如物体滑行停止）；
斜率先增后减：先加速后减速（最自然的运动状态）；
斜率>1：进度超过时间（如弹簧动画的过冲）；
斜率<0：进度回退（如弹性碰撞的反弹）。

二、鸿蒙内置动画曲线：场景化选择指南

鸿蒙提供了8种常用内置曲线，覆盖大多数基础场景。掌握每种曲线的特性，是选择合适曲线的前提。

1. 基础线性与缓动曲线

曲线类型	控制点	特性描述	适用场景
`Curve.Linear`	(0,0)→(1,1)	匀速运动，斜率始终为1	进度条、加载动画等需要均匀变化的场景
`Curve.Ease`	(0.25,0.1)→(0.25,1)	轻微加速后保持匀速	一般交互反馈（如简单的显隐动画）
`Curve.EaseIn`	(0.42,0)→(1,1)	开始慢，逐渐加速（斜率从0增至1）	退出屏幕的动画（如页面向右滑出）
`Curve.EaseOut`	(0,0)→(0.58,1)	开始快，逐渐减速（斜率从1减至0）	进入屏幕的动画（如页面从左滑入）
`Curve.EaseInOut`	(0.42,0)→(0.58,1)	先加速后减速，中间段接近匀速	大多数交互场景（按钮点击、组件切换）

实战对比示例：

@Entry
@Component
struct BasicCurvesDemo {@State activeCurve: Curve = Curve.Linear;@State translateX: number = 0;// 曲线列表及说明private curves = [{ name: 'Linear（匀速）', curve: Curve.Linear },{ name: 'Ease（轻微加速）', curve: Curve.Ease },{ name: 'EaseIn（加速）', curve: Curve.EaseIn },{ name: 'EaseOut（减速）', curve: Curve.EaseOut },{ name: 'EaseInOut（先加后减）', curve: Curve.EaseInOut }];build() {Column({ space: 20 }) {Text('基础动画曲线对比').fontSize(20).fontWeight(FontWeight.Bold)// 曲线选择按钮Row({ space: 10 }) {ForEach(this.curves, (item) => {Button(item.name).fontSize(12).padding({ left: 8, right: 8 }).onClick(() => {this.translateX = 0; // 重置位置// 延迟100ms启动，确保重置生效setTimeout(() => {this.activeCurve = item.curve;this.translateX = 300; // 触发动画}, 100);})})}.flexWrap(FlexWrap.Wrap).justifyContent(FlexAlign.Center)// 动画演示区域Row() {Circle().width(40).height(40).fill(Color.Blue).translate({ x: this.translateX }).animation({duration: 1000,curve: this.activeCurve,iterations: 1})}.width('100%').height(100).backgroundColor('#F5F5F5').padding({ left: 20 })}.width('100%').padding(20)}
}

2. 速度增强曲线

曲线类型	特性描述	适用场景
`Curve.Fast`	快速完成动画（前半段进度超过50%）	强调效率的交互（如弹窗快速显示）
`Curve.Slow`	缓慢完成动画（前半段进度低于50%）	强调优雅的装饰性动画（如背景渐变）
`Curve.Smooth`	更柔和的加速减速，斜率变化更平缓	细腻的交互反馈（如卡片轻微缩放）

实战示例：快速与缓慢曲线对比

@Component
struct FastSlowCurveDemo {@State useFast: boolean = true;@State scale: number = 1;build() {Column({ space: 20 }) {Button(`切换至${this.useFast ? 'Slow' : 'Fast'}`).onClick(() => {this.useFast = !this.useFast;this.scale = this.scale === 1 ? 1.2 : 1;})Text('Fast/Slow曲线对比').scale({ x: this.scale, y: this.scale }).animation({duration: 500,curve: this.useFast ? Curve.Fast : Curve.Slow})}.padding(20)}
}

三、自定义贝塞尔曲线：精确控制动画节奏

当内置曲线无法满足需求时，可通过Curve.Cubic(x1, y1, x2, y2)创建自定义贝塞尔曲线，实现独特的动画节奏。

1. 自定义曲线的参数设计

自定义曲线的核心是控制点的选择，以下是几种典型效果的参数设计：

（1）轻微过冲曲线（增强交互反馈）

// 控制点：(0.17, 0.67)→(0.83, 1.33)
const OverShootCurve = Curve.Cubic(0.17, 0.67, 0.83, 1.33);

效果：动画结束前进度超过100%（轻微过冲），然后回弹至目标值，增强交互的"弹性感"，适合按钮点击、卡片选中反馈。

（2）强弹性曲线（模拟物理碰撞）

// 控制点：(0.34, 1.56)→(0.64, 1)
const BounceCurve = Curve.Cubic(0.34, 1.56, 0.64, 1);

效果：开始时进度快速超过目标（斜率>1），然后缓慢回落，适合模拟小球落地、弹性碰撞等效果。

（3）延迟加速曲线（强调蓄力感）

// 控制点：(0.7, 0)→(0.9, 0.1)
const DelayCurve = Curve.Cubic(0.7, 0, 0.9, 0.1);

效果：前70%时间进度变化缓慢（蓄力），最后30%快速完成，适合模拟"拉弓射箭"等需要蓄力的动画。

2. 自定义曲线实战：按钮点击的弹性反馈

@Entry
@Component
struct CustomCurveDemo {@State isPressed: boolean = false;// 自定义弹性曲线：轻微过冲后回弹private pressCurve = Curve.Cubic(0.17, 0.67, 0.83, 1.33);build() {Column({ space: 30 }) {Text('自定义弹性曲线示例').fontSize(20).fontWeight(FontWeight.Bold)Button('点击体验弹性反馈').width(200).height(80).fontSize(16).backgroundColor('#007DFF').scale({ x: this.isPressed ? 0.95 : 1, y: this.isPressed ? 0.95 : 1 }).onTouch((event) => {if (event.type === TouchType.Down) {this.isPressed = true;} else if (event.type === TouchType.Up || event.type === TouchType.Cancel) {this.isPressed = false;}}).animation({duration: 200,curve: this.pressCurve // 应用自定义曲线})}.width('100%').height('100%').justifyContent(FlexAlign.Center).backgroundColor('#F5F5F5')}
}

效果解析：按钮按下时缩小至0.95倍，释放后通过自定义曲线恢复至1倍——恢复过程中会轻微超过1倍（过冲）再回弹，模拟真实按钮的弹性形变，反馈更生动。

四、弹簧曲线：物理模拟的自然运动

弹簧曲线（Curve.Spring）通过模拟弹簧的物理特性（刚度、阻尼），实现富有弹性的自然运动，是模拟物理世界运动的最佳选择。

1. 弹簧曲线的核心参数

鸿蒙的弹簧曲线通过Curve.Spring(stiffness, damping, mass, velocity)定义，参数含义：

stiffness（刚度）：弹簧的硬度（0-100），值越大弹簧越硬（恢复越快）；
damping（阻尼）：弹簧的阻力（0-100），值越小弹簧振动越久；
mass（质量）：被弹簧拉动的物体质量（默认1），质量越大运动越慢；
velocity（初速度）：物体初始速度（默认0）。

参数组合效果：

高刚度+高阻尼（如Spring(80, 80)）：硬弹簧，轻微振动后停止；
低刚度+低阻尼（如Spring(20, 20)）：软弹簧，多次振动后停止；
高刚度+低阻尼（如Spring(90, 30)）：硬弹簧，明显振动后停止。

2. 弹簧曲线实战：拖拽回弹效果

@Entry
@Component
struct SpringCurveDemo {@State offsetX: number = 0;private isDragging: boolean = false;// 定义软弹簧曲线（低刚度+低阻尼）private springCurve = Curve.Spring(30, 20);build() {Column() {Text('拖拽体验弹簧效果').fontSize(18).margin({ bottom: 50 })// 可拖拽的小球Circle().width(60).height(60).fill(Color.Orange).translate({ x: this.offsetX }).onTouch((event) => {if (event.type === TouchType.Down) {this.isDragging = true;} else if (event.type === TouchType.Move && this.isDragging) {// 拖拽时实时跟随，无动画（即时响应）this.offsetX = event.touches[0].x - 30; // 30是小球半径} else if (event.type === TouchType.Up && this.isDragging) {this.isDragging = false;// 释放后应用弹簧曲线回弹至原点animateTo({ curve: this.springCurve }, () => {this.offsetX = 0;});}})}.width('100%').height('100%').padding(20).backgroundColor('#F5F5F5')}
}