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

鸿蒙动画系统解密：实现一个“果冻回弹”效果，彻底搞懂属性动画与转场动画

news 2026/8/16 15:51:11

🎢 前言：为什么你的动画看起来很“假”？

很多开发者写动画喜欢用默认的EaseInOut。
但在真实物理世界中，物体运动是有惯性的。

假的动画：A 点匀速移动到 B 点，像个机器人。
真的动画：启动有加速，停止有减速，撞击有回弹（Overshoot）。

鸿蒙的 ArkUI 提供了curves.interpolatingSpring(插值弹簧)，它模拟了真实的物理弹簧系统。我们不需要算复杂的微积分，只需要调节“硬度”和“阻尼”。

🏗️ 一、核心概念：属性动画 vs 转场动画

在写代码前，必须分清这两个概念，否则你的动画要么不跑，要么乱跑。

动画原理对比 (Mermaid):

🍮 二、实战 1：制作“果冻”按钮 (属性动画)

我们要实现的效果：

按压时：按钮缩小到 90%，有点“紧绷”的感觉。
松开时：按钮恢复到 100%，并带有“Duang Duang”的回弹。

1. 核心代码

ArkUI 的核心是“状态驱动 UI”。我们只需要改变scaleOptions的数值，配合.animation()属性，剩下的交给系统。

import{curves}from'@kit.ArkUI';@Entry@Componentstruct JellyButton{// 1. 定义状态：缩放比例@StatescaleValue:number=1;build(){Column(){// 一个看起来很好吃的按钮Button("按我体验果冻效果").width(200).height(60).backgroundColor('#FF6B6B').fontSize(20).borderRadius(30)// 2. 绑定状态：UI 随状态变化.scale({x:this.scaleValue,y:this.scaleValue})// 3. 【关键】添加属性动画// 只要上面的 scale 发生变化，这个动画就会触发.animation({// 使用插值弹簧曲线// velocity: 初始速度// mass: 质量 (越重回弹越慢)// stiffness: 刚度 (越硬回弹越快，像强力弹簧)// damping: 阻尼 (越小回弹次数越多，像果冻；越大越不弹)curve:curves.interpolatingSpring(10,1,228,15)})// 4. 交互逻辑.onTouch((event:TouchEvent)=>{if(event.type===TouchType.Down){// 按下：缩小，模拟受力this.scaleValue=0.9;}elseif(event.type===TouchType.Up){// 松开：恢复，触发弹簧回弹this.scaleValue=1;}})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}}

💡 调参秘籍

想让果冻更软、晃动更久？减小damping(阻尼)，比如设为 8。
想让按键反应更灵敏？增加stiffness(刚度)，比如设为 300。

🚪 三、实战 2：丝滑的入场 (转场动画)

当你点击果冻按钮后，弹出一张卡片。这时候就要用转场动画 (transition)。
在鸿蒙 Next 中，推荐使用TransitionEffect组合链式语法。

@StateshowCard:boolean=false;// ... 在 build 中if(this.showCard){Text("我是弹出的卡片").width(300).height(200).backgroundColor('#4ECDC4').borderRadius(20).textAlign(TextAlign.Center).fontSize(24).fontColor(Color.White)// 【关键】定义入场和出场效果// 1. 初始状态：透明度为0，缩放为0.5，且向下偏移 50vp.transition(TransitionEffect.OPACITY.combine(TransitionEffect.scale({x:0.5,y:0.5})).combine(TransitionEffect.translate({y:50}))// 2. 动画参数：同样可以使用弹簧曲线！.animation({curve:curves.springMotion(0.6,0.8)}))}Button("切换显示").onClick(()=>{// animateTo 是为了让 if/else 的渲染过程也有动画animateTo({curve:curves.springMotion()},()=>{this.showCard=!this.showCard;})})

🎨 四、显式动画 (`animateTo`) vs 属性动画 (`.animation`)

很多新手会晕：到底该用哪个？

场景	推荐方式	代码特征
单个组件的简单交互	属性动画 (.animation)	写在组件链式调用的末尾，随 State 变化自动触发。
多个组件联动 / 复杂逻辑	显式动画 (animateTo)	`animateTo({ duration: 1000 }, () => { this.w = 200 })`
组件的出现/消失	转场动画 (.transition)	必须配合`if/else`或`Visibility`控制。