HarmonyOS 5.0应用开发——属性动画

【高心星出品】

属性动画

属性接口（以下简称属性）包含尺寸属性、布局属性、位置属性等多种类型，用于控制组件的行为。针对当前界面上的组件，其部分属性（如位置属性）的变化会引起UI的变化。添加动画可以让属性值从起点逐渐变化到终点，从而产生连续的动画效果。

animateTo属性动画

通用函数，对闭包前界面和闭包中的状态变量引起的界面之间的差异做动画。

支持多次调用，支持嵌套。

animateTo(value: AnimateParam, event: () => void): void

animateTo接口参数中，value指定AnimateParam对象（包括时长、Curve等）event为动画的闭包函数，闭包内变量改变产生的属性动画将遵循相同的动画参数。

案例：

点击按钮红色块旋转90度，绿色块向下平移100并且透明度改变为半透明。

代码：

import curves from '@ohos.curves'@Entry
@Component
struct PropAnimation {@State animate: boolean = false;// 第一步: 声明相关状态变量@State rotateValue: number = 0; // 组件一旋转角度@State translateY: number = 0; // 组件二偏移量@State opacityValue: number = 1; // 组件二透明度// 第二步：将状态变量设置到相关可动画属性接口build() {Column() {// 组件一Column() {this.CommonText()}.ColumnStyle().backgroundColor(0xf56c6c).rotate({ angle: this.rotateValue })// 组件二Column() {this.CommonText()}.ColumnStyle().backgroundColor(0x67C23A).opacity(this.opacityValue).translate({ y: this.translateY })Button('Click').margin({ top: 120 }).onClick(() => {this.animate = !this.animate;// 第三步：通过属性动画接口开启属性动画animateTo({ curve: curves.springMotion() }, () => {// 第四步：闭包内通过状态变量改变UI界面// 这里可以写任何能改变UI的逻辑比如数组添加，显隐控制，系统会检测改变后的UI界面与之前的UI界面的差异，对有差异的部分添加动画// 组件一的rotate属性发生变化，所以会给组件一添加rotate旋转动画this.rotateValue = this.animate ? 90 : 0;// 组件二的scale属性发生变化，所以会给组件二添加scale缩放动画this.opacityValue = this.animate ? 0.6 : 1;// 组件二的offset属性发生变化，所以会给组件二添加offset偏移动画this.translateY = this.animate ? 100 : 0;})})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}@BuilderCommonText() {Text('ArkUI').fontWeight(FontWeight.Bold).fontSize(20).fontColor(Color.White)}
}@Extend(Column)
function ColumnStyle() {.justifyContent(FlexAlign.Center).width(150).height(150).borderRadius(10)
}

animation属性动画

相比于animateTo接口需要把要执行动画的属性的修改放在闭包中，animation接口无需使用闭包，把animation接口加在要做属性动画的可动画属性后即可。animation只要检测到其绑定的可动画属性发生变化，就会自动添加属性动画，animateTo则必须在动画闭包内改变可动画属性的值从而生成动画。

animation(value:AnimateParam)

组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。布局类改变宽高的动画，内容都是直接到终点状态，例如文字、Canvas的内容等，如果要内容跟随宽高变化，可以使用renderFit属性配置。

案例：

点击按钮红色块向左平移并且顺时针旋转90°，绿色块向右平移且逆时针旋转90°，且文字颜色变为黑色。

代码：

import curves from '@ohos.curves';@Entry
@Component
struct AnimationDemo {@State animate: boolean = false;// 第一步: 声明相关状态变量@State rotateValue: number = 0; // 组件一旋转角度@State translateX: number = 0; // 组件二偏移量@State translateXX:number=0;//组件一平移@State rotateValuee: number = 0; // 组件二旋转角度@State color: Color = Color.White; // 组件二字体颜色// 第二步：将状态变量设置到相关可动画属性接口build() {Column() {Column() {// 组件一Text('ArkUI').textStyle().backgroundColor(0xf56c6c).fontColor(Color.White).rotate({ angle: this.rotateValue })// 第三步：通过属性动画接口开启属性动画，控件的函数调用顺序是从下往上的，这个animation会作用到上面的rotate属性.translate({x:this.translateXX}).animation({ curve: curves.springMotion() })// 组件二Text('ArkUI').textStyle().backgroundColor(0x67C23A).fontColor(this.color)// 第三步：通过属性动画接口开启属性动画，控件的函数调用顺序是从下往上的，这个animation会作用到上面的fontColor属性.animation({ curve: curves.springMotion() }).translate({ x: this.translateX })// 第三步：通过属性动画接口开启属性动画，控件的函数调用顺序是从下往上的，这个animation会作用到上面的translate属性.rotate({angle:this.rotateValuee}).animation({ curve: curves.springMotion() })}.justifyContent(FlexAlign.Center)// 第四步：通过状态变量改变UI界面，系统会检测改变后的UI界面与之前的UI界面的差异，对有差异的部分添加动画Button('Click').margin({ top: 120 }).onClick(() => {this.animate = !this.animate;// 组件一的rotate属性有变化，所以会给组件一加rotate动画this.rotateValue = this.animate ? 90 : 0;this.rotateValuee = this.animate ? -90 : 0;// 组件二的translate属性有变化，所以会给组件二加translate动画this.translateX = this.animate ? 100 : 0;this.translateXX = this.animate ? -100 : 0;// 组件二的fontColor属性有变化，所以会给组件二加fontColor动画this.color = this.animate ? Color.Black : Color.White;})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}@Extend(Text)
function textStyle() {.fontWeight(FontWeight.Bold).fontSize(20).textAlign(TextAlign.Center).borderRadius(10).width(150).height(150)
}}
}@Extend(Text)
function textStyle() {.fontWeight(FontWeight.Bold).fontSize(20).textAlign(TextAlign.Center).borderRadius(10).width(150).height(150)
}