【高心星出品】

屬性動畫

屬性接口（以下簡稱屬性）包含尺寸屬性、布局屬性、位置屬性等多種類型，用于控制組件的行為。針對當前界面上的組件，其部分屬性（如位置屬性）的變化會引起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)
}