前言：

之前我們已經完成了Harmony ArkUI 使用ets方式實現基礎的頁面佈局和資料連線的學習，這次我們在原有的基礎上進行一些圖片和動畫的繪製學習。本篇是以HarmonyOS官網的基於TS擴充套件的宣告式開發正規化文件，繪圖和動畫為基礎進行編寫。所以筆者將原文進行整合，提取出其中的要點，以便通俗易懂地呈現給讀者，希望能幫助你快速瞭解Harmony的ETS開發，學會簡單的圖形和動畫繪製的學習。本篇最後會貼上參考原文連結。 

首先講一下大致的思路，我們要使用元件工具繪製基本的幾何圖形，繪製自定義幾何圖形，給圖形新增動畫效果，以及頁面的轉場動畫。所以筆者將整個功能的實現分為了兩個步驟，圖形繪製和動畫繪製，這與原篇大致相同。

1. 圖形繪製。

在之前的學習中，我們已經建立的專案，頁面佈局已經完備，這次學習我們就在這基礎上進行圖形繪製。FoodDetail頁面的食物成分表裡，給每一項成分名稱前都加上一個圓形的圖示作為成分標籤。

1) 繪製基本圖形。建立Circle元件，在每一項含量成分前增加一個圓形圖示作為標籤。修改FoodDetail頁面的ContentTable元件裡的IngredientItem方法，在成分名稱前新增Circle。每個成分的標籤顏色不一樣在build方法中，呼叫IngredientItem，給每個Circle填充不一樣的顏色。

開啟previewer或模擬器看一下效果

2) 繪製自定義圖形。在pages資料夾下建立新的eTS頁面Logo.ets。在Logo.ets中建立Logo Component，建立Flex元件為根節點，建立Shape元件為Flex子元件。給頁面填充漸變色。設定為線性漸變，偏移角度為180deg，三段漸變 #BDE895 -->95DE7F --> #7AB967。

開啟previewer或模擬器看一下效果

3) 繪製路線Path，設定其繪製命令。填充顏色為白色。

4) 在Shape元件內繪製第二個Path。第二條Path的背景色為漸變色。Path的繪製命令比較長，可以將其作為元件的成員變數，通過this呼叫。完成應用Logo的繪製。Shape組合了三個Path元件。

開啟previewer或模擬器看一下效果

2. 動畫繪製。

上一部分我們已經學習了普通圖形和自定義圖形的繪製，這一部分我們會在圖形繪製的基礎上給推行新增動畫效果，讓圖形動起來，這就是動畫繪製。

動畫功能分為元件動畫和頁面間動畫，在本節主要完成兩個動畫效果：Logo圖示的漸出和放大效果與食物列表頁和食物詳情頁的轉場動畫效果。

1) 閃屏動畫。閃屏動畫的預期效果是，進入Logo頁面後，animateTo動畫效果自動開始播放。呼叫Shape的onAppear方法，設定其顯式動畫。建立opacity和scale數值的成員變數，用裝飾器@State修飾。表示其為有狀態的資料，即改變會觸發頁面的重新整理。

2) 設定animateTo的動畫曲線curve。Logo的加速曲線為先慢後快，使用貝塞爾曲線cubicBezier，cubicBezier(0.4, 0, 1, 1)。使用插值計算，首先要匯入curves模組。

3) 設定動畫時長為1s，延時0.1s開始播放，設定顯示動效event的閉包函式，實現Logo的漸出和放大效果。閃屏動畫播放結束後定格1s，進入FoodCategoryList頁面。設定animateTo的onFinish回撥介面，呼叫定時器Timer的setTimeout介面延時1s後，呼叫router.replace，顯示FoodCategoryList頁面。

開啟previewer或模擬器看一下效果

4) 頁面轉場動畫。食物分類列表頁和食物詳情頁之間的共享元素轉場，即點選FoodListItem/FoodGridItem後，食物縮圖會放大，隨著頁面跳轉，到食物詳情頁的大圖。引入curves模組。在FoodListItem的Image元件上設定autoResize為false，因為image元件預設會根據最終展示的區域，去調整圖源的大小，以優化圖片渲染效能。

5) 設定FoodDetail頁面的FoodImageDisplay的Image元件的共享元素轉場方法（sharedTransition）。設定方法同上。

開啟previewer或模擬器看一下效果

以上，本次的內容分享，謝謝！

參考原文連結：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-ts-drawing-feature-0000001192705721