前言

界面"动起来"才有灵气。HarmonyOS 里最常用的是属性动画：让某个属性（位置、大小、颜色）在一段时间内平滑变化。

animateTo是属性动画的核心 API。这篇文章我带你从"会动"到"动得好看"，重点讲讲很多人不知道的弹簧曲线——它能让你的动画有"果冻"一样的弹性，体验直接上一个档次。

最基础的 animateTo

核心思路：先把目标状态改了，再用animateTo把"从旧到新"的过程包起来，框架就会自动补间。

代码实现

@LocalwidthSize:number=100Button('放大').width(this.widthSize).onClick(()=>{animateTo({duration:300},()=>{this.widthSize=200// 在动画闭包里改状态})})

逐行讲：

• animateTo({ duration: 300 }, () => { ... })：第一个参数是动画配置，第二个是"要动画化的状态变更闭包"。
• 在闭包里把widthSize从 100 改成 200，框架检测到变化，自动从 100 平滑过渡到 200，而不是瞬间跳变。

关键陷阱：状态修改必须写在animateTo的第二个闭包里，写在外面就不会有动画，会瞬间变。

弹簧曲线：让动画有"弹性"

普通的Curve.Linear是匀速，显得死板。想要"弹一下"的手感，用Curve.Spring或物理弹簧SpringCurve。

核心代码

animateTo({duration:500,curve:Curve.Spring,// 弹簧曲线，自带回弹// 也可以用物理参数：curve: curves.springMotion(0.6, 1.0)},()=>{this.widthSize=200})

• Curve.Spring：系统预置的弹簧效果，落点附近会轻微回弹，像按下去又弹起来的按钮。
• curves.springMotion(stiffness, damping)：更精细。第一个是刚度（越大越快），第二个是阻尼（越小越弹）。阻尼 < 1 就会明显回弹。

同时动画多个属性

animateTo闭包里改几个属性，就同时动画几个，不用分开写。

完整示例

animateTo({duration:400,curve:Curve.EaseOut},()=>{this.size=120this.opacity=1this.rotateAngle=360})

这一段会让元素边放大、边变不透明、边转一圈，三个属性并行过渡，很有质感。

一个完整的"点赞冒泡"效果

@LocalscaleVal:number=1build(){Image($r('app.media.heart')).width(40).scale({x:this.scaleVal,y:this.scaleVal}).onClick(()=>{animateTo({duration:200,curve:curves.springMotion(0.5,0.8)},()=>{this.scaleVal=1.4// 先放大})// 0.2s 后弹回setTimeout(()=>{animateTo({duration:200},()=>{this.scaleVal=1})},200)})}

点一下爱心先弹大再弹回，配合弹簧曲线非常有"手感"。scale({ x, y })是缩放属性，改它就有放大缩小动画。

常见误区（小白必踩）

下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲，改一改文末「动手改一改」里的参数，亲眼看看效果。

完整可运行示例：弹簧动画让方块归位

用animateTo的弹簧曲线，做一个「拖出去松手弹回来」的效果。

代码解析

// animateTo 包裹状态修改 = 让这次变化以动画呈现@Entry@Componentstruct SpringBox{@Statex:number=0build(){Column(){Stack(){Text('拖我').width(80).height(80).backgroundColor('#007DFF').borderRadius(12).translate({x:this.x})// 水平位移跟随 x}.width('100%').height(200).backgroundColor('#F2F3F5')Button('弹回原位').margin(20).onClick(()=>{animateTo({duration:600,curve:Curve.Spring},// 弹簧曲线()=>{this.x=0}// 目标状态)})}}}

你会看到什么：蓝色方块默认在左侧。点击「弹回原位」时，方块不是瞬间跳回，而是带一点回弹地滑回 x=0——Curve.Spring就是这种「过冲再回正」的手感。

动手改一改：

• 把Curve.Spring改成Curve.EaseOut，对比「顺滑停下」和「弹簧回弹」的区别。
• 把duration: 600改成1500，动画明显变慢。
• 把this.x = 0改成this.x = 120，让方块弹到右侧而不是原位。

写在最后

属性动画的精髓就八个字：改状态 + 包进动画。想普通平滑用Curve.EaseOut，想有灵气用弹簧曲线。别小看这一下回弹，用户对"高级感"的感知，往往就来自这些细节。

回去把你项目里所有"瞬间变化"的地方（弹窗出现、按钮反馈、列表展开）都套上animateTo，你会发现 app 的质感立刻不一样。