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

HarmonyOS从入门到精通：动画设计与实现之八 - 高级动画技巧（二）

news 2025/7/15 11:03:57

组合动画与状态机是构建复杂交互体验的终极利器。通过将动画逻辑抽象为状态转换规则，可以实现高度可控、可扩展的动画系统。本文将深入解析状态机设计模式、组合动画的实现策略及实战技巧，帮助开发者构建具有工业级复杂度的动画交互系统。

一、状态机基础：从有限状态自动机到UI动画

1. 状态机的核心概念

状态机（Finite State Machine, FSM）由四个要素组成：

状态（States）：系统可能处于的不同条件或模式（如"加载中"、“成功”、“错误”）；
事件（Events）：触发状态转换的外部动作（如"点击"、“超时”、“数据加载完成”）；
转换（Transitions）：状态之间的变化规则（如"加载中→成功"、“成功→错误”）；
动作（Actions）：状态转换时执行的操作（如播放动画、更新数据）。

2. UI动画中的状态机模型

在UI动画中，状态机可用于：

管理复杂动画流程（如多步骤引导）；
控制组件在不同交互状态下的表现（如按钮的"正常→悬停→点击→禁用"）；
实现动画序列的条件执行（如根据网络状态决定加载动画的显示方式）。

3. 简单状态机实现

以下是一个基于TypeScript的基础状态机实现：

type State = string;
type Event = string;
type TransitionHandler = (from: State, to: State, event: Event) => void;class StateMachine {private currentState: State;private transitions: Map<State, Map<Event, State>> = new Map();private onTransition: TransitionHandler | null = null;constructor(initialState: State) {this.currentState = initialState;}// 定义状态转换规则addTransition(from: State, event: Event, to: State) {if (!this.transitions.has(from)) {this.transitions.set(from, new Map());}this.transitions.get(from)!.set(event, to);return this;}// 设置状态转换回调setTransitionHandler(handler: TransitionHandler) {this.onTransition = handler;return this;}// 触发事件，执行状态转换trigger(event: Event) {const currentTransitions = this.transitions.get(this.currentState);if (!currentTransitions || !currentTransitions.has(event)) {console.warn(`Invalid event ${event} for state ${this.currentState}`);return;}const nextState = currentTransitions.get(event)!;const previousState = this.currentState;this.currentState = nextState;this.onTransition?.(previousState, nextState, event);return this;}// 获取当前状态getState() {return this.currentState;}
}

二、组合动画的实现策略

组合动画是多个动画按特定时序组合的复合动画，实现策略包括：

1. 时序控制策略

序列执行：前一个动画完成后开始下一个（如引导流程的步骤动画）；
并行执行：多个动画同时进行（如缩放与旋转同时发生）；
交错执行：部分并行、部分序列（如先淡入，同时开始缩放和旋转）。

2. 基于Promise的组合动画

使用Promise封装动画，通过Promise.all和then实现复杂时序控制：

// 封装动画为Promise
function animateToPromise(duration: number, action: () => void): Promise<void> {return new Promise(resolve => {animateTo({ duration, onFinish: resolve }, action);});
}// 组合动画示例：先淡入，同时执行缩放和旋转，最后平移
async function complexAnimation() {// 序列步骤1：淡入await animateToPromise(500, () => {this.opacity = 1;});// 并行步骤：同时缩放和旋转await Promise.all([animateToPromise(800, () => {this.scale = 1.5;}),animateToPromise(800, () => {this.rotation = 180;})]);// 序列步骤2：平移await animateToPromise(600, () => {this.translateX = 200;});
}

3. 组合动画的性能优化

批处理更新：将多个属性更新合并到一个animateTo中，减少重绘次数：

// 优化前：多次触发重绘
animateTo({ duration: 500 }, () => { this.opacity = 1; });
animateTo({ duration: 500 }, () => { this.scale = 1.2; });// 优化后：一次触发重绘
animateTo({ duration: 500 }, () => {this.opacity = 1;this.scale = 1.2;
});

使用Canvas渲染复杂动画：对于大量元素的组合动画，使用Canvas替代组件树，提升性能：
```
Canvas(this.context).width('100%').height('100%').onReady(() => {// 在Canvas上绘制并动画大量元素})
```

三、状态机驱动的动画系统

1. 状态机与动画的集成模式

将状态机与动画结合，可实现高度可控的动画系统：

