鴻蒙上做一個loading加載動畫

本篇文章介紹了如何實現(xiàn)一個簡單的 loading 加載動畫，并且在文末提供了一個 demo 工程供讀者下載學(xué)習(xí)。

作為一個 OpenHarmony 南向開發(fā)者，接觸北向應(yīng)用開發(fā)并不多。北向開發(fā) ArkUI 老是改來改去，對筆者這樣的入門選手來說學(xué)習(xí)成本其實非常大，希望后面可以慢慢穩(wěn)定下來吧。

最近努力學(xué)習(xí)了一些，下面將學(xué)習(xí)經(jīng)驗分享如下：

使用 ImageAnimator 幀動畫組件實現(xiàn)一個自定義 loading 加載動畫

使用 Progress 進(jìn)度條組件實現(xiàn) loading 加載動畫。

筆者開發(fā)環(huán)境：(文末附有 demo ArkUI 應(yīng)用源碼，一定得是以下 IDE 和 SDK 版本或者更高版本才能編譯運(yùn)行，這也是坑點之一！??！)

開發(fā)板：潤和軟件 DAYU200 開發(fā)板

OpenHarmony 版本：OpenHarmony3.2 Beta5

IDE：DevEco Studio 3.1.0.200

SDK：API9（3.2.10.6）

效果演示：



①涉及到的知識點

ImageAnimator 幀動畫組件：

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md

Progress 進(jìn)度條組件：

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md

CustomDialogController 自定義彈窗組件：

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md

定時器 API：

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-timer.md

Row 組件，沿水平方向布局容器：

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-components-summary.md

②使用 ImageAnimator 幀動畫組件自定義 loading 動畫開發(fā)步驟

代碼如下：

├──ets
│├──loading#loading動畫圖片幀
│└──pages#ets代碼
│├──Index.ets
│├──loadingComponent_part1.ets
│├──loadingComponent_part2.ets#ImageAnimator幀動畫組件實現(xiàn)自定義loading加載動畫
│└──loadingComponent_part3.ets#Progress進(jìn)度條組件實現(xiàn)的loading加載動畫

（1）將自定義的 loading 動畫的圖片幀放在 ets 目錄下

組成自定義的 loading 動畫的圖片幀，詳情請見文末提供的 demo 工程。

在 entrysrcmainets 新建一個 loading 目錄，將其放在該目錄下：

（2）用幀動畫組件將動畫封裝成一個自定義組件

ImageAnimator 幀動畫組件：

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md

//loadingComponent_part1.ets
@Component

exportdefaultstructloadingComponent_part1{
privateimageWidth:number|Resource=0
privateimageHeight:number|Resource=0

build(){
Column(){
ImageAnimator()
.images([
{
src:'/loading/loading01.png',
duration:200,//每一幀圖片的播放時長，單位毫秒
},
{
src:'/loading/loading02.png',
duration:200,
},
{
src:'/loading/loading03.png',
duration:200,
},
{
src:'/loading/loading04.png',
duration:200,
},
{
src:'/loading/loading05.png',
duration:200,
},
{
src:'/loading/loading06.png',
duration:200,
}])
.width(this.imageWidth)
.height(this.imageHeight)
.iterations(-1)
//設(shè)置播放順序。false表示從第1張圖片播放到最后1張圖片；true表示從最后1張圖片播放到第1張圖片。

.fixedSize(true)
//設(shè)置圖片大小是否固定為組件大小。true表示圖片大小與組件大小一致，此時設(shè)置圖片的width 、height 、top 和left屬性是無效的。false表示每一張圖片的width 、height 、top和left屬性都要單獨(dú)設(shè)置。

.reverse(true)
//設(shè)置播放順序。false表示從第1張圖片播放到最后1張圖片；true表示從最后1張圖片播放到第1張圖片。

.fillMode(FillMode.None)
//設(shè)置動畫開始前和結(jié)束后的狀態(tài)，可選值參見FillMode說明

.state(AnimationStatus.Running)
//Running表示動畫處于播放狀態(tài)
}
}
}

（3）在主頁面實現(xiàn)自定義的 loading 動畫

首先導(dǎo)入自定義的 loading 動畫：

importloading1from'./loadingComponent_part1';

使用 CustomDialogController 自定義彈窗組件自定義一個彈窗用于在主頁面實現(xiàn) loading 動畫。

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md

代碼如下：

structIndex{
//用來繪制loading動畫的
//要打開在點擊事件中添加this.loading1.open();
//要關(guān)閉在點擊事件中添加this.loading1.close();
//通過CustomDialogController類顯示自定義彈窗。
privateloading1:CustomDialogController=newCustomDialogController({
builder:loadingProgress_part1(),
alignment:DialogAlignment.Center,
offset:({dx:0,dy:0}),
autoCancel:false,
customStyle:true
});
}

//用來繪制loading動畫的
@CustomDialog
structloadingProgress_part1{
controller:CustomDialogController;

build(){
Column(){
loading1({imageWidth:80,
imageHeight:80}).margin({top:350})

}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Center)
.backgroundColor(Color.White)
}

}

使用定時器 API 控制 loading 動畫：

Button(this.message1)
.margin({top:100})
.fontWeight(FontWeight.Normal)
.backgroundColor(Color.Green)//設(shè)置按鈕顏色
.onClick(()=>{

//開始繪制loading動畫
this.loading1.open();
//使用一個setTimeout定時器,setTimeout中第一個參數(shù)使用()=>{要執(zhí)行的函數(shù)}
//this.ocrDialog.close();是關(guān)閉loading動畫
setTimeout(()=>{this.loading1.close();},3000);

})

實現(xiàn)效果：

③使用 Progress 進(jìn)度條組件實現(xiàn) loading加載動畫開發(fā)步驟

Progress 進(jìn)度條組件：

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md

部分代碼如下：

structIndex{
@Statei:number=0

//aboutToAppear 函數(shù)在創(chuàng)建自定義組件的新實例后，在執(zhí)行其build函數(shù)之前執(zhí)行。
aboutToAppear(){
//定時器中的setInterval：重復(fù)調(diào)用一個函數(shù)，在每次調(diào)用之間具有固定的時間延遲。
setInterval(()=>{this.i=this.i+10},300);
}

build(){
...

Progress({value:this.i,type:ProgressType.Linear})
.width(200)
.margin({top:30})

Progress({value:this.i,total:150,type:ProgressType.ScaleRing})
.color(Color.Green).value(this.i).width(50)
.margin({top:30})
.style({strokeWidth:15,scaleCount:15,scaleWidth:5})
...
}

}

審核編輯：湯梓紅