引言動畫是應用開發中必不可少的部分一方面可以提升用戶體驗另一方面可以引導用戶操作提高信息傳達效率。UI 中包含開發者和用戶交互時看到的各類組件屬性值的變化會引起 UI 變化。如果不加動畫屬性變化會瞬間完成帶來突兀感容易讓用戶失去視覺焦點動畫可以在 UI 變化時添加流暢的過渡效果。本節課將系統講解 ArkUI 屬性動畫的基礎概念、接口使用與開發實踐。核心內容動畫概述與使用目的動畫的作用UI 屬性值變化若不加入動畫會瞬間完成造成突兀感易讓用戶丟失視覺焦點動畫可以為 UI 變化添加流暢的過渡效果。使用動畫的四個核心目的使界面的過渡自然流暢。增強用戶從界面獲得的反饋感和互動感。在內容加載等場景中增加用戶的耐心緩解等待帶來的不適感。引導用戶了解和操作設備。屬性動畫與可動畫屬性屬性動畫定義通過改變可動畫屬性引起 UI 產生連續視覺變化的動畫效果按照動畫參數逐幀驅動屬性變化生成動畫是 ArkUI 中最基礎的動畫類型。可動畫屬性分類屬性可分為可動畫屬性和不可動畫屬性可動畫屬性又分為系統可動畫屬性和自定義可動畫屬性。常見系統可動畫屬性分類分類包含屬性布局屬性位置、大小、內邊距、外邊距、對齊方式、權重等仿射變換平移、旋轉、縮放、錨點等背景背景顏色、背景模糊等內容文字大小、文字顏色圖片對齊方式、模糊等前景前景顏色等外觀透明度、圓角、邊框、陰影等屬性動畫接口說明ArkUI 提供animateTo和animation兩種屬性動畫接口都可以通過改變組件可動畫屬性觸發界面連續變化生成屬性動畫。animateTo 接口語法animateTo(value: AnimateParam, event: () { // 動畫的閉包函數閉包內變量改變產生的屬性動畫將遵循相同的動畫參數 })animation 接口語法Image($r(app.media.image)) .rotate({ ... }) // 把 animation 接口加在要做屬性動畫的可動畫屬性后檢測到其綁定的可動畫屬性發生變化就會自動添加屬性動畫 .animation(value: AnimateParam)animateTo 與 animation 接口對比對比維度animateToanimation生成動畫方式通過變量控制可動畫屬性值在閉包內修改變量觸發屬性變化生成動畫綁定在目標可動畫屬性后檢測到屬性變化自動添加動畫作用范圍全局顯式動畫可同時作用于多個組件組件級屬性動畫必須綁定單個組件語法結構通過閉包函數觸發狀態變化通過組件屬性直接設置動畫參數適用場景多組件同步動畫或復雜動畫邏輯單個組件簡單屬性動畫如平移、旋轉、縮放等動畫參數 AnimateParamAnimateParam包含的核心參數參數名參數說明duration動畫持續時間單位為毫秒tempo動畫播放速度值越大播放越快值越小播放越慢默認值為 1.0curve動畫曲線指定動畫的速度變化規律delay動畫延遲播放時間單位為毫秒默認不延遲iterations動畫播放次數默認播放 1 次設置為-1表示無限次循環播放playMode動畫播放模式默認播放完成后重頭開始播放onFinish動畫播放完成后的回調函數動畫曲線 Curve動畫曲線定義動畫曲線是屬性值關于時間的變化函數決定了屬性變化過程中動畫的運動軌跡。某一時刻曲線的斜率代表動畫速度對應屬性變化的快慢調整曲線可以實現動畫的加速和減速效果。動畫曲線和時長配合可以產生運動的韻律感。優秀動畫曲線的特點連續光滑、符合用戶意圖、符合物理世界客觀規律開發者需要根據場景選擇合適的曲線。常見內置動畫曲線曲線說明Smooth平滑曲線效果更符合用戶認知能創造自然生動的動畫效果EaseInOut表示動畫以低速開始和低速結束Linear表示動畫從頭到尾速度保持一致開發案例實現思路案例需求實現兩個動畫效果點擊按鈕圖片展開、按鈕縮小再次點擊按鈕圖片收回、按鈕放大展開收合動畫。點擊單個圖片實現圖片翻轉動畫。展開收合動畫實現思路定義狀態變量控制圖片的旋轉角度、平移位置和縮放屬性展開狀態圖片旋轉 360 度沿 X/Y 軸平移到對應位置按鈕縮放為原大小的 0.7 倍。收起狀態圖片旋轉角度為 0、平移距離為 0按鈕縮放恢復為原大小。使用animateTo通過閉包修改狀態變量觸發多組件同步動畫。State isExpanded: boolean false; animateTo({ duration: 2000, curve: Curve.Smooth }, () { this.isExpanded !this.isExpanded; }) Image($r(app.media.image)) .rotate({ angle: this.isExpanded ? 360 : 0 }) .translate({ x: this.isExpanded ? 100 : 0, y: this.isExpanded ? 100 : 0 }) .scale({ x: this.isExpanded ? 0.7 : 1, y: this.isExpanded ? 0.7 : 1 })圖片翻轉動畫實現思路為每個圖片綁定狀態變量控制旋轉角度點擊圖片時修改變量通過animation接口綁定屬性生成單個組件的翻轉動畫。State flipAngle: number 0; Image($r(app.media.image)) .rotate({ angle: this.flipAngle }) .animation({ duration: 1000, curve: Curve.EaseInOut }) .onClick(() { this.flipAngle this.flipAngle 0 ? 180 : 0; })總結本節課系統講解了 ArkUI 屬性動畫的核心知識動畫基礎概念為 UI 屬性變化添加流暢過渡效果避免突兀感。使用動畫的四個核心目的為過渡自然流暢、增強反饋感、緩解等待不適感、引導用戶操作。屬性動畫與可動畫屬性通過改變可動畫屬性逐幀驅動 UI 產生連續視覺變化。系統可動畫屬性涵蓋布局屬性、仿射變換、背景、內容、前景、外觀六大類。兩種屬性動畫接口animateTo全局顯式動畫通過閉包修改狀態變量觸發多組件同步動畫適合復雜動畫邏輯。animation組件級屬性動畫綁定單個組件屬性檢測到變化自動添加動畫適合簡單平移、旋轉、縮放等效果。動畫參數 AnimateParam包含duration時長、tempo速度、curve曲線、delay延遲、iterations次數、playMode模式、onFinish完成回調等配置項。動畫曲線 Curve屬性值關于時間的變化函數決定運動軌跡與速度變化。常見內置曲線包括Smooth平滑、EaseInOut頭尾低速、Linear勻速。