鴻蒙 6.1 API 23 開發(fā)坑系列篇 6ohos.animator 動(dòng)畫器坑——API 12 廢棄 onframe/createAnimator 遷移 onFrame 駝峰 getUIContext().createAnimator 根因本文是「鴻蒙 6.1 API 23 開發(fā)坑系列」第 6 篇ArkUI 系第 6 篇。本篇講kit.ArkUI的Animator as animatornamespaceAPI 6鴻蒙 6.1 API 23 基座——幀動(dòng)畫AnimatorResultonFrame/onFinish/onCancel/onRepeat回調(diào) play/pause/resume/cancel/reverse控制。鴻蒙坑根因① import 真路徑是kit.ArkUI不是ohos.animator鴻蒙 6.1 統(tǒng)一入口Animator是 namespace 必須import { Animator as animator }起 alias② API 12 廢棄全小寫onframe/onfinish/oncancel/onrepeat遷移到駝峰onFrame/onFinish/onCancel/onRepeat③animator.create()/createAnimator()廢棄遷移到this.getUIContext().createAnimator()④AnimatorResult必須持有引用避免析構(gòu)aboutToDisappear要cancel()釋放避免循環(huán)依賴內(nèi)存泄漏⑤iterations支持-1無限播放0不播放正數(shù)N播N次。一、開篇鴻蒙 animator 不是 React requestAnimationFrame是「AnimatorResult 幀回調(diào) 持引用」你寫 React 時(shí)幀動(dòng)畫用requestAnimationFrame回調(diào)傳 timestamp自己插值// React requestAnimationFrame回調(diào)傳 timestamp自己算插值 let start: number const animate (ts: number) { if (!start) start ts const progress (ts - start) / 2000 // 自己算 progress0~1 element.style.width ${progress * 300}px // 自己改 DOM if (progress 1) requestAnimationFrame(animate) // 自己遞歸下一幀 } requestAnimationFrame(animate) // ? React 自己管插值 遞歸 取消你寫鴻蒙 ArkTS 時(shí)幀動(dòng)畫用AnimatorResultgetUIContext().createAnimator()造onFrame回調(diào)自動(dòng)插值play/cancel控制// ArkTS AnimatorResultonFrame 回調(diào)自動(dòng)插值play/cancel 控制 import { Animator as animator, AnimatorOptions, AnimatorResult } from kit.ArkUI // ? 真路徑 kit.ArkUI 不是 ohos.animator const options: AnimatorOptions { duration: 2000, easing: ease, fill: forwards, direction: normal, iterations: 1, begin: 0, end: 300 // ? begin/end 定義插值范圍onFrame 自動(dòng)算 progress } const result: AnimatorResult this.getUIContext().createAnimator(options) // ? 不是廢棄的 animator.create() result.onFrame (progress: number) { // ? 駝峰 onFrameAPI 12不是廢棄的 onframe this.width progress // ? progress 自動(dòng)從 begin 插到 end不用自己算 } result.play() // ? play() 啟動(dòng)cancel() 取消不用自己遞歸 // 鴻蒙坑根因onFrame 駝峰不是廢棄 onframecreateAnimator 走 getUIContext() 不是 animator.create()React requestAnimationFrame vs 鴻蒙 AnimatorResult 的區(qū)別React 把幀動(dòng)畫當(dāng)瀏覽器 APIrequestAnimationFrame(cb)回調(diào)傳 timestamp自己算插值 遞歸下一幀 取消用cancelAnimationFrameArkTS 把幀動(dòng)畫當(dāng) ArkUI 命名空間對(duì)象getUIContext().createAnimator(options)造AnimatorResultonFrame回調(diào)自動(dòng)從begin插到endplay/pause/resume/cancel/reverse控制。根因不是瀏覽器 API 是 ArkUI 命名空間對(duì)象——鴻蒙onFrame回調(diào)的progress自動(dòng)插值不用自己算 timestamp但要持有AnimatorResult引用避免析構(gòu)aboutToDisappear要cancel()釋放避免循環(huán)依賴內(nèi)存泄漏。二、根因鴻蒙 animator 的五個(gè)綁定機(jī)制鴻蒙kit.ArkUI的Animator as animatornamespaceAPI 6核心導(dǎo)出AnimatorOptions/AnimatorResult/SimpleAnimatorOptions類型 廢棄animator.create()/createAnimator()頂層函數(shù)。綁定機(jī)制來自五重根因。機(jī)制 1import 真路徑是 kit.ArkUI 不是 ohos.animator——Animator namespace as animator alias鴻蒙坑根因import 真路徑是kit.ArkUI不是舊文檔的ohos.animator且Animator是 namespace 必須as animator起 alias// ? 鴻蒙坑import ohos.animator 是舊文檔路徑鴻蒙 6.1 統(tǒng)一 kit.ArkUI 入口 import animator from ohos.animator // ? ohos.animator 是舊文檔路徑鴻蒙 6.1 統(tǒng)一 kit.ArkUI // ? import { animator } from kit.ArkUI // ? namespace 真名是 Animator 不是 animator // ? 正確用法import { Animator as animator } from kit.ArkUI——namespace alias import { Animator as animator, AnimatorOptions, AnimatorResult } from kit.ArkUI // ? 真路徑 kit.ArkUI // 鴻蒙坑根因真路徑 kit.ArkUI 不是 ohos.animatorAnimator namespace 必須 as animator aliasimport 真路徑坑根因鴻蒙 6.1 把 ArkUI 所有子模塊統(tǒng)一到kit.ArkUI入口animator/modifier/observer/node/UIContext都從kit.ArkUIimport舊文檔的ohos.animator是廢棄路徑。Animator是 namespace不是 default export直接import { animator }會(huì)報(bào)has no exported member animatornamespace 真名是Animator大寫 A必須import { Animator as animator }起 alias小寫animator跟舊文檔習(xí)慣一致。鴻蒙坑ohos.animator舊路徑編譯錯(cuò)Cannot find module{ animator }命名錯(cuò)has no exported member animator——真路徑kit.ArkUInamespace 真名Animator必須as animatoralias。機(jī)制 2API 12 廢棄全小寫 onframe/onfinish/oncancel/onrepeat——遷移到駝峰 onFrame/onFinish/onCancel/onRepeat鴻蒙坑根因API 12 廢棄全小寫回調(diào)名遷移到駝峰// ? 鴻蒙坑API 12 廢棄全小寫 onframe/onfinish/oncancel/onrepeat import { Animator as animator, AnimatorOptions, AnimatorResult } from kit.ArkUI const result: AnimatorResult this.getUIContext().createAnimator({ duration: 2000, begin: 0, end: 300 }) // ? 廢棄 APIAPI 6~11全小寫 onframe/onfinish/oncancel/onrepeat result.onframe (progress: number) { } // ? API 12 廢棄駝峰 onFrame result.onfinish () { } // ? API 12 廢棄駝峰 onFinish result.oncancel () { } // ? API 12 廢棄駝峰 onCancel result.onrepeat () { } // ? API 12 廢棄駝峰 onRepeat // ? 正確用法API 12 駝峰 onFrame/onFinish/onCancel/onRepeat result.onFrame (progress: number) { } // ? 駝峰 onFrameAPI 12 result.onFinish () { } // ? 駝峰 onFinish result.onCancel () { } // ? 駝峰 onCancel result.onRepeat () { } // ? 駝峰 onRepeat // 鴻蒙坑根因API 12 廢棄全小寫 onframe遷移到駝峰 onFrame首字母大寫廢棄回調(diào)名坑根因鴻蒙 API 6~11 用全小寫onframe/onfinish/oncancel/onrepeat跟 JS 習(xí)慣一致API 12 廢棄遷移到駝峰onFrame/onFinish/onCancel/onRepeat首字母大寫跟 ArkTS 其他回調(diào)統(tǒng)一。鴻蒙坑用廢棄全小寫onframe不會(huì)編譯錯(cuò)是 deprecated 不是 removed但會(huì)有 IDE 警告Since API version 12, use onFrame instead且后續(xù)版本可能真 removed——新代碼必須駝峰onFrame。ReactonAnimationEnd/onTransitionEnd本就是駝峰鴻蒙 API 12 后跟前端習(xí)慣統(tǒng)一了。機(jī)制 3animator.create()/createAnimator() 廢棄——遷移到 getUIContext().createAnimator()鴻蒙坑根因animator.create()/createAnimator()頂層函數(shù)廢棄遷移到this.getUIContext().createAnimator()// ? 鴻蒙坑animator.create()/createAnimator() 廢棄API 12 廢棄 import { Animator as animator, AnimatorOptions, AnimatorResult } from kit.ArkUI const options: AnimatorOptions { duration: 2000, begin: 0, end: 300 } // ? 廢棄 APIAPI 6~11animator.create() / createAnimator() 頂層函數(shù) const result1: AnimatorResult animator.create(options) // ? API 12 廢棄遷移到 getUIContext().createAnimator() const result2: AnimatorResult animator.createAnimator(options) // ? API 12 廢棄同 create // ? 正確用法this.getUIContext().createAnimator()——UI 上下文方法API 12 const result: AnimatorResult this.getUIContext().createAnimator(options) // ? 走 UIContext 不是頂層函數(shù) // 鴻蒙坑根因animator.create() 廢棄遷移到 getUIContext().createAnimator()UI 上下文方法廢棄 create 坑根因鴻蒙 API 6~11 用animator.create(options)/animator.createAnimator(options)頂層函數(shù)造AnimatorResultAPI 12 廢棄遷移到this.getUIContext().createAnimator(options)UIContext的方法跟getUIContext().getKeyboardAvoidMode()等統(tǒng)一走 UI 上下文。鴻蒙坑用廢棄animator.create()不會(huì)編譯錯(cuò)deprecated但 IDE 警告Since API version 12, use getUIContext().createAnimator() instead且廢棄的頂層函數(shù)沒有 UI 上下文綁定無法走組件級(jí) UI 線程安全——新代碼必須this.getUIContext().createAnimator()。getUIContext()是Component組件的內(nèi)置方法篇 4 講過UIContext坑返回當(dāng)前組件的 UI 上下文。機(jī)制 4AnimatorResult 必須持有引用避免析構(gòu)——aboutToDisappear 要 cancel() 釋放鴻蒙坑根因AnimatorResult必須持有引用避免動(dòng)畫過程中被析構(gòu)aboutToDisappear要cancel()釋放避免循環(huán)依賴內(nèi)存泄漏// ? 鴻蒙坑AnimatorResult 不持引用會(huì)被析構(gòu)aboutToDisappear 不 cancel 內(nèi)存泄漏 import { Animator as animator, AnimatorOptions, AnimatorResult } from kit.ArkUI Entry Component struct Index { // ? 不持引用局部變量造的 AnimatorResult 在方法結(jié)束后被析構(gòu)動(dòng)畫中斷 demonstrateBad() { const result: AnimatorResult this.getUIContext().createAnimator({ duration: 2000, begin: 0, end: 300 }) result.onFrame (progress: number) { this.width progress } result.play() // ? result 是局部變量方法結(jié)束后被析構(gòu)動(dòng)畫中斷 } // ? 正確用法持有 AnimatorResult 引用State 或 private 字段aboutToDisappear cancel() 釋放 private animatorResult: AnimatorResult | null null // ? 持引用避免析構(gòu) demonstrateGood() { this.animatorResult this.getUIContext().createAnimator({ duration: 2000, begin: 0, end: 300 }) this.animatorResult.onFrame (progress: number) { this.width progress } this.animatorResult.play() // ? this.animatorResult 持引用動(dòng)畫不被析構(gòu) } aboutToDisappear() { this.animatorResult?.cancel() // ? cancel() 取消動(dòng)畫釋放 AnimatorResult this.animatorResult null // ? 清空引用避免循環(huán)依賴導(dǎo)致內(nèi)存泄漏 } } // 鴻蒙坑根因AnimatorResult 必須持引用避免析構(gòu)aboutToDisappear cancel() 釋放避免內(nèi)存泄漏持有引用坑根因鴻蒙AnimatorResult對(duì)象通過回調(diào)捕獲了自定義組件對(duì)象onFrame里this.width progress的this是組件形成循環(huán)引用組件 → AnimatorResult → 回調(diào) → 組件。如果不持有AnimatorResult引用局部變量方法結(jié)束析構(gòu)動(dòng)畫中斷如果持有但aboutToDisappear不cancel()釋放循環(huán)引用導(dǎo)致組件銷毀后 AnimatorResult 仍持引用內(nèi)存泄漏。鴻蒙坑ReactrequestAnimationFrame的回調(diào)也捕獲this但瀏覽器 GC 能處理循環(huán)引用鴻蒙 ArkTS 的 GC 對(duì)循環(huán)引用處理弱必須手動(dòng)cancel() 清空引用——跟 ReactcancelAnimationFrame在componentWillUnmount清理同理。機(jī)制 5iterations 支持 -1 無限播放——0 不播放正數(shù) N 播 N 次鴻蒙坑根因AnimatorOptions.iterations支持-1無限播放0不播放正數(shù)N播N次// ? iterations 語義-1 無限播放0 不播放正數(shù) N 播 N 次 import { Animator as animator, AnimatorOptions, AnimatorResult } from kit.ArkUI const infinite: AnimatorOptions { duration: 1000, iterations: -1, begin: 0, end: 200 } // ? -1 無限播放 const once: AnimatorOptions { duration: 1000, iterations: 1, begin: 0, end: 200 } // ? 1 播 1 次 const twice: AnimatorOptions { duration: 1000, iterations: 2, begin: 0, end: 200 } // ? 2 播 2 次 const zero: AnimatorOptions { duration: 1000, iterations: 0, begin: 0, end: 200 } // ? 0 不播放play() 無效 // ? direction: alternate 反向交替跟 iterations-1 配合無限來回 const alternate: AnimatorOptions { duration: 1000, iterations: -1, direction: alternate, // ? alternate 反向交替無限來回 begin: 0, end: 200 } // 鴻蒙坑根因iterations -1 無限播放0 不播放正數(shù) N 播 N 次alternate 反向交替iterations 語義坑根因AnimatorOptions.iterations是number類型語義-1無限播放直到cancel()或組件銷毀0不播放play()調(diào)了也無效相當(dāng)于禁用正數(shù)N播N次播完觸發(fā)onFinish。配合direction: alternate反向交替奇數(shù)次正向偶數(shù)次反向可做無限來回動(dòng)畫。鴻蒙坑React CSSanimation-iteration-count: infinite是字符串infinite鴻蒙iterations: -1是數(shù)字-1不是字符串infiniteReact0是播放 0 次禁用鴻蒙0也是不播放但鴻蒙-1是無限React CSS 不支持負(fù)數(shù)。三、真機(jī)配圖鴻蒙 ohos.animator 動(dòng)畫器坑——import 真路徑 onFrame 駝峰 createAnimator真機(jī)配圖展示鴻蒙 ohos.animator 動(dòng)畫器坑初始態(tài)鴻蒙 6.1 ohos.animator 動(dòng)畫器坑標(biāo)題4 個(gè)驗(yàn)證按鈕① import 路徑真名 / ② onFrame 駝峰新 API / ③ iterations-1 無限播放 / ④ cancel reverse動(dòng)畫狀態(tài)animatorStatus 未跑 frameValue/frameCount/finish/repeat/cancel 計(jì)數(shù)要點(diǎn)說明 7 條import 真路徑態(tài)點(diǎn)擊「① 驗(yàn)證 import 路徑真名」按鈕顯示「? import { Animator as animator } from kit.ArkUI——真路徑不是 ohos.animator」——import 真路徑 kit.ArkUI 驗(yàn)證onFrame 駝峰新 API 態(tài)點(diǎn)擊「② 驗(yàn)證 onFrame 駝峰新 API」按鈕顯示「? onFrame 駝峰 API 驗(yàn)證getUIContext().createAnimator() onFrame不是廢棄 onframe」 動(dòng)畫狀態(tài) frameValue 在變化 frameCount 在累加——onFrame 駝峰 getUIContext().createAnimator() 驗(yàn)證iterations-1 無限播放態(tài)點(diǎn)擊「③ 驗(yàn)證 iterations-1 無限播放」按鈕顯示「? iterations-1 無限播放驗(yàn)證alternate 反向交替 play/pause/resume」 frameValue 在變化——iterations-1 無限播放 alternate 反向交替驗(yàn)證cancel reverse 態(tài)點(diǎn)擊「④ 驗(yàn)證 cancel reverse」按鈕顯示「? cancel reverse 驗(yàn)證cancel() 取消 reverse() 反向播放方法」 動(dòng)畫狀態(tài)——cancel() 取消 reverse() 反向播放驗(yàn)證四、真解法鴻蒙 ohos.animator 的四個(gè)場景場景 1import { Animator as animator } from kit.ArkUI onFrame 駝峰——90% 場景首選基礎(chǔ)幀動(dòng)畫用import { Animator as animator } from kit.ArkUIthis.getUIContext().createAnimator() 駝峰onFrame// ? 場景 1import { Animator as animator } from kit.ArkUI onFrame 駝峰API 1290% 場景首選 import { Animator as animator, AnimatorOptions, AnimatorResult } from kit.ArkUI // ? 真路徑 namespace alias Entry Component struct Index { State width: number 0 private animatorResult: AnimatorResult | null null // ? 持引用避免析構(gòu) startAnimation() { const options: AnimatorOptions { duration: 2000, easing: ease, delay: 0, fill: forwards, direction: normal, iterations: 1, begin: 0, end: 300 // ? begin/end 定義插值范圍 } // ? this.getUIContext().createAnimator()——不是廢棄的 animator.create() this.animatorResult this.getUIContext().createAnimator(options) // ? 駝峰 onFrameAPI 12——不是廢棄的 onframe全小寫 this.animatorResult.onFrame (progress: number) { this.width progress // ? progress 自動(dòng)從 begin(0) 插到 end(300) } this.animatorResult.onFinish () { // ? 駝峰 onFinish console.info(動(dòng)畫完成) } this.animatorResult.play() // ? play() 啟動(dòng)動(dòng)畫 } aboutToDisappear() { this.animatorResult?.cancel() // ? cancel() 釋放避免循環(huán)依賴內(nèi)存泄漏 this.animatorResult null } build() { Column({ space: 8 }) { Text(demo).width(this.width) } } } // import kit.ArkUI onFrame 駝峰 getUIContext().createAnimator()90% 場景首選鴻蒙 ohos.animator API 真名坑import { Animator as animator, AnimatorOptions, AnimatorResult } from kit.ArkUI真路徑kit.ArkUI不是ohos.animatorAnimatornamespace 必須as animatoraliasthis.getUIContext().createAnimator(options: AnimatorOptions): AnimatorResultUIContext方法不是廢棄的animator.create()頂層函數(shù)AnimatorResult.onFrame/onFinish/onCancel/onRepeat駝峰API 12不是廢棄的全小寫onframe/onfinish/oncancel/onrepeatAnimatorResult.play()/pause()/resume()/cancel()/reverse()運(yùn)行時(shí)控制方法SysCapSystemCapability.ArkUI.ArkUI.Fullcrossplatform跨平臺(tái)atomicservice原子化服務(wù)。場景 2iterations-1 無限播放 direction‘a(chǎn)lternate’ 反向交替無限來回動(dòng)畫用iterations: -1direction: alternate// ? 場景 2iterations-1 無限播放 directionalternate 反向交替API 6 import { Animator as animator, AnimatorOptions, AnimatorResult } from kit.ArkUI const options: AnimatorOptions { duration: 1000, easing: linear, delay: 0, fill: forwards, direction: alternate, // ? alternate 反向交替奇數(shù)次正向偶數(shù)次反向 iterations: -1, // ? -1 無限播放直到 cancel() 或組件銷毀 begin: 0, end: 200 } this.animatorResult this.getUIContext().createAnimator(options) this.animatorResult.onFrame (progress: number) { this.translateX progress // ? 0→200→0→200 無限來回 } this.animatorResult.play() // iterations-1 無限播放 alternate 反向交替0→200→0→200 無限來回鴻蒙 iterations direction API 真名坑AnimatorOptions.iterations: number-1無限播放0不播放正數(shù)N播N次AnimatorOptions.direction: normal | reverse | alternate | alternate-reversenormal正向reverse反向alternate奇正偶反交替alternate-reverse奇反偶正交替鴻蒙坑React CSSanimation-iteration-count: infinite是字符串infinite鴻蒙iterations: -1是數(shù)字-1React CSSanimation-direction: alternate跟鴻蒙direction: alternate語義一致但鴻蒙是字符串字面量不是 CSS 關(guān)鍵字。場景 3pause()/resume() 暫?；謴?fù) cancel() 取消觸發(fā) onCancel暫?；謴?fù)用pause()/resume()取消用cancel()觸發(fā)onCancel// ? 場景 3pause()/resume() 暫停恢復(fù) cancel() 取消觸發(fā) onCancelAPI 6 import { Animator as animator, AnimatorOptions, AnimatorResult } from kit.ArkUI this.animatorResult this.getUIContext().createAnimator({ duration: 5000, iterations: -1, begin: 0, end: 300 }) this.animatorResult.onFrame (progress: number) { this.width progress } this.animatorResult.onCancel () { // ? 駝峰 onCancelcancel() 觸發(fā) console.info(動(dòng)畫被取消) } this.animatorResult.play() // ? pause() 暫停onFrame 停止觸發(fā)progress 停在當(dāng)前值 this.animatorResult.pause() // ? resume() 恢復(fù)從暫停處繼續(xù)onFrame 恢復(fù)觸發(fā) this.animatorResult.resume() // ? cancel() 取消觸發(fā) onCancel動(dòng)畫終止progress 不再變化 this.animatorResult.cancel() // pause/resume 暫?；謴?fù) cancel 取消觸發(fā) onCancel 駝峰回調(diào)鴻蒙 pause/resume/cancel API 真名坑AnimatorResult.pause(): void暫停onFrame停止觸發(fā)progress停在當(dāng)前值A(chǔ)nimatorResult.resume(): void恢復(fù)從暫停處繼續(xù)AnimatorResult.cancel(): void取消觸發(fā)onCancel回調(diào)動(dòng)畫終止鴻蒙坑ReactcancelAnimationFrame取消后無法恢復(fù)要重新requestAnimationFrame鴻蒙pause()/resume()可暫?；謴?fù)不丟進(jìn)度——鴻蒙AnimatorResult是有狀態(tài)的對(duì)象ReactrequestAnimationFrame是無狀態(tài)的瀏覽器 API。場景 4reverse() 運(yùn)行時(shí)反向播放 fill‘forwards’ 保持終態(tài)運(yùn)行時(shí)反向用reverse()保持終態(tài)用fill: forwards// ? 場景 4reverse() 運(yùn)行時(shí)反向播放 fillforwards 保持終態(tài)API 6 import { Animator as animator, AnimatorOptions, AnimatorResult } from kit.ArkUI const options: AnimatorOptions { duration: 3000, easing: ease, delay: 0, fill: forwards, // ? forwards 動(dòng)畫完成后保持終態(tài)progress 停在 end 不歸零 direction: normal, iterations: 1, begin: 0, end: 300 } this.animatorResult this.getUIContext().createAnimator(options) this.animatorResult.onFrame (progress: number) { this.width progress } this.animatorResult.play() // ? 正向播放 0→300完成后保持 300fill: forwards // ? reverse() 運(yùn)行時(shí)反向播放不是 direction:reverse是運(yùn)行時(shí)方法 this.animatorResult.reverse() // ? 反向播放 300→0 // reverse() 運(yùn)行時(shí)反向 fillforwards 保持終態(tài)progress 停在 end 不歸零鴻蒙 reverse fill API 真名坑AnimatorResult.reverse(): void運(yùn)行時(shí)反向播放不是AnimatorOptions.direction: reverse那個(gè)配置項(xiàng)——direction是播放前配置reverse()是播放中運(yùn)行時(shí)調(diào)用AnimatorOptions.fill: none | forwards | backwards | bothnone歸零forwards保持終態(tài)backwards保持起始態(tài)both兩端都保持鴻蒙坑React CSSanimation-fill-mode: forwards跟鴻蒙fill: forwards語義一致但鴻蒙是字符串字面量reverse()是運(yùn)行時(shí)方法不是配置項(xiàng)跟pause()/resume()/cancel()同級(jí)控制方法。五、一句話哲學(xué)寫鴻蒙 ArkUI 記住animator 不是 React requestAnimationFrame 是「AnimatorResult 幀回調(diào) 持引用」——鴻蒙 6.1 API 23kit.ArkUI的Animator as animatornamespaceAPI 6鴻蒙 6.1 API 23 基座AnimatorOptions/AnimatorResult/SimpleAnimatorOptions類型 廢棄animator.create()/createAnimator()頂層函數(shù)SysCap SystemCapability.ArkUI.ArkUI.Fullcrossplatform atomicservice。根因不是瀏覽器 API 是 ArkUI 命名空間對(duì)象——import 真路徑是kit.ArkUI不是ohos.animator?import { Animator as animator, AnimatorOptions, AnimatorResult } from kit.ArkUI——Animatornamespace 必須as animatoralias?import animator from ohos.animator舊文檔路徑編譯錯(cuò)Cannot find module?import { animator }命名錯(cuò)has no exported member animatorAPI 12 廢棄全小寫回調(diào)名遷移到駝峰?onFrame/onFinish/onCancel/onRepeat駝峰 API 12?onframe/onfinish/oncancel/onrepeat全小寫廢棄 deprecated 有 IDE 警告animator.create()/createAnimator()廢棄遷移到 UI 上下文方法?this.getUIContext().createAnimator(options)走UIContext?animator.create(options)廢棄頂層函數(shù)無 UI 上下文綁定AnimatorResult必須持有引用避免析構(gòu)?private animatorResult: AnimatorResult | null持引用? 局部變量方法結(jié)束析構(gòu)動(dòng)畫中斷aboutToDisappear要cancel()釋放避免循環(huán)依賴內(nèi)存泄漏?this.animatorResult?.cancel(); this.animatorResult null? 不 cancel 組件銷毀后 AnimatorResult 仍持引用內(nèi)存泄漏onFrame回調(diào)的progress自動(dòng)從begin插到end不用自己算 timestampReactrequestAnimationFrame回調(diào)傳 timestamp 要自己算插值iterations語義是數(shù)字不是字符串?-1無限播放 /0不播放 / 正數(shù)N播N次? React CSSanimation-iteration-count: infinite是字符串direction: alternate反向交替配合iterations: -1做無限來回運(yùn)行時(shí)控制play()/pause()/resume()/cancel()/reverse()pause/resume可暫停恢復(fù)不丟進(jìn)度cancel觸發(fā)onCancelreverse是運(yùn)行時(shí)方法不是配置項(xiàng)fill: forwards保持終態(tài)progress 停在end不歸零。import kit.ArkUI onFrame 駝峰 getUIContext().createAnimator 持引用 aboutToDisappear cancel是鴻蒙 6.1 ohos.animator 動(dòng)畫器坑核心能力系列回鏈鴻蒙 7.0 新特性篇 1~17沉浸式毛玻璃/Component3D/智能體框架/方舟引擎/星盾安全/星河互聯(lián)/空間音頻/可變字體/游戲快啟/分布式數(shù)據(jù)盾/LTPO 可變幀率/AI 文檔識(shí)別/多形態(tài)服務(wù)窗口/AI 反詐/機(jī)密計(jì)算/空間計(jì)算/小藝全面進(jìn)化鴻蒙 6.1 API 23 開發(fā)坑系列篇 1「ArkUI.modifier 裝飾器坑」——attributeModifier AttributeModifier 狀態(tài)化節(jié)點(diǎn)修改器鴻蒙 6.1 API 23 開發(fā)坑系列篇 2「arkui.componentSnapshot 組件截圖坑」——get/getSync/createFromBuilder 返回 image.PixelMap 像素圖鴻蒙 6.1 API 23 開發(fā)坑系列篇 3「arkui.node 節(jié)點(diǎn)坑」——NodeController abstract class makeNode override BuilderNode WrappedBuilder鴻蒙 6.1 API 23 開發(fā)坑系列篇 4「arkui.UIContext UI 上下文坑」——runScopedTask 不是 runScopedOnUiThread 11 個(gè)子管理器鴻蒙 6.1 API 23 開發(fā)坑系列篇 5「arkui.observer UI 觀察器坑」——uiObserver namespace 真名不是 observer on type string literal鴻蒙 6.1 API 23 開發(fā)坑系列篇 6「ohos.animator 動(dòng)畫器坑」——import kit.ArkUI 不是 ohos.animator onFrame 駝峰不是廢棄 onframe getUIContext().createAnimator 不是廢棄 animator.create 持引用 aboutToDisappear cancel本文