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

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

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

使用 ImageAnimator 幀動(dòng)畫組件實(shí)現(xiàn)一個(gè)自定義 loading 加載動(dòng)畫

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

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

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

OpenHarmony 版本：OpenHarmony3.2 Beta5

IDE：DevEco Studio 3.1.0.200

SDK：API9（3.2.10.6）

效果演示：



①涉及到的知識(shí)點(diǎn)

ImageAnimator 幀動(dòng)畫組件：

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

定時(shí)器 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 幀動(dòng)畫組件自定義 loading 動(dòng)畫開發(fā)步驟

代碼如下：

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

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

組成自定義的 loading 動(dòng)畫的圖片幀，詳情請(qǐng)見(jiàn)文末提供的 demo 工程。

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

（2）用幀動(dòng)畫組件將動(dòng)畫封裝成一個(gè)自定義組件

ImageAnimator 幀動(dòng)畫組件：

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,//每一幀圖片的播放時(shí)長(zhǎng)，單位毫秒
},
{
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í)設(shè)置圖片的width 、height 、top 和left屬性是無(wú)效的。false表示每一張圖片的width 、height 、top和left屬性都要單獨(dú)設(shè)置。

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

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

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

（3）在主頁(yè)面實(shí)現(xiàn)自定義的 loading 動(dòng)畫

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

importloading1from'./loadingComponent_part1';

使用 CustomDialogController 自定義彈窗組件自定義一個(gè)彈窗用于在主頁(yè)面實(shí)現(xiàn) loading 動(dòng)畫。

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

代碼如下：

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

//用來(lái)繪制loading動(dòng)畫的
@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)
}

}

使用定時(shí)器 API 控制 loading 動(dòng)畫：

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

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

})

實(shí)現(xiàn)效果：

③使用 Progress 進(jìn)度條組件實(shí)現(xiàn) loading加載動(dòng)畫開發(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)建自定義組件的新實(shí)例后，在執(zhí)行其build函數(shù)之前執(zhí)行。
aboutToAppear(){
//定時(shí)器中的setInterval：重復(fù)調(diào)用一個(gè)函數(shù)，在每次調(diào)用之間具有固定的時(shí)間延遲。
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})
...
}

}

審核編輯：湯梓紅