寶安區(qū)住房和建設(shè)局官方網(wǎng)站,北京軟件外包公司名單,wordpress怎么建表格,網(wǎng)絡(luò)運(yùn)營(yíng)者不得違反法律本文聚焦基礎(chǔ)屬性動(dòng)畫(huà)#xff08;animateTo#xff09;和頁(yè)面轉(zhuǎn)場(chǎng)動(dòng)畫(huà)#xff08;transition#xff09;#xff0c;通過(guò)「列表項(xiàng)滑動(dòng)刪除 頁(yè)面切換漸變」的實(shí)戰(zhàn)案例#xff0c;帶大家掌握動(dòng)畫(huà)開(kāi)發(fā)核心邏輯#xff5e; 一、核心認(rèn)知#xff1a;動(dòng)畫(huà)的應(yīng)用場(chǎng)景與核心 …本文聚焦基礎(chǔ)屬性動(dòng)畫(huà)animateTo和頁(yè)面轉(zhuǎn)場(chǎng)動(dòng)畫(huà)transition通過(guò)「列表項(xiàng)滑動(dòng)刪除 頁(yè)面切換漸變」的實(shí)戰(zhàn)案例帶大家掌握動(dòng)畫(huà)開(kāi)發(fā)核心邏輯一、核心認(rèn)知?jiǎng)赢?huà)的應(yīng)用場(chǎng)景與核心 API1. 應(yīng)用場(chǎng)景組件交互反饋如按鈕點(diǎn)擊縮放、列表項(xiàng)操作動(dòng)畫(huà)頁(yè)面切換過(guò)渡如漸變、滑動(dòng)進(jìn)入數(shù)據(jù)變化可視化如進(jìn)度條加載、數(shù)字滾動(dòng)引導(dǎo)用戶注意力如彈窗彈出、通知提示2. 核心 API屬性動(dòng)畫(huà)animateTo聲明式動(dòng)畫(huà)無(wú)需手動(dòng)控制動(dòng)畫(huà)幀轉(zhuǎn)場(chǎng)動(dòng)畫(huà)transition組件轉(zhuǎn)場(chǎng)配置、pageTransition頁(yè)面轉(zhuǎn)場(chǎng)配置關(guān)鍵參數(shù)duration時(shí)長(zhǎng)、curve動(dòng)畫(huà)曲線、delay延遲執(zhí)行二、屬性動(dòng)畫(huà)animateTo 基礎(chǔ)用法屬性動(dòng)畫(huà)通過(guò)animateTo函數(shù)包裹組件屬性修改邏輯自動(dòng)實(shí)現(xiàn)動(dòng)畫(huà)過(guò)渡支持位置、透明度、尺寸等常見(jiàn)屬性1. 基礎(chǔ)效果示例控制透明度、尺寸、位置import { animateTo, Curve } from ohos.ui.animation; Component struct AnimateToBasicDemo { State opacity: number 1; State scale: number 1; State offsetX: number 0; build() { Column({ space: 30 }) .width(100%) .height(100%) .padding(30) .backgroundColor(#f5f5f5) { // 動(dòng)畫(huà)目標(biāo)組件 Text(屬性動(dòng)畫(huà)演示) .fontSize(24) .fontWeight(FontWeight.Bold) .opacity(this.opacity) .scale({ x: this.scale, y: this.scale }) .translate({ x: this.offsetX }) .backgroundColor(#2f54eb) .color(#ffffff) .padding(20) .borderRadius(12) // 控制按鈕組 Row({ space: 20 }) { Button(透明度變化) .type(ButtonType.Capsule) .onClick(() { animateTo({ duration: 800, // 動(dòng)畫(huà)時(shí)長(zhǎng)毫秒 curve: Curve.EaseInOut // 動(dòng)畫(huà)曲線緩進(jìn)緩出 }, () { this.opacity this.opacity 1 ? 0.3 : 1; }); }) Button(縮放效果) .type(ButtonType.Capsule) .onClick(() { animateTo({ duration: 500 }, () { this.scale this.scale 1 ? 1.2 : 1; }); }) Button(水平位移) .type(ButtonType.Capsule) .onClick(() { animateTo({ duration: 1000 }, () { this.offsetX this.offsetX 0 ? 100 : 0; }); }) } } } }2. 核心參數(shù)說(shuō)明duration動(dòng)畫(huà)時(shí)長(zhǎng)默認(rèn) 300 毫秒數(shù)值越大動(dòng)畫(huà)越慢curve動(dòng)畫(huà)曲線Curve.Linear勻速、Curve.EaseIn緩入、Curve.EaseOut緩出、Curve.EaseInOut緩進(jìn)緩出delay延遲執(zhí)行時(shí)間默認(rèn) 0 毫秒可實(shí)現(xiàn)動(dòng)畫(huà)排隊(duì)效果回調(diào)函數(shù)包裹需要?jiǎng)赢?huà)的屬性修改邏輯屬性變化會(huì)自動(dòng)生成過(guò)渡動(dòng)畫(huà)。三、轉(zhuǎn)場(chǎng)動(dòng)畫(huà)transition 組件用法轉(zhuǎn)場(chǎng)動(dòng)畫(huà)用于組件顯示 / 隱藏、頁(yè)面切換時(shí)的過(guò)渡效果鴻蒙 5.0 支持通過(guò)transition直接配置無(wú)需復(fù)雜邏輯1. 頁(yè)面切換漸變效果在main_pages.json注冊(cè)的頁(yè)面中通過(guò)pageTransition配置全局頁(yè)面轉(zhuǎn)場(chǎng)// pages/FirstPage.ets首頁(yè) Entry Component struct FirstPage { build() { Column({ space: 30 }) .width(100%) .height(100%) .padding(30) .backgroundColor(#f5f5f5) { Text(首頁(yè)) .fontSize(32) .fontWeight(FontWeight.Bold) Button(跳轉(zhuǎn)到第二頁(yè)) .type(ButtonType.Capsule) .width(200) .height(50) .backgroundColor(#2f54eb) .onClick(() { router.pushUrl({ url: pages/SecondPage }); }) } } // 頁(yè)面轉(zhuǎn)場(chǎng)配置漸變效果 pageTransition() { PageTransition() .enter(fade, { duration: 800, curve: Curve.EaseInOut }) // 進(jìn)入漸變 .exit(fade, { duration: 800, curve: Curve.EaseInOut }) // 退出漸變 } } // pages/SecondPage.ets第二頁(yè) Entry Component struct SecondPage { build() { Column({ space: 30 }) .width(100%) .height(100%) .padding(30) .backgroundColor(#f5f5f5) { Text(第二頁(yè)) .fontSize(32) .fontWeight(FontWeight.Bold) Button(返回首頁(yè)) .type(ButtonType.Capsule) .width(200) .height(50) .backgroundColor(#ff4d4f) .onClick(() { router.backUrl(); }) } } // 復(fù)用漸變轉(zhuǎn)場(chǎng)配置 pageTransition() { PageTransition() .enter(fade, { duration: 800, curve: Curve.EaseInOut }) .exit(fade, { duration: 800, curve: Curve.EaseInOut }) } }2. 組件轉(zhuǎn)場(chǎng)列表項(xiàng)滑動(dòng)刪除前置組件顯示 / 隱藏時(shí)的轉(zhuǎn)場(chǎng)效果可結(jié)合if或visibility控制// 組件轉(zhuǎn)場(chǎng)示例漸變位移 Text(可隱藏組件) .transition([ TransitionEffect.fade({ duration: 500 }), // 漸變 TransitionEffect.slide({ direction: SlideDirection.Bottom, duration: 500 }) // 底部滑入滑出 ]) .visibility(this.isShow ? Visibility.Visible : Visibility.Hidden)四、實(shí)戰(zhàn)整合列表項(xiàng)滑動(dòng)刪除 頁(yè)面漸變1. 列表項(xiàng)滑動(dòng)刪除屬性動(dòng)畫(huà)核心應(yīng)用import { animateTo, Curve } from ohos.ui.animation; import router from ohos.router; Component struct SlideDeleteList { State taskList: string[] [學(xué)習(xí)屬性動(dòng)畫(huà), 實(shí)現(xiàn)轉(zhuǎn)場(chǎng)效果, 開(kāi)發(fā)滑動(dòng)刪除, 整合頁(yè)面漸變]; State deleteOffsetX: number[] this.taskList.map(() 0); // 每個(gè)列表項(xiàng)的位移 // 滑動(dòng)刪除動(dòng)畫(huà) handleSwipe(index: number, offsetX: number) { // 限制滑動(dòng)范圍-200到0200為刪除按鈕寬度 if (offsetX -200) offsetX -200; if (offsetX 0) offsetX 0; this.deleteOffsetX[index] offsetX; } // 刪除列表項(xiàng)帶動(dòng)畫(huà) deleteItem(index: number) { animateTo({ duration: 500, curve: Curve.EaseOut }, () { this.deleteOffsetX[index] -this.taskList.length * 200; // 快速滑出屏幕 }, () { this.taskList.splice(index, 1); this.deleteOffsetX.splice(index, 1); // 移除對(duì)應(yīng)位移狀態(tài) }); } build() { Column({ space: 15 }) .width(100%) .padding(30) .backgroundColor(#f5f5f5) { Text(滑動(dòng)刪除列表) .fontSize(28) .fontWeight(FontWeight.Bold) .marginBottom(20) List({ space: 10 }) { ForEach(this.taskList, (task, index) { ListItem() { Stack() { // 刪除按鈕默認(rèn)隱藏在右側(cè) Button(刪除) .width(200) .height(100%) .backgroundColor(#ff4d4f) .alignContent(FlexAlign.Center) .position({ x: 100%, left: -200 }) // 列表項(xiàng)內(nèi)容可滑動(dòng) Text(task) .width(100%) .height(80) .lineHeight(80) .padding(20) .backgroundColor(#ffffff) .borderRadius(12) .translate({ x: this.deleteOffsetX[index] }) .onTouch((e) { if (e.type TouchType.MOVE) { // 監(jiān)聽(tīng)滑動(dòng)事件更新位移 this.handleSwipe(index, e.touches[0].x - e.touches[0].startX); } else if (e.type TouchType.END) { // 滑動(dòng)距離不足100回彈 if (this.deleteOffsetX[index] -100) { animateTo({ duration: 300 }, () { this.deleteOffsetX[index] 0; }); } } }) } } }) } Button(跳轉(zhuǎn)到詳情頁(yè)漸變效果) .type(ButtonType.Capsule) .width(250) .height(50) .backgroundColor(#2f54eb) .marginTop(30) .onClick(() { router.pushUrl({ url: pages/DetailPage }); }) } } } // 詳情頁(yè)復(fù)用頁(yè)面漸變轉(zhuǎn)場(chǎng) Entry Component struct DetailPage { build() { Column() .width(100%) .height(100%) .backgroundColor(#f5f5f5) .justifyContent(FlexAlign.Center) { Text(詳情頁(yè)) .fontSize(32) .fontWeight(FontWeight.Bold) Button(返回列表頁(yè)) .type(ButtonType.Capsule) .width(200) .height(50) .backgroundColor(#ff4d4f) .marginTop(30) .onClick(() { router.backUrl(); }) } } pageTransition() { PageTransition() .enter(fade, { duration: 800, curve: Curve.EaseInOut }) .exit(fade, { duration: 800, curve: Curve.EaseInOut }) } }2. 核心效果說(shuō)明列表項(xiàng)滑動(dòng)通過(guò)onTouch監(jiān)聽(tīng)滑動(dòng)事件animateTo控制translate位移實(shí)現(xiàn)滑動(dòng)露出刪除按鈕刪除動(dòng)畫(huà)點(diǎn)擊刪除后列表項(xiàng)快速滑出屏幕動(dòng)畫(huà)結(jié)束后移除數(shù)據(jù)頁(yè)面漸變通過(guò)pageTransition配置fade效果跳轉(zhuǎn)和返回時(shí)均有平滑漸變過(guò)渡。五、實(shí)戰(zhàn)踩坑指南1. 動(dòng)畫(huà)不生效確保屬性是「響應(yīng)式狀態(tài)」必須用State/Link等裝飾器普通變量修改無(wú)法觸發(fā)動(dòng)畫(huà)動(dòng)畫(huà)函數(shù)包裹正確animateTo的回調(diào)函數(shù)內(nèi)必須直接修改屬性不可嵌套異步操作版本適配HarmonyOS 5.0 支持PageTransition的fade/slide簡(jiǎn)化配置低版本需手動(dòng)配置TransitionEffect。2. 滑動(dòng)刪除效果異常限制滑動(dòng)范圍避免滑動(dòng)過(guò)度導(dǎo)致 UI 錯(cuò)亂建議限制在刪除按鈕寬度范圍內(nèi)狀態(tài)同步deleteOffsetX數(shù)組需與列表數(shù)據(jù)一一對(duì)應(yīng)刪除數(shù)據(jù)時(shí)同步移除對(duì)應(yīng)位移狀態(tài)。3. 轉(zhuǎn)場(chǎng)效果卡頓減少動(dòng)畫(huà)元素避免同時(shí)對(duì)多個(gè)復(fù)雜組件添加動(dòng)畫(huà)簡(jiǎn)化動(dòng)畫(huà)邏輯優(yōu)先使用系統(tǒng)提供的fade/slide等基礎(chǔ)效果自定義動(dòng)畫(huà)避免復(fù)雜計(jì)算。加入班級(jí)學(xué)習(xí)鴻蒙開(kāi)發(fā)