8、鸿蒙动画开发实战：做一个会跳舞的按钮！（附动效示意图）

前端付豪2025-04-29 15:24

动画是提升鸿蒙应用交互体验的关键利器。今天，我们手把手实现一个"跳跃动画按钮"，通过 ArkTS 的动画能力打造更灵动的 UI，打造真正有"呼吸感"的界面！

🎯 一、目标效果

✅ 按钮点击后执行放大/缩小的跳跃动画
✅ 动效自然顺滑
✅ 支持重复点击，不卡顿

🔧 二、使用到的动画能力

HarmonyOS ArkUI 动画支持以下模式：

属性动画（支持 scale/translate/opacity 等）
曲线动画（easeIn/easeOut/elastic 等）
帧动画（适用于逐帧切换）

我们将用 animateTo 实现尺寸动画。

🛠️ 三、实战代码：实现跳动按钮

scss 复制代码

@Entry
@Component
struct BouncyButton {
  @State scaleVal: number = 1.0

  build() {
    Column() {
      Text('点我跳动！')
        .fontSize(18)
        .padding(12)
        .backgroundColor('#4A90E2')
        .borderRadius(12)
        .scale({ x: this.scaleVal, y: this.scaleVal })
        .onClick(() => {
          this.animate()
        })
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height('100%')
  }

  animate() {
    animateTo({ duration: 100, curve: Curve.EaseInOut }, () => {
      this.scaleVal = 1.2
    }, () => {
      animateTo({ duration: 100, curve: Curve.EaseInOut }, () => {
        this.scaleVal = 0.9
      }, () => {
        animateTo({ duration: 100, curve: Curve.EaseInOut }, () => {
          this.scaleVal = 1.0
        })
      })
    })
  }
}

🖼️ 四、效果图预览（跳跃中帧）

图示说明：按钮缩放至 1.2 倍，边角圆润，蓝色背景，字体居中，动画自然跳动

📌 五、知识点回顾

技术点	说明
`@State`	控制动画目标值（scale）
`animateTo`	实现平滑补间动画
多段动画嵌套	三段组合实现"先放大→再缩小→归位"
`scale`	控制缩放大小，支持 X/Y 分别定义

🧩 六、扩展玩法推荐

加上点击反馈音效：增强触感体验
加入弹性曲线（Curve.Spring） ：更拟真
支持长按持续跳动：玩法增强
跳动 + 颜色渐变联动：打造视觉动效 combo！

📘 第九篇预告

《设备能力调用全攻略：调用相机、定位与系统分享》

教你玩转鸿蒙端侧原生能力，让你的应用动真格！