Lottie動畫

導(dǎo)入模塊

import lottie from '@ohos/lottie'

lottie.loadAnimation

loadAnimation(path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string ): AnimationItem

加載動畫，須提前聲明Animator('__lottie_ets')對象，并在Canvas完成布局后調(diào)用?？膳浜螩anvas組件生命周期接口onReady()使用。

參數(shù)：

lottie.destroy

destroy(name: string): void

銷毀動畫，頁面退出時，必須調(diào)用?？膳浜螩anvas組件生命周期接口使用，比如onDisappear()與onPageHide()。

參數(shù)：

示例：

// xxx.ets
import lottie from '@ohos/lottie'

@Entry
@Component
struct Index {
  private controller: CanvasRenderingContext2D = new CanvasRenderingContext2D()
  private animateName: string = "animate"
  private animatePath: string = "common/lottie/data.json"
  private animateItem: any = null

  onPageHide(): void {
    console.log('onPageHide')
    lottie.destroy()
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.controller)
      .width('30%')
      .height('20%')
      .backgroundColor('#0D9FFB')
      .onReady(() => {
        console.log('canvas onAppear');
        this.animateItem = lottie.loadAnimation({
          container: this.controller,
          renderer: 'canvas',
          loop: true,
          autoplay: true,
          name: this.animateName,
          path: this.animatePath,
        })
      })

      Button('load animation')
        .onClick(() => {
        if (this.animateItem != null) {
          this.animateItem.destroy()
          this.animateItem = null
        }
        this.animateItem = lottie.loadAnimation({
          container: this.controller,
          renderer: 'canvas',
          loop: true,
          autoplay: true,
          name: this.animateName,
          path: this.animatePath,
          initialSegment: [10, 50],
        })
      })

      Button('destroy animation')
        .onClick(() => {
          lottie.destroy(this.animateName)
          this.animateItem = null
        })
    }
    .width('100%')
    .height('100%')
  }
}

lottie.play

play(name: string): void

播放指定動畫。

參數(shù)：

示例：

lottie.play(this.animateName)

lottie.pause

pause(name: string): void

暫停指定動畫，下次調(diào)用lottie.play()從當前幀開始。

參數(shù)：

示例：

lottie.pause(this.animateName)

lottie.togglePause

togglePause(name: string): void

暫?；虿シ胖付▌赢?，等效于lottie.play()與lottie.pause()切換調(diào)用。

參數(shù)：

示例：

lottie.togglePause(this.animateName)

lottie.stop

stop(name: string): void

停止指定動畫，下次調(diào)用lottie.play()從第一幀開始。

參數(shù)：

示例：

lottie.stop(this.animateName)

lottie.setSpeed

setSpeed(speed: number, name: string): void

設(shè)置指定動畫播放速度。

參數(shù)：

示例：

lottie.setSpeed(5, this.animateName)

lottie.setDirection

setDirection(direction: AnimationDirection, name: string): void

設(shè)置指定動畫播放順序。

參數(shù)：

示例：

lottie.setDirection(-1, this.animateName)

AnimationItem

loadAnimation接口的返回對象，具有屬性與接口。屬性描述如下：

AnimationItem.play

play(name?: string): void

播放動畫。

參數(shù)：

示例：

this.animateItem.play()

AnimationItem.destroy

destroy(name?: string): void

銷毀動畫。

參數(shù)：

示例：

this.animateItem.destroy()

AnimationItem.pause

pause(name?: string): void

暫停動畫，下次調(diào)用play接口從當前幀開始播放。

參數(shù)：

示例：

this.animateItem.pause()

AnimationItem.togglePause

togglePause(name?: string): void

暫?；虿シ艅赢?，等效于play接口與pause接口之間輪換調(diào)用。

參數(shù)：

示例：

this.animateItem.togglePause()

AnimationItem.stop

stop(name?: string): void

停止動畫，下次調(diào)用play接口從第一幀開始播放。

參數(shù)：

示例：

this.animateItem.stop()

AnimationItem.setSpeed

setSpeed(speed: number): void

設(shè)置動畫播放速度。

參數(shù)：

示例：

this.animateItem.setSpeed(5);

AnimationItem.setDirection

setDirection(direction: AnimationDirection): void

設(shè)置動畫播放順序。

參數(shù)：

示例：

this.animateItem.setDirection(-1)

AnimationItem.goToAndStop

goToAndStop(value: number, isFrame?: boolean): void

設(shè)置動畫停止在指定幀或時間進度。

參數(shù)：

示例：

// 按幀號控制
this.animateItem.goToAndStop(25, true)
// 按時間進度控制
this.animateItem.goToAndStop(300, false, this.animateName)

AnimationItem.goToAndPlay

goToAndPlay(value: number, isFrame: boolean, name?: string): void

設(shè)置動畫從指定幀或時間進度開始播放。

參數(shù)：

示例：

// 按幀號控制
this.animateItem.goToAndPlay(25, true)
// 按時間進度控制
this.animateItem.goToAndPlay(300, false, this.animateName)

AnimationItem.playSegments

playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean): void

設(shè)置動畫僅播放指定片段。

參數(shù)：

示例：

// 指定播放片段
this.animateItem.playSegments([10, 20], false)
// 指定播放片段列表
this.animateItem.playSegments([[0, 5], [20, 30]], true)

AnimationItem.resetSegments

resetSegments(forceFlag: boolean): void

重置動畫播放片段，播放全幀。

參數(shù)：

示例：

this.animateItem.resetSegments(true)

AnimationItem.resize

resize(): void

刷新動畫布局。

示例：

this.animateItem.resize()

AnimationItem.setSubframe

setSubframe(useSubFrame: boolean): void

設(shè)置屬性currentFrame的精度顯示浮點數(shù)。

參數(shù)：

示例：

this.animateItem.setSubframe(false)

AnimationItem.getDuration

getDuration(inFrames?: boolean): void

獲取動畫單次完整播放的時間(與播放速度無關(guān))或幀數(shù), 與Lottie.loadAnimation接口入?yún)nitialSegment有關(guān)。

參數(shù)：

示例：

this.animateItem.getDuration(true)

AnimationItem.addEventListener

addEventListener<T = any>(name: AnimationEventName, callback: AnimationEventCallback<T>): () => void

添加偵聽事件, 事件完成后會觸發(fā)指定回調(diào)函數(shù)。返回可刪除該偵聽事件的函數(shù)對象。

參數(shù)：

示例：

private callbackItem: any = function() {
    console.log("grunt loopComplete")
}
let delFunction = this.animateItem.addEventListener('loopComplete', this.animateName)

// 刪除偵聽
delFunction()

AnimationItem.removeEventListener

removeEventListener<T = any>(name: AnimationEventName, callback?: AnimationEventCallback<T>): void

刪除偵聽事件。

參數(shù)：

示例：

this.animateItem.removeEventListener('loopComplete', this.animateName)

AnimationItem.triggerEvent

triggerEvent<T = any>(name: AnimationEventName, args: T): void

直接觸發(fā)指定事件的所有已設(shè)置的回調(diào)函數(shù)。

參數(shù)：

示例：

private triggerCallBack: any = function(item) {
    console.log("trigger loopComplete, name:" + item.name)
}

this.animateItem.addEventListener('loopComplete', this.triggerCallBack)
this.animateItem.triggerEvent('loopComplete', this.animateItem)
this.animateItem.removeEventListener('loopComplete', this.triggerCallBack)