ArkTS与鸿蒙应用开发（7）

动画效果：为鸿蒙应用注入生命力

优秀的动画效果能够为应用增添生命力，提升用户体验。在健康管理应用中，我尝试了多种动画技术，本文分享我的实践经验。

属性动画的基础应用

ArkTS提供了简单易用的属性动画API，可以轻松实现组件的位移、缩放、旋转等效果。

typescript

Apply to UserDataCard...

// 刷新按钮旋转动画

Button({ type: ButtonType.Circle, stateEffect: true }) {

  Image($r('app.media.ic_public_refresh'))

    .width(20)

    .height(20)

    .fillColor('#FFFFFF')

    .rotate({ angle: this.rotateAngle })

}

.onClick(() => {

  animateTo({ duration: 1000, curve: Curve.EaseInOut }, () => {

    this.rotateAngle = 360;

  });

})

这段代码实现了一个简单的刷新按钮旋转动画，通过animateTo函数控制旋转角度的变化，创造流畅的视觉效果。

状态转换动画

在应用中，状态变化往往需要伴随动画效果，使界面变化更加自然。

typescript

Apply to UserDataCard...

@State isExpanded: boolean = false;

// 卡片展开/收起动画

Column() {

  Text('健康数据详情')

    .fontSize(16)

    .fontWeight(FontWeight.Medium)

  

  if (this.isExpanded) {

    // 详细数据内容

    this.buildDetailContent()

  }

}

.height(this.isExpanded ? 300 : 80)

.backgroundColor('#FFFFFF')

.borderRadius(16)

.padding(16)

.animation({

  duration: 300,

  curve: Curve.EaseOut,

  iterations: 1,

  playMode: PlayMode.Normal

})

.onClick(() => {

  this.isExpanded = !this.isExpanded;

})

这段代码实现了一个可展开/收起的卡片效果，通过animation属性定义高度变化的动画效果，使状态转换更加流畅。

列表动画

在列表展示中，添加动画效果可以提升用户体验，使界面更加生动。

typescript

Apply to UserDataCard...

@State appearItems: number = 0;

build() {

  List() {

    ForEach(this.healthRecords.slice(0, this.appearItems), (item, index) => {

      ListItem() {

        this.buildListItem(item)

      }

      .opacity(1)

      .animation({

        duration: 300,

        delay: index * 50,

        curve: Curve.EaseOut

      })

    })

  }

}

aboutToAppear() {

  // 逐个显示列表项

  this.appearItems = 0;

  let timer = setInterval(() => {

    if (this.appearItems < this.healthRecords.length) {

      this.appearItems++;

    } else {

      clearInterval(timer);

    }

  }, 50);

}

这段代码实现了列表项的逐个显示效果，通过控制显示的数量和设置延迟动画，创造出流畅的列表加载体验。

自定义动画效果

对于更复杂的动画需求，我们可以结合状态变量和动画属性，创造自定义效果。

typescript

Apply to UserDataCard...

@State pulseSize: number = 1.0;

@State pulseOpacity: number = 0.8;

build() {

  // 脉冲效果

  Stack() {

    Circle()

      .width(80)

      .height(80)

      .fill('rgba(255, 255, 255, 0.1)')

      .scale({ x: this.pulseSize, y: this.pulseSize })

      .opacity(this.pulseOpacity)

    

    Circle()

      .width(70)

      .height(70)

      .fill('rgba(255, 255, 255, 0.2)')

  }

}

aboutToAppear() {

  // 创建脉冲动画

  this.startPulseAnimation();

}

startPulseAnimation() {

  // 使用animateTo实现脉冲效果

  animateTo({

    duration: 1500,

    curve: Curve.EaseInOut,

    iterations: -1,  // 无限循环

    playMode: PlayMode.Alternate  // 交替播放

  }, () => {

    this.pulseSize = 1.15;

    this.pulseOpacity = 0.2;

  });

}

这段代码实现了一个呼吸灯效果，通过控制圆形的大小和透明度，创造出脉动的视觉效果。

我的动画开发感悟

在鸿蒙应用开发中，动画不仅是装饰，更是提升用户体验的重要手段。通过这次实践，我学会了如何在适当的时机添加恰当的动画效果，使应用界面更加生动自然。

动画设计需要把握几个关键点：时机恰当、效果自然、性能优良。过度的动画会分散用户注意力，而性能不佳的动画则会影响用户体验。在实际开发中，我尽量选择轻量级的动画效果，并通过性能测试确保动画的流畅度。

未来，我计划进一步探索鸿蒙的高级动画能力，如路径动画、关键帧动画等，为应用增添更多精彩的视觉效果，提升用户的情感体验。