@Entry
@Component
struct StateMachineAnimation {private stateMachine: StateMachine;@State opacity: number = 0;@State scale: number = 0.8;@State rotation: number = 0;@State positionX: number = 0;constructor() {// 初始化状态机this.stateMachine = new StateMachine('idle').addTransition('idle', 'activate', 'active').addTransition('active', 'deactivate', 'idle').addTransition('active', 'error', 'error').addTransition('error', 'reset', 'idle').setTransitionHandler(this.handleTransition.bind(this));}// 处理状态转换private handleTransition(from: string, to: string, event: string) {console.log(`状态变更: ${from} → ${to} (事件: ${event})`);// 根据不同的状态转换执行不同的动画switch (to) {case 'active':animateTo({ duration: 600, curve: Curve.EaseOut }, () => {this.opacity = 1;this.scale = 1.2;this.rotation = 45;});break;case 'idle':animateTo({ duration: 500, curve: Curve.EaseIn }, () => {this.opacity = 0.5;this.scale = 0.8;this.rotation = 0;this.positionX = 0;});break;case 'error':animateTo({ duration: 300, curve: Curve.Spring(60, 30) }, () => {this.opacity = 0.7;this.scale = 0.9;this.positionX = 200;});break;}}build() {Column() {// 状态显示Text(`当前状态: ${this.stateMachine.getState()}`).fontSize(16).fontWeight(FontWeight.Bold)// 状态控制按钮Row({ space: 10 }) {Button('激活').onClick(() => this.stateMachine.trigger('activate'))Button('停用').onClick(() => this.stateMachine.trigger('deactivate'))Button('错误').onClick(() => this.stateMachine.trigger('error'))Button('重置').onClick(() => this.stateMachine.trigger('reset'))}// 动画元素Circle().width(80).height(80).fill(this.stateMachine.getState() === 'error' ? Color.Red : Color.Blue).opacity(this.opacity).scale({ x: this.scale, y: this.scale }).rotate({ angle: this.rotation }).translate({ x: this.positionX })}.width('100%').padding(20)}
}

2. 分层状态机：处理复杂场景

对于具有嵌套结构的复杂状态，可以使用分层状态机：

class HierarchicalStateMachine {private currentState: State;private substates: Map<State, StateMachine> = new Map();// 添加子状态机addSubstateMachine(parentState: State, subMachine: StateMachine) {this.substates.set(parentState, subMachine);return this;}// 触发事件，考虑子状态机trigger(event: Event) {// 优先尝试在当前状态的子状态机中处理事件const subMachine = this.substates.get(this.currentState);if (subMachine) {subMachine.trigger(event);return this;}// 否则在主状态机中处理// ...}
}

3. 状态机可视化工具

使用状态图可视化工具（如PlantUML、Mermaid）设计状态机：

四、实战案例：复杂表单交互的状态机实现

1. 表单状态设计

一个复杂表单可能包含以下状态：

初始状态（idle）
填写中（filling）
验证中（validating）
提交中（submitting）
成功（success）
失败（error）

2. 状态机实现

@Entry
@Component
struct FormAnimation {private formStateMachine: StateMachine;@State formOpacity: number = 0;@State formScale: number = 0.9;@State progress: number = 0;@State successMessage: string = '';@State errorMessage: string = '';constructor() {this.formStateMachine = new StateMachine('idle').addTransition('idle', 'start', 'filling').addTransition('filling', 'validate', 'validating').addTransition('validating', 'success', 'success').addTransition('validating', 'error', 'error').addTransition('success', 'reset', 'idle').addTransition('error', 'reset', 'idle').setTransitionHandler(this.handleFormTransition.bind(this));}private handleFormTransition(from: string, to: string, event: string) {console.log(`表单状态变更: ${from} → ${to}`);switch (to) {case 'filling':animateTo({ duration: 500, curve: Curve.EaseOut }, () => {this.formOpacity = 1;this.formScale = 1;});break;case 'validating':animateTo({ duration: 300, curve: Curve.EaseIn }, () => {this.formOpacity = 0.8;});// 启动进度条动画this.startProgressAnimation();break;case 'success':// 停止进度条this.progress = 100;animateTo({ duration: 500, curve: Curve.EaseOut }, () => {this.formOpacity = 0.5;this.formScale = 0.95;});break;case 'error':// 错误抖动动画animateTo({ duration: 150, curve: Curve.Spring(100, 20) }, () => {this.formScale = 1.05;});animateTo({ duration: 300, curve: Curve.EaseOut }, () => {this.formScale = 1;});break;case 'idle':animateTo({ duration: 400, curve: Curve.EaseIn }, () => {this.formOpacity = 0;this.formScale = 0.9;this.progress = 0;});break;}}private startProgressAnimation() {// 模拟进度条动画let current = 0;const interval = setInterval(() => {if (this.formStateMachine.getState() !== 'validating') {clearInterval(interval);return;}current += Math.random() * 15;if (current >= 95) {current = 95;clearInterval(interval);}this.progress = current;}, 200);}build() {Column() {// 表单状态显示Text(`表单状态: ${this.formStateMachine.getState()}`).fontSize(16).fontWeight(FontWeight.Bold)// 表单容器Column() {// 表单内容...// 进度条（验证中显示）if (this.formStateMachine.getState() === 'validating') {ProgressBar({value: this.progress,max: 100}).width('100%').height(10).backgroundColor('#E0E0E0').color('#007DFF')}// 成功消息if (this.formStateMachine.getState() === 'success') {Text('提交成功！').fontSize(18).fontColor(Color.Green)}// 错误消息if (this.formStateMachine.getState() === 'error') {Text('提交失败，请检查表单').fontSize(18).fontColor(Color.Red)}// 操作按钮Row({ space: 10 }) {if (this.formStateMachine.getState() === 'idle') {Button('开始填写').onClick(() => this.formStateMachine.trigger('start'))}if (this.formStateMachine.getState() === 'filling') {Button('提交').onClick(() => {this.formStateMachine.trigger('validate');// 模拟提交，2秒后返回结果setTimeout(() => {if (Math.random() > 0.5) {this.formStateMachine.trigger('success');this.successMessage = '表单提交成功！';} else {this.formStateMachine.trigger('error');this.errorMessage = '表单验证失败！';}}, 2000);})}if (['success', 'error'].includes(this.formStateMachine.getState())) {Button('返回').onClick(() => this.formStateMachine.trigger('reset'))}}}.width('90%').padding(20).backgroundColor('#F5F5F5').borderRadius(10).opacity(this.formOpacity).scale({ x: this.formScale, y: this.formScale }).animation({ duration: 300 })}.width('100%').height('100%').padding(20)}
}