- ???屬性動畫
- 轉場動畫
- 粒子動畫
- 組件動畫
- 動畫曲線
- 動畫銜接
- 動畫效果
- 幀動畫(ohos.animator)
UI(用戶界面)中包含開發者與設備進行交互時所看到的各種組件(如時間、壁紙等)。屬性作為接口,用于控制組件的行為。例如,開發者可通過位置屬性調整組件在屏幕上的位置。
屬性值的變化,通常會引起UI的變化。動畫可在UI發生改變時,添加流暢的過渡效果。如果不加入動畫,屬性將在一瞬間完成變化。造成突兀感的同時,容易導致用戶失去視覺焦點。
動畫的目的包括:
- 使界面的過渡自然流暢。
- 增強用戶從界面獲得的反饋感和互動感。
- 在內容加載等場景中,增加用戶的耐心,緩解等待帶來的不適感。
- 引導用戶了解和操作設備。
在需要為UI變化添加過渡的場景,都可以使用動畫,如開機、應用啟動退出、下拉進入控制中心等。這些動畫可向用戶提供關于其操作的反饋,并有助于讓用戶始終關注界面。
ArkUI中提供多種動畫接口(屬性動畫、轉場動畫等),用于驅動屬性值按照設定的動畫參數,從起始值逐漸變化到終點值。盡管變化過程中參數值并非絕對的連續,而是具有一定的離散性。但由于人眼會產生視覺暫留,所以最終看到的就是一個“連續“的動畫。UI的一次改變稱為一個動畫幀,對應一次屏幕刷新。決定動畫流暢度的一個重要指標就是幀率FPS(Frame Per Second),即每秒的動畫幀數,幀率越高則動畫就會越流暢。ArkUI中,動畫參數包含了如動畫時長、動畫曲線等參數。動畫曲線作為主要因素,決定了屬性值變化的規律。以線性動畫曲線為例,在動畫時長內,屬性值將從起點值勻速變化到終點值。屬性過快或過慢的變化,都可能帶來不好的視覺感受,影響用戶體驗。因此動畫參數特別是動畫曲線,需要結合場景和曲線特點進行設計和調整。
動畫接口驅動屬性值按照動畫參數決定的規律,從原來的狀態連續過渡到新的狀態,進而在UI上產生的連續視覺效果。本文將按照如下結構,提供各種動畫的使用方法和注意事項,使開發者快速學習動畫。
- 屬性動畫:最基礎的動畫類型,按照動畫參數逐幀驅動屬性的變化,產生一幀幀的動畫效果。除其中的自定義屬性動畫外,動畫過程的驅動由系統完成,應用側不感知動畫過程。
- 轉場動畫:為組件在出現和消失時添加過渡動畫。為了保證動畫一致性,部分接口動畫曲線已內置,不支持開發者自定義。
- 不推薦在應用內使用UIAbility組合所有的界面:UIAbility是一個任務,會在多任務界面獨立顯示一個卡片,UIAbility之間的跳轉是任務之間的跳轉。以應用內查看大圖的典型場景為例,不建議應用內調用圖庫的UIAbility去打開圖片查看大圖,會導致任務的跳轉,圖庫的UIAbility也會加入多任務界面中。正確的方式是應用內構建大圖組件,通過模態轉場去調起大圖組件,一個任務內的所有的界面都在一個UIAbility內閉環。
- 導航轉場中,應使用Navigation組件實現轉場動畫。過去的page+router方式在實現導航轉場過程中,因為page和page之間相互獨立,其聯動動畫效果受限。不僅容易導致頁面之間的割裂,并且不支持一次開發多端部署。
- 組件動畫:組件提供默認動效(如List的滑動動效)便于開發者使用,同時部分組件還支持定制化動效。
- 動畫曲線:介紹傳統曲線和彈簧曲線的特點和使用方式。動畫曲線影響屬性值的運動規律,進而決定界面的動畫效果。
- 動畫銜接:介紹如何實現動畫與動畫之間、手勢與動畫之間的自然過渡。
- 高階動畫效果:介紹模糊、大陰影和顏色漸變等高階效果接口的使用方法。
- 幀動畫:系統側提供在動畫過程中的插值結果,由開發者每幀修改屬性值產生動畫,相比于屬性動畫,有可實現暫停的優點,但性能不如屬性動畫。