harmonyOS鸿蒙官网教程-添加动画_鸿蒙加载动画

属性动画的使用

1 概述

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

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

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

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

Image($r('app.media.image1'))   
   .animation({
      
      duration: 1000,    
      tempo: 1.0,    
      delay: 0,    
      curve: Curve.Linear,    
      playMode: PlayMode.Normal,    
      iterations: 1  
   })
1
2
3
4
5
6
7
8
9
10

2 创建属性动画页面

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

图2-1 ：示例动画

gif图

该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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17