前言

鸿蒙OS最近吹的很凶，赶紧卷一下。学习过程中发现很多人吐槽官方属性动画这一章比较敷衍，我第一遍也看的半懂不懂的，所以就有了这篇文章，在官方的介绍基础上补充了自己的理解

属性动画是什么？

我们借助官方的话来说，

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

一、页面布局发生变化。例如添加、删除部分组件元素。
二、页面元素的可见性和位置发生变化。例如显示或者隐藏部分元素，或者将部分元素从一端移动到另外一端。
三、页面中图形图片元素动起来。例如使页面中的静态图片动起来。
简单来说，属性动画是组件的通用属性发生改变时而产生的属性渐变效果。如下图所示，其原理是，当组件的通用属性发生改变时，组件状态由初始状态逐渐变为结束状态的过程中，会创建多个连续的中间状态，逐帧播放后，就会形成属性渐变效果，从而形成动画。

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

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

别急哈，等你把上面这个代码贴上去，你就会发现上例代码并没有动画，这是因为

1、animation属性作用域。animation自身也是组件的一个属性，其作用域为animation之前。即产生属性动画的属性须在animation之前声明，其后声明的将不会产生属性动画。以示例中的五个图标动画为例，我们期望产生动画的属性为Image组件的width属性，故该属性width需在animation属性之前声明。如果将该属性width在animation之后声明，则不会产生动画效果。

2、产生属性动画的属性变化时需触发UI状态更新。在上面的示例中，因为缺少产生动画的属性，所以并不会有动画

3、产生属性动画的属性本身需满足一定的要求，并非任何属性都可以产生属性动画。目前支持的属性包括width、height、position、opacity、backgroundColor、scale、rotate、translate等

我们自己简单归纳下

$属性动画 = 属性 + anima t i o n （属性作用域）$

这个属性就是目前支持的width、height、position、opacity、backgroundColor、scale、rotate、translate等

参数解释

属性名称	属性类型	默认值	描述
duration	number	1000	动画时长，单位为毫秒，默认时长为1000毫秒。
tempo	number	1.0	动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。
curve	Curve	Curve.Linear	动画变化曲线，默认曲线为线性。
delay	number	0	延时播放时间，单位为毫秒，默认不延时播放。
iterations	number	1	播放次数，默认一次，设置为-1时表示无限次播放。
playMode	PlayMode	PlayMode.Normal	设置动画播放模式，默认播放完成后重头开始播放。
onFinish	function	-	动画播放结束时回调该函数。

其中变化曲线curve枚举值为：

名称	描述
Linear	表示动画从头到尾的速度都是相同的。
Ease	表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。
EaseIn	表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。
EaseOut	表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。
EaseInOut	表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。
FastOutSlowIn	标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。
LinearOutSlowIn	减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。
FastOutLinearIn	加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。
ExtremeDeceleration	急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
Sharp	锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。
Rhythm	节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
Smooth	平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
Friction	阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。

人话解释：相同时间，结果相同，不同的过程

播放模式playMode枚举值为：

名称	描述
Normal	动画按正常播放。
Reverse	动画反向播放。
Alternate	动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
AlternateReverse	动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。

注意onFinish回调函数与参数iterations有关。当参数iterations播放结束时，会调用onFinish函数来进行后续的业务处理。而当iterations设置为-1时，表示无限次播放，则onFinish回调函数不会被调用。

举个例子

旋转动画

@State rotateAngle : number = 0
...Text("旋转动画")Row(){Button("旋转动画开始",{type: ButtonType.Capsule,stateEffect:true}).onClick(()=>{this.rotateAngle =360})Image($r('app.media.loading')).width(100).height(100).rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle }).animation({duration: 2000,tempo: 1.0,delay: 0,curve: Curve.Linear,playMode: PlayMode.Normal,iterations: -1})}.height("30%").width("100%").backgroundColor(Color.Green)

上例可以看到，添加了rotate旋转作用域，和animation作用域，并通过rotateAngle 状态的改变控制了动画的开始，效果如下
在这里插入图片描述

位移动画

  @State xState : number = 0@State yState : number = 0
...Text("位移动画")Row(){Text('HarmonyOS').width(200).height(100).fontColor(Color.Blue).fontSize(30).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial').margin(100).position({x: this.xState,y:this.yState}).animation({duration: 1000,tempo: 1.0,delay: 0,curve: Curve.Linear,playMode: PlayMode.Normal,iterations: 1,onFinish:()=>{if ( this.xState == 0) {this.xState =100this.yState =100}else {this.xState =0this.yState =0}}})}.height("30%").width("100%").backgroundColor(Color.Yellow)

上例我们可以看到，通过设置position和animation实现了位移动画，并且在其到达指定路径的onFinish回调中重新设置了xState 和yState ，以达到一种另类的永久动画效果。运行效果如下
在这里插入图片描述

组合动画

并不是一次只能加一个属性，也可以多个一起加

  @State watermelonRotateAngle : number = 0@State width : number = 50@State height : number = 50...Text("组合动画")Row(){Button("组合动画开始",{type: ButtonType.Capsule,stateEffect:true}).onClick(()=>{this.watermelonRotateAngle =360this.width = 100this.height = 100})Image($r('app.media.watermelon')).width(this.width).height(this.height).rotate({ x: 0, y: 0, z: 1, angle: this.watermelonRotateAngle }).animation({duration: 2000,tempo: 1.0,delay: 0,curve: Curve.Linear,playMode: PlayMode.Normal,iterations: -1})}.height("40%").width("100%").backgroundColor(Color.Orange)