HarmonyOS應(yīng)用開發(fā)基礎(chǔ)課件：使用動(dòng)畫

使用動(dòng)畫

走進(jìn)ArkTS聲明式開發(fā)

使用動(dòng)畫本任務(wù)完成顯示動(dòng)畫、組件的轉(zhuǎn)場(chǎng)動(dòng)畫、頁面的轉(zhuǎn)場(chǎng)動(dòng)畫的設(shè)置。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實(shí)施0102030504整理工程資源頁面整體布局設(shè)計(jì)與開發(fā)實(shí)現(xiàn)顯式動(dòng)畫實(shí)現(xiàn)頁面轉(zhuǎn)場(chǎng)動(dòng)畫實(shí)現(xiàn)組件轉(zhuǎn)場(chǎng)動(dòng)畫01整理工程資源

02頁面整體布局設(shè)計(jì)與開發(fā)頁面整體布局用Stack層疊布局實(shí)現(xiàn)，Stack的對(duì)齊方式采用默認(rèn)的居中對(duì)齊。Stack內(nèi)放置一個(gè)Image組件和一個(gè)Column布局容器組件，在Column內(nèi)再放置Button按鈕組件等。03實(shí)現(xiàn)顯式動(dòng)畫-1在ets目錄下創(chuàng)建view目錄，在view目錄下創(chuàng)建AttrAnimation.ets文件，在AttrAnimation.ets文件中創(chuàng)建AttrAnimation組件，使用顯式動(dòng)畫實(shí)現(xiàn)加載中的動(dòng)畫效果。整體布局是最外層使用Column，內(nèi)部放置Stack層疊布局和一個(gè)Text組件，Stack中疊放兩個(gè)圖片loading.png和sandglass.png。03實(shí)現(xiàn)顯式動(dòng)畫-2修改Index.ets文件的內(nèi)容，在第一行導(dǎo)入AttrAnimation組件，并在“顯示動(dòng)畫”按鈕的條件渲染中進(jìn)行調(diào)用。04實(shí)現(xiàn)組件轉(zhuǎn)場(chǎng)動(dòng)畫在Index.ets文件中，實(shí)現(xiàn)單擊likes（點(diǎn)贊）圖片時(shí)，love（愛心）圖片的插入和刪除的組件轉(zhuǎn)場(chǎng)動(dòng)畫效果。05實(shí)現(xiàn)頁面轉(zhuǎn)場(chǎng)動(dòng)畫在pages目錄下新建頁面Index2，分別在Index1和Index2兩個(gè)頁面中添加頁面轉(zhuǎn)場(chǎng)動(dòng)畫。在Index組件中，給最外層的Stack布局添加頁面的縮放比和透明度設(shè)置，并添加頁面入場(chǎng)和出場(chǎng)動(dòng)畫效果。

使用動(dòng)畫在App的開發(fā)中，適當(dāng)?shù)氖褂脛?dòng)畫效果，可以增強(qiáng)用戶體驗(yàn)。本任務(wù)學(xué)習(xí)了常用的顯示動(dòng)畫、組件內(nèi)轉(zhuǎn)場(chǎng)動(dòng)畫、頁面間轉(zhuǎn)場(chǎng)動(dòng)畫的用法，ArkUI