鸿蒙ArkUI开发-属性动画的使用

最新推荐文章于 2025-05-07 20:21:36 发布

移不动开发技术

最新推荐文章于 2025-05-07 20:21:36 发布

阅读量1.9k

点赞数 18

分类专栏：鸿蒙开发文章标签： harmonyos 程序员移动开发 OpenHarmony 华为 arkUI 鸿蒙系统

本文链接：https://blog.youkuaiyun.com/m0_62167422/article/details/135849916

版权

本文详细介绍了属性动画的基础概念、应用场景、使用方法（包括如何创建动画、动画参数的调整以及动画的开启与关闭），展示了如何通过组件属性变化触发动画，并探讨了关键参数如duration、tempo和delay的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 概述

属性动画，是最为基础的动画，其功能强大、使用场景多，应用范围较广。常用于如下场景中：

一、页面布局发生变化。例如添加、删除部分组件元素。
二、页面元素的可见性和位置发生变化。例如显示或者隐藏部分元素，或者将部分元素从一端移动到另外一端。
三、页面中图形图片元素动起来。例如使页面中的静态图片动起来。

简单来说，属性动画是组件的通用属性发生改变时而产生的属性渐变效果。如下图所示，其原理是，当组件的通用属性发生改变时，组件状态由初始状态逐渐变为结束状态的过程中，会创建多个连续的中间状态，逐帧播放后，就会形成属性渐变效果，从而形成动画。

属性动画的使用方式也非常简单，只需要给组件（包括基础组件和容器组件）添加animation属性，并设置好参数，如下代码所示：

Image($r('app.media.image1'))   
   .animation({   
      duration: 1000,    
      tempo: 1.0,    
      delay: 0,    
      curve: Curve.Linear,    
      playMode: PlayMode.Normal,    
      iterations: 1  
   })

2 创建属性动画页面

如下图所示，在该下拉刷新动画场景中，一共有6个属性动画。头部中的五个图标的移动放大动画中，每个图标都是单独的一个动画，其共同组合成一个刷新等待动画。最后是下方组件上移的一个移动动画。为方便理解，图中下方的内容将以图片来代替实际应用的功能页面。

图2-1 ：示例动画

该6个属性动画创建方式类似，以五个图标放大移动动画的为例来讲解如何创建属性动画。

首先，创建一个头部刷新组件RefreshAnimHeader，在其中自定义一个图标组件AttrAnimIcons，用Image组件将资源图标引入，并设置好样式，如下所示：

@Component
export default struct RefreshAnimHeader {
  ...
  @Builder AttrAnimIcons(iconItem) {  
    Image(iconItem.imgRes)    
      .width(this.iconWidth)    
      .position({ x: iconItem.posX })    
      .objectFit(ImageFit.Contain)    
      .animation({      
        duration: 2000,      
        tempo: 3.0,      
        delay: iconItem.delay,      
        curve: Curve.Linear,      
        playMode: PlayMode.Alternate,      
        iterations: -1
     })
  }
  ...
}

然后在build方法中使用Row容器组件，将自定义的图标组件引入，并设置好样式，同时定义组件状态iconWidth，添加onApper事件，修改iconWidth的值