「Mac畅玩鸿蒙与硬件17」鸿蒙UI组件篇7 - Animation 组件基础

Source

在应用开发中,动画效果可以增强用户体验。鸿蒙框架提供了 translatescalerotate 等动画功能,允许对组件进行平移、缩放和旋转等操作。本篇将介绍 Animation 组件的基础知识和示例代码。

在这里插入图片描述


关键词
  • Animation 组件
  • 动画效果
  • 位置动画
  • 自动动画
  • 缩放动画

一、Animation 组件概述

鸿蒙的 Animation 组件支持多种动画效果,如平移、缩放和旋转。通过动态控制这些属性的变化,可以实现组件在界面中的流畅动画效果。以下实例演示这些基础动画的实现。


二、创建简单动画
2.1 自动位移动画

通过 translate 属性实现组件的自动平移效果,可以控制 xy 轴的偏移量,使组件自动左右或上下移动。定时器可用于定期触发动画。

@Entry
@Component
export struct AutoTranslateAnimation {
   
    
      
  @State private x: number = 0

  build() {
   
    
      
    Column() {
   
    
      
      // 图片组件,应用平移动画
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .translate({
   
    
       x: this.x }) // 根据 x 状态变量实现水平平移
        .transition({
   
    
       opacity: 0.5 }) // 设置透明度过渡效果

      Button('开始自动移动')
        .onClick(() => this.startAutoMove()) // 按钮开始自动动画
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }

  // 定义自动平移函数
  startAutoMove() {
   
    
      
    setInterval(() =>