介紹
主要介紹組件動(dòng)畫(huà)animation屬性設(shè)置。當(dāng)組件的某些通用屬性變化時(shí),可以通過(guò)屬性動(dòng)畫(huà)實(shí)現(xiàn)漸變效果,提升用戶體驗(yàn)。效果如圖所示:
說(shuō)明: 本Codelab使用的display接口處于mock階段,在預(yù)覽器上使用會(huì)顯示白屏現(xiàn)象,可選擇在真機(jī)或模擬器上運(yùn)行。
相關(guān)概念
- [屬性動(dòng)畫(huà)]:組件的某些通用屬性變化時(shí),可以通過(guò)屬性動(dòng)畫(huà)實(shí)現(xiàn)漸變效果,提升用戶體驗(yàn)。支持的屬性包括width、height、backgroundColor、opacity、scale、rotate、translate等。案例中自定義頭部組件的屬性動(dòng)畫(huà)設(shè)置主要涉及duration(動(dòng)畫(huà)時(shí)長(zhǎng))、tempo(動(dòng)畫(huà)速率)、delay(動(dòng)畫(huà)延時(shí))、curve(動(dòng)畫(huà)曲線)、palyMode(動(dòng)畫(huà)模式)和iterations(動(dòng)畫(huà)播放次數(shù))。
環(huán)境搭建
軟件要求
- [DevEco Studio]版本:DevEco Studio 3.1 Release。
- OpenHarmony SDK版本:API version 9。
硬件要求
- 開(kāi)發(fā)板類型:[潤(rùn)和RK3568開(kāi)發(fā)板]。
- OpenHarmony系統(tǒng):3.2 Release。
環(huán)境搭建
完成本篇Codelab我們首先要完成開(kāi)發(fā)環(huán)境的搭建,本示例以RK3568開(kāi)發(fā)板為例,參照以下步驟進(jìn)行:
- [獲取OpenHarmony系統(tǒng)版本]:標(biāo)準(zhǔn)系統(tǒng)解決方案(二進(jìn)制)。以3.2 Release版本為例:
- 搭建燒錄環(huán)境。
- [完成DevEco Device Tool的安裝]
- [完成RK3568開(kāi)發(fā)板的燒錄](méi)
- 搭建開(kāi)發(fā)環(huán)境。
- 開(kāi)始前請(qǐng)參考[工具準(zhǔn)備],完成DevEco Studio的安裝和開(kāi)發(fā)環(huán)境配置。
- 開(kāi)發(fā)環(huán)境配置完成后,請(qǐng)參考[使用工程向?qū)創(chuàng)建工程(模板選擇“Empty Ability”)。
- 工程創(chuàng)建完成后,選擇使用[真機(jī)進(jìn)行調(diào)測(cè)]。
- 鴻蒙開(kāi)發(fā)指導(dǎo)文檔:[
qr23.cn/FBD4cY
]
代碼結(jié)構(gòu)解讀
本篇Codelab只對(duì)核心代碼進(jìn)行講解,完整代碼可以直接從gitee獲取。
├──entry/src/main/ets // 代碼區(qū)
│ ├──common
│ │ ├──constants
│ │ │ ├──CommonConstants.ets // 公共常量類
│ │ │ └──RefreshConstants.ets // 下拉刷新常量類
│ │ └──utils
│ │ ├──DimensionUtil.ets // 屏幕適配工具類
│ │ └──GlobalContext.ets // 全局上下文工具類
│ ├──entryability
│ │ └──EntryAbility.ts // 程序入口類
│ ├──pages
│ │ ├──FileManagerIndex.ets // 文件管理Tab頁(yè)
│ │ └──TabIndex.ets // Tab管理頁(yè)
│ ├──view
│ │ ├──RefreshAnimHeader.ets // 動(dòng)畫(huà)刷新組件
│ │ ├──RefreshComponent.ets // 下拉刷新組件
│ │ └──RefreshDefaultHeader.ets // 默認(rèn)刷新組件
│ └──viewmodel
│ ├──AnimationModel.ets // 動(dòng)畫(huà)封裝模型
│ └──CardModel.ets // 頁(yè)簽封裝模型
└──entry/src/main/resources // 資源文件目錄
`HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿`
自定義下拉組件
自定義下拉刷新通過(guò)自定義List組件RefreshComponent實(shí)現(xiàn)。在List容器中添加自定義刷新頭部組件和其它的需要刷新部件,RefreshComponent提供了頭部樣式設(shè)置,刷新部件樣式設(shè)置和刷新回調(diào)方法設(shè)置。
// FileManagerIndex.ets
RefreshComponent({
headerStyle: RefreshHeaderStyle.CLOUD, // 頭部樣式設(shè)置
itemLayout: () = > this.ContentBody(), // 刷新部件樣式
displayHeight: (
px2vp(this.deviceDisplay.height) - DimensionUtil.getVp($r('app.float.file_index_title_height'))),
onRefresh: () = > { // 刷新回調(diào)方法
......
}
})
頭部樣式設(shè)置
本Codelab提供了DEFAULT默認(rèn)刷新樣式和CLOUD云朵動(dòng)畫(huà)刷新樣式設(shè)置,在RefreshComponent組件初始化時(shí),判斷當(dāng)前刷新樣式進(jìn)行渲染。// RefreshComponent.ets if (this.headerStyle === RefreshHeaderStyle.DEFAULT) { RefreshDefaultHeader().height(RefreshConstants.REFRESH_HEADER_HEIGHT) } else if (this.headerStyle === RefreshHeaderStyle.CLOUD) { RefreshAnimHeader().height(RefreshConstants.REFRESH_HEADER_HEIGHT) }
刷新部件樣式
刷新部件樣式itemLayout為嵌入RefreshComponent組件中的元素,通過(guò)@BuilderParam裝飾符定義,可根據(jù)具體業(yè)務(wù)需求,當(dāng)前為默認(rèn)的Image組件樣式。// FileManagerIndex.ets @Builder ContentBody() { Image($r('app.media.bg_content')) .width(CommonConstants.FULL_LENGTH) .height(DimensionUtil.getVp($r('app.float.content_height'))) .objectFit(ImageFit.Fill) }
刷新回調(diào)方法設(shè)置
刷新回調(diào)方法是RefreshComponent提供的當(dāng)下拉一定范圍距離松手后,調(diào)用頁(yè)面刷新的方法。實(shí)現(xiàn)步驟是:
1.設(shè)置RefreshComponent刷新組件state狀態(tài)的更新。// RefreshComponent.ets @Consume(RefreshConstants.REFRESH_STATE_TAG) @Watch('onStateChanged') state: RefreshState; @BuilderParam itemLayout: () = > void; private onStateChanged() { switch (this.state) { case RefreshState.REFRESHING: if (this.onRefresh) { this.onRefresh(); } break; ...... } }
2.監(jiān)聽(tīng)RefreshComponent組件的觸摸事件,當(dāng)手指松開(kāi)且List組件下拉距離超出可刷新距離時(shí),修改當(dāng)前狀態(tài)為REFRESHING,回調(diào)“onStateChanged”方法觸發(fā)外部傳入的onRefresh事件。
// RefreshComponent.ets case TouchType.Move: if (this.state === RefreshState.DRAGGING && this.listController.currentOffset().yOffset <= -RefreshConstants.REFRESH_EFFECTIVE_HEIGHT) { this.state = RefreshState.DRAGGING_REFRESHABLE; } break; case TouchType.Up: if (this.state === RefreshState.DRAGGING_REFRESHABLE) { this.headerOffset = 0; this.state = RefreshState.REFRESHING; } break;
3.本Codelab中onRefresh事件沒(méi)有做相關(guān)刷新動(dòng)作,只做了模擬延時(shí)操作,開(kāi)發(fā)者可以自行加入真實(shí)網(wǎng)絡(luò)加載動(dòng)作。
// RefreshComponent.ets onRefresh: () = > { setTimeout(() = > { this.state = RefreshState.COMPLETE; }, CommonConstants.REFRESH_DEFAULT_TIMEOUT); }
自定義刷新動(dòng)畫(huà)
本Codelab中自定義刷新是5個(gè)圖片的組合動(dòng)畫(huà)效果。
- 每個(gè)Image通過(guò)iconItem參數(shù)分別設(shè)置各自的x軸偏移量和延時(shí)播放的屬性動(dòng)畫(huà)效果。
// RefreshAnimHeader.ets @Builder AttrAnimIcons(iconItem: ClassifyModel) { Image(iconItem.imgRes) .width(px2vp(DimensionUtil.adaptDimension(this.iconWidth))) .position({ x: iconItem.posX }) .objectFit(ImageFit.Contain) .animation({ duration: CommonConstants.REFRESH_HEADER_ITEM_ANIM_DURATION, tempo: CommonConstants.REFRESH_HEADER_ITEM_ANIM_TEMPO, delay: iconItem.delay, curve: Curve.Linear, playMode: PlayMode.Alternate, iterations: CommonConstants.REFRESH_HEADER_ITEM_ANIM_ITERATIONS }) }
- 監(jiān)聽(tīng)RefreshComponent刷新組件state狀態(tài)的變化,當(dāng)前狀態(tài)為REFRESHING狀態(tài)時(shí),啟動(dòng)動(dòng)畫(huà)效果。
// RefreshAnimHeader.ets @Consume(RefreshConstants.REFRESH_STATE_TAG) @Watch('onStateCheck') state: RefreshState; @State iconWidth: number = CommonConstants.REFRESH_HEADER_ITEM_DEFAULT_WIDTH; private onStateCheck() { if (this.state === RefreshState.REFRESHING) { this.iconWidth = CommonConstants.REFRESH_HEADER_ITEM_SCALE_WIDTH; } else { this.iconWidth = CommonConstants.REFRESH_HEADER_ITEM_DEFAULT_WIDTH; } }
審核編輯 黃宇
-
HarmonyOS
+關(guān)注
關(guān)注
79文章
1946瀏覽量
29740 -
OpenHarmony
+關(guān)注
關(guān)注
25文章
3548瀏覽量
15743 -
鴻蒙OS
+關(guān)注
關(guān)注
0文章
188瀏覽量
4336
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論