動(dòng)畫

說(shuō)明： 本模塊首批接口從API version 6開始支持。后續(xù)版本的新增接口，采用上角標(biāo)單獨(dú)標(biāo)記接口的起始版本。 開發(fā)前請(qǐng)熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

導(dǎo)入模塊

import animator from '@ohos.animator';

createAnimator

createAnimator(options: AnimatorOptions): AnimatorResult

定義Animator類。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

參數(shù)名	類型	必填	說(shuō)明
options	[AnimatorOptions]	是	定義動(dòng)畫選項(xiàng)，詳細(xì)請(qǐng)參考AnimatorOptions。

返回值：

類型	說(shuō)明
[AnimatorResult]	Animator結(jié)果接口。

示例：

< !-- hml -- >
< div class="container" >
  < div class="Animation" style="height: {{divHeight}}px; width: {{divWidth}}px; background-color: red;" onclick="Show" >
  < /div >
< /div >

// js
export default {
  data : {
    divWidth: 200,
    divHeight: 200,
    animator: null
  },
  onInit() {
    var options = {
      duration: 1500,
      easing: 'friction',
      fill: 'forwards',
      iterations: 2,
      begin: 200.0,
      end: 400.0
    };
    this.animator = animator.createAnimator(options);
  },
  Show() {
    var options1 = {
      duration: 2000,
      easing: 'friction',
      fill: 'forwards',
      iterations: 1,
      begin: 200.0,
      end: 400.0
    };
    this.animator.update(options1);
    var _this = this;
    this.animator.onframe = function(value) {
      _this.divWidth = value;
      _this.divHeight = value;
    };
    this.animator.play();
  }
}

AnimatorResult

定義Animator結(jié)果接口。

update

update(options: AnimatorOptions): void

更新當(dāng)前動(dòng)畫器。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

參數(shù)名	類型	必填	說(shuō)明
options	[AnimatorOptions]	是	定義動(dòng)畫選項(xiàng)。

示例：

animator.update(options);

play

play(): void

啟動(dòng)動(dòng)畫。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.play();

finish

finish(): void

結(jié)束動(dòng)畫。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.finish();

pause

pause(): void

暫停動(dòng)畫。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.pause();

cancel

cancel(): void

刪除動(dòng)畫。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.cancel();

reverse

reverse(): void

以相反的順序播放動(dòng)畫。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.reverse();

onframe

onframe: (progress: number) => void

回調(diào)時(shí)觸發(fā)。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

參數(shù)名	類型	必填	說(shuō)明
progress	number	是	動(dòng)畫的當(dāng)前進(jìn)度。

示例：

animator.onframe();

onfinish

onfinish: () => void

動(dòng)畫完成。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.onfinish();

oncancel

oncancel: () => void

動(dòng)畫被取消。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.oncancel();

onrepeat

onrepeat: () => void

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

示例：

animator.onrepeat();

動(dòng)畫將重復(fù)。

AnimatorOptions

定義動(dòng)畫選項(xiàng)。

系統(tǒng)能力： 以下各項(xiàng)對(duì)應(yīng)的系統(tǒng)能力均為SystemCapability.ArkUI.ArkUI.Full

搜狗高速瀏覽器截圖20240326151450.png

名稱`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`	參數(shù)類型	必填	說(shuō)明
duration	number	是	動(dòng)畫播放的時(shí)長(zhǎng)，單位毫秒，默認(rèn)為0。
easing	string	是	動(dòng)畫插值曲線，默認(rèn)為ease'。
delay	number	是	動(dòng)畫延時(shí)播放時(shí)長(zhǎng)，單位毫秒，默認(rèn)為0，即不延時(shí)。
fill	"none"	"forwards"	"backwards"
direction	"normal"	"reverse"	"alternate"
iterations	number	是	動(dòng)畫播放次數(shù)，默認(rèn)值1。設(shè)置為0時(shí)不播放，設(shè)置為-1時(shí)無(wú)限次播放。
begin	number	是	動(dòng)畫插值起點(diǎn)，不設(shè)置時(shí)默認(rèn)為0。
end	number	是	動(dòng)畫插值終點(diǎn)，不設(shè)置時(shí)默認(rèn)為1。

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題，請(qǐng)聯(lián)系本站處理。舉報(bào)投訴