Lottie

提供Lottie动画。

说明：

从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

导入模块

import lottie from '@ohos/lottieETS'

说明：

在Terminal窗口使用 npm install @ohos/lottieETS 命令下载Lottie，下载之前需要配置权限。

安装ohos npm 三方包时，需要先执行npm config set @ohos:registry=https://repo.harmonyos.com/npm/设置仓库地址。

lottie.loadAnimation

loadAnimation(

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

加载动画，须提前声明Animator(‘__lottie_ets’)对象，并在Canvas完成布局后调用。可配合Canvas组件生命周期接口onReady()使用。

参数：

lottie.destroy

destroy(name: string): void

销毁动画，页面退出时，必须调用。可配合Canvas组件生命周期接口使用，比如onDisappear()与onPageHide()。

参数：

示例：

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

  @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,
          })
        })

        Animator('__lottie_ets') // declare Animator('__lottie_ets') when use lottie
        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

播放指定动画。

参数：

示例：

  lottie.play(this.animateName)

lottie.pause

pause(name: string): void

暂停指定动画，下次调用lottie.play()从当前帧开始。

参数：

示例：

  lottie.pause(this.animateName)

lottie.togglePause

togglePause(name: string): void

暂停或播放指定动画，等效于lottie.play()与lottie.pause()切换调用。

参数：

示例：

  lottie.togglePause(this.animateName)

lottie.stop

stop(name: string): void

停止指定动画，下次调用lottie.play()从第一帧开始。

参数：

示例：

  lottie.stop(this.animateName)

lottie.setSpeed

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

设置指定动画播放速度。

参数：

示例：

  lottie.setSpeed(5, this.animateName)

lottie.setDirection

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

设置指定动画播放顺序。

参数：

示例：

  lottie.setDirection(-1, this.animateName)

AnimationItem

loadAnimation接口的返回对象，具有属性与接口。属性描述如下：

AnimationItem.play

play(name?: string): void

播放动画。

参数：

示例：

  this.animateItem.play()

AnimationItem.destroy

destroy(name?: string): void

销毁动画。

参数：

示例：

  this.animateItem.destroy()

AnimationItem.pause

pause(name?: string): void

暂停动画，下次调用play接口从当前帧开始播放。

参数：

示例：

  this.animateItem.pause()

AnimationItem.togglePause

togglePause(name?: string): void

暂停或播放动画，等效于play接口与pause接口之间轮换调用。

参数：

示例：

  this.animateItem.togglePause()

AnimationItem.stop

stop(name?: string): void

停止动画，下次调用play接口从第一帧开始播放。

参数：

示例：

  this.animateItem.stop()

AnimationItem.setSpeed

setSpeed(speed: number): void

设置动画播放速度。

参数：

示例：

  this.animateItem.setSpeed(5);

AnimationItem.setDirection

setDirection(direction: AnimationDirection): void

设置动画播放顺序。

参数：

示例：

  this.animateItem.setDirection(-1)

AnimationItem.goToAndStop

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

设置动画停止在指定帧或时间进度。

参数：

示例：

  // 按帧号控制
  this.animateItem.goToAndStop(25, true)
  // 按时间进度控制
  this.animateItem.goToAndStop(300, false, this.animateName)

AnimationItem.goToAndPlay

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

设置动画从指定帧或时间进度开始播放。

参数：

示例：

  // 按帧号控制
  this.animateItem.goToAndPlay(25, true)
  // 按时间进度控制
  this.animateItem.goToAndPlay(300, false, this.animateName)

AnimationItem.playSegments

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

设置动画仅播放指定片段。

参数：

示例：

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

AnimationItem.resetSegments

resetSegments(forceFlag: boolean): void

重置动画播放片段，播放全帧。

参数：

示例：

  this.animateItem.resetSegments(true)

AnimationItem.resize

resize(): void

刷新动画布局。

示例：

  this.animateItem.resize()

AnimationItem.setSubframe

setSubframe(useSubFrame: boolean): void

设置属性currentFrame的精度显示浮点数。

参数：

示例：

  this.animateItem.setSubframe(false)

AnimationItem.getDuration

getDuration(inFrames?: boolean): void

获取动画单次完整播放的时间(与播放速度无关)或帧数, 与Lottie.loadAnimation接口入参initialSegment有关。

参数：

示例：

  this.animateItem.getDuration(true)

AnimationItem.addEventListener

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

添加侦听事件, 事件完成后会触发指定回调函数。返回可删除该侦听事件的函数对象。

参数：

示例：

  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

删除侦听事件。

参数：

示例：

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

AnimationItem.triggerEvent

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

直接触发指定事件的所有已设置的回调函数。

参数：

示例：

  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)

你可能感兴趣的鸿蒙文章

harmony 鸿蒙基于ArkTS的声明式开发范式

harmony 鸿蒙属性动画

harmony 鸿蒙枚举说明

harmony 鸿蒙Blank

harmony 鸿蒙Button

harmony 鸿蒙Checkbox

harmony 鸿蒙CheckboxGroup

harmony 鸿蒙DataPanel

harmony 鸿蒙DatePicker

harmony 鸿蒙Divider