鸿蒙技术干货11：属性动画与转场效果实战-洪萨配资

本文聚焦基础属性动画（animateTo）和页面转场动画（transition），通过「列表项滑动删除 + 页面切换渐变」的实战案例，带大家掌握动画开发核心逻辑～

一、核心认知：动画的应用场景与核心 API

1. 应用场景

组件交互反馈（如按钮点击缩放、列表项操作动画）
页面切换过渡（如渐变、滑动进入）
数据变化可视化（如进度条加载、数字滚动）
引导用户注意力（如弹窗弹出、通知提示）

2. 核心 API

属性动画：animateTo（声明式动画，无需手动控制动画帧）
转场动画：transition（组件转场配置）、pageTransition（页面转场配置）
关键参数：duration（时长）、curve（动画曲线）、delay（延迟执行）

二、属性动画：animateTo 基础用法

属性动画通过animateTo函数包裹组件属性修改逻辑，自动实现动画过渡，支持位置、透明度、尺寸等常见属性：

1. 基础效果示例（控制透明度、尺寸、位置）

import { animateTo, Curve } from '@ohos.ui.animation'; @Component struct AnimateToBasicDemo { @State opacity: number = 1; @State scale: number = 1; @State offsetX: number = 0; build() { Column({ space: 30 }) .width('100%') .height('100%') .padding(30) .backgroundColor('#f5f5f5') { // 动画目标组件 Text('属性动画演示') .fontSize(24) .fontWeight(FontWeight.Bold) .opacity(this.opacity) .scale({ x: this.scale, y: this.scale }) .translate({ x: this.offsetX }) .backgroundColor('#2f54eb') .color('#ffffff') .padding(20) .borderRadius(12) // 控制按钮组 Row({ space: 20 }) { Button('透明度变化') .type(ButtonType.Capsule) .onClick(() => { animateTo({ duration: 800, // 动画时长（毫秒） curve: Curve.EaseInOut // 动画曲线（缓进缓出） }, () => { this.opacity = this.opacity === 1 ? 0.3 : 1; }); }) Button('缩放效果') .type(ButtonType.Capsule) .onClick(() => { animateTo({ duration: 500 }, () => { this.scale = this.scale === 1 ? 1.2 : 1; }); }) Button('水平位移') .type(ButtonType.Capsule) .onClick(() => { animateTo({ duration: 1000 }, () => { this.offsetX = this.offsetX === 0 ? 100 : 0; }); }) } } } }

2. 核心参数说明

duration：动画时长（默认 300 毫秒），数值越大动画越慢；
curve：动画曲线（Curve.Linear匀速、Curve.EaseIn缓入、Curve.EaseOut缓出、Curve.EaseInOut缓进缓出）；
delay：延迟执行时间（默认 0 毫秒），可实现动画排队效果；
回调函数：包裹需要动画的属性修改逻辑，属性变化会自动生成过渡动画。

三、转场动画：transition 组件用法

转场动画用于组件显示 / 隐藏、页面切换时的过渡效果，鸿蒙 5.0 + 支持通过transition直接配置，无需复杂逻辑：

1. 页面切换渐变效果

在main_pages.json注册的页面中，通过pageTransition配置全局页面转场：

// pages/FirstPage.ets（首页） @Entry @Component struct FirstPage { build() { Column({ space: 30 }) .width('100%') .height('100%') .padding(30) .backgroundColor('#f5f5f5') { Text('首页') .fontSize(32) .fontWeight(FontWeight.Bold) Button('跳转到第二页') .type(ButtonType.Capsule) .width(200) .height(50) .backgroundColor('#2f54eb') .onClick(() => { router.pushUrl({ url: 'pages/SecondPage' }); }) } } // 页面转场配置（渐变效果） pageTransition() { PageTransition() .enter('fade', { duration: 800, curve: Curve.EaseInOut }) // 进入渐变 .exit('fade', { duration: 800, curve: Curve.EaseInOut }) // 退出渐变 } } // pages/SecondPage.ets（第二页） @Entry @Component struct SecondPage { build() { Column({ space: 30 }) .width('100%') .height('100%') .padding(30) .backgroundColor('#f5f5f5') { Text('第二页') .fontSize(32) .fontWeight(FontWeight.Bold) Button('返回首页') .type(ButtonType.Capsule) .width(200) .height(50) .backgroundColor('#ff4d4f') .onClick(() => { router.backUrl(); }) } } // 复用渐变转场配置 pageTransition() { PageTransition() .enter('fade', { duration: 800, curve: Curve.EaseInOut }) .exit('fade', { duration: 800, curve: Curve.EaseInOut }) } }

2. 组件转场（列表项滑动删除前置）

组件显示 / 隐藏时的转场效果，可结合if或visibility控制：

// 组件转场示例（渐变+位移） Text('可隐藏组件') .transition([ TransitionEffect.fade({ duration: 500 }), // 渐变 TransitionEffect.slide({ direction: SlideDirection.Bottom, duration: 500 }) // 底部滑入滑出 ]) .visibility(this.isShow ? Visibility.Visible : Visibility.Hidden)

四、实战整合：列表项滑动删除 + 页面渐变

1. 列表项滑动删除（属性动画核心应用）

import { animateTo, Curve } from '@ohos.ui.animation'; import router from '@ohos.router'; @Component struct SlideDeleteList { @State taskList: string[] = ['学习属性动画', '实现转场效果', '开发滑动删除', '整合页面渐变']; @State deleteOffsetX: number[] = this.taskList.map(() => 0); // 每个列表项的位移 // 滑动删除动画 handleSwipe(index: number, offsetX: number) { // 限制滑动范围（-200到0，200为删除按钮宽度） if (offsetX < -200) offsetX = -200; if (offsetX > 0) offsetX = 0; this.deleteOffsetX[index] = offsetX; } // 删除列表项（带动画） deleteItem(index: number) { animateTo({ duration: 500, curve: Curve.EaseOut }, () => { this.deleteOffsetX[index] = -this.taskList.length * 200; // 快速滑出屏幕 }, () => { this.taskList.splice(index, 1); this.deleteOffsetX.splice(index, 1); // 移除对应位移状态 }); } build() { Column({ space: 15 }) .width('100%') .padding(30) .backgroundColor('#f5f5f5') { Text('滑动删除列表') .fontSize(28) .fontWeight(FontWeight.Bold) .marginBottom(20) List({ space: 10 }) { ForEach(this.taskList, (task, index) => { ListItem() { Stack() { // 删除按钮（默认隐藏在右侧） Button('删除') .width(200) .height('100%') .backgroundColor('#ff4d4f') .alignContent(FlexAlign.Center) .position({ x: '100%', left: -200 }) // 列表项内容（可滑动） Text(task) .width('100%') .height(80) .lineHeight(80) .padding(20) .backgroundColor('#ffffff') .borderRadius(12) .translate({ x: this.deleteOffsetX[index] }) .onTouch((e) => { if (e.type === TouchType.MOVE) { // 监听滑动事件，更新位移 this.handleSwipe(index, e.touches[0].x - e.touches[0].startX); } else if (e.type === TouchType.END) { // 滑动距离不足100，回弹 if (this.deleteOffsetX[index] > -100) { animateTo({ duration: 300 }, () => { this.deleteOffsetX[index] = 0; }); } } }) } } }) } Button('跳转到详情页（渐变效果）') .type(ButtonType.Capsule) .width(250) .height(50) .backgroundColor('#2f54eb') .marginTop(30) .onClick(() => { router.pushUrl({ url: 'pages/DetailPage' }); }) } } } // 详情页（复用页面渐变转场） @Entry @Component struct DetailPage { build() { Column() .width('100%') .height('100%') .backgroundColor('#f5f5f5') .justifyContent(FlexAlign.Center) { Text('详情页') .fontSize(32) .fontWeight(FontWeight.Bold) Button('返回列表页') .type(ButtonType.Capsule) .width(200) .height(50) .backgroundColor('#ff4d4f') .marginTop(30) .onClick(() => { router.backUrl(); }) } } pageTransition() { PageTransition() .enter('fade', { duration: 800, curve: Curve.EaseInOut }) .exit('fade', { duration: 800, curve: Curve.EaseInOut }) } }

2. 核心效果说明

列表项滑动：通过onTouch监听滑动事件，animateTo控制translate位移，实现滑动露出删除按钮；
删除动画：点击删除后，列表项快速滑出屏幕，动画结束后移除数据；
页面渐变：通过pageTransition配置fade效果，跳转和返回时均有平滑渐变过渡。

五、实战踩坑指南

1. 动画不生效

确保属性是「响应式状态」：必须用@State/@Link等装饰器，普通变量修改无法触发动画；
动画函数包裹正确：animateTo的回调函数内必须直接修改属性，不可嵌套异步操作；
版本适配：HarmonyOS 5.0 + 支持PageTransition的fade/slide简化配置，低版本需手动配置TransitionEffect。