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