Lottie

Lottie allows you to implement animation-specific operations.

NOTE

The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

Modules to Import

import lottie from '@ohos/lottieETS'

NOTE

In the Terminal window, run the npm install @ohos/lottieETS command to download Lottie. The download requires the related permission.

To install an OpenHarmony npm third-party package, run the npm config set @ohos:registry=https://repo.harmonyos.com/npm/ command to set the repository address.

lottie.loadAnimation

loadAnimation(

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

Loads an animation. Before calling this API, declare the Animator(‘__lottie_ets’) object and make sure the canvas layout is complete. This API can be used together with the lifecycle callback onReady() of the Canvas component.

Parameters

lottie.destroy

destroy(name: string): void

Destroys the animation. This API must be called when a page exits. This API can be used together with a lifecycle callback of the Canvas component, for example, onDisappear() and onPageHide().

Parameters

Example

  // 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

Plays a specified animation.

Parameters

Example

  lottie.play(this.animateName)

lottie.pause

pause(name: string): void

Pauses a specified animation. The next time lottie.play() is called, the animation starts from the current frame.

Parameters

Example

  lottie.pause(this.animateName)

lottie.togglePause

togglePause(name: string): void

Pauses or plays a specified animation. This API is equivalent to the switching between lottie.play() and lottie.pause().

Parameters

Example

  lottie.togglePause(this.animateName)

lottie.stop

stop(name: string): void

Stops the specified animation. The next time lottie.play() is called, the animation starts from the first frame.

Parameters

Example

  lottie.stop(this.animateName)

lottie.setSpeed

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

Sets the playback speed of the specified animation.

Parameters

Example

  lottie.setSpeed(5, this.animateName)

lottie.setDirection

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

Sets the direction in which the specified animation plays.

Parameters

Example

  lottie.setDirection(-1, this.animateName)

AnimationItem

Defines an AnimationItem object, which is returned by the loadAnimation API and has attributes and APIs. The attributes are described as follows:

AnimationItem.play

play(name?: string): void

Plays an animation.

Parameters

Example

  this.animateItem.play()

AnimationItem.destroy

destroy(name?: string): void

Destroys an animation.

Parameters

Example

  this.animateItem.destroy()

AnimationItem.pause

pause(name?: string): void

Pauses an animation. When the play API is called next time, the animation is played from the current frame.

Parameters

Example

  this.animateItem.pause()

AnimationItem.togglePause

togglePause(name?: string): void

Pauses or plays an animation. This API is equivalent to the switching between play and pause.

Parameters

Example

  this.animateItem.togglePause()

AnimationItem.stop

stop(name?: string): void

Stops an animation. When the play API is called next time, the animation is played from the first frame.

Parameters

Example

  this.animateItem.stop()

AnimationItem.setSpeed

setSpeed(speed: number): void

Sets the playback speed of an animation.

Parameters

Example

  this.animateItem.setSpeed(5);

AnimationItem.setDirection

setDirection(direction: AnimationDirection): void

Sets the playback direction of an animation.

Parameters

Example

  this.animateItem.setDirection(-1)

AnimationItem.goToAndStop

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

Sets the animation to stop at the specified frame or time.

Parameters

Example

  // Set the animation to stop at the specified frame.
  this.animateItem.goToAndStop(25, true)
  // Set the animation to stop at the specified time progress.
  this.animateItem.goToAndStop(300, false, this.animateName)

AnimationItem.goToAndPlay

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

Sets the animation to start from the specified frame or time progress.

Parameters

Example

  // Set the animation to stop at the specified frame.
  this.animateItem.goToAndPlay(25, true)
  // Set the animation to stop at the specified time progress.
  this.animateItem.goToAndPlay(300, false, this.animateName)

AnimationItem.playSegments

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

Sets the animation to play only the specified segment.

Parameters

Example

  // Set the animation to play the specified segment.
  this.animateItem.playSegments([10, 20], false)
  // Set the animation to play the specified segment list.
  this.animateItem.playSegments([[0, 5], [20, 30]], true)

AnimationItem.resetSegments

resetSegments(forceFlag: boolean): void

Resets the settings configured by the playSegments API to play all the frames.

Parameters

Example

  this.animateItem.resetSegments(true)

AnimationItem.resize

resize(): void

Resizes the animation layout.

Example

  this.animateItem.resize()

AnimationItem.setSubframe

setSubframe(useSubFrame: boolean): void

Sets the precision of the currentFrame attribute to display floating-point numbers.

Parameters

Example

  this.animateItem.setSubframe(false)

AnimationItem.getDuration

getDuration(inFrames?: boolean): void

Obtains the duration (irrelevant to the playback speed) or number of frames for playing an animation sequence. The settings are related to the input parameter initialSegment of the Lottie.loadAnimation API.

Parameters

Example

  this.animateItem.getDuration(true)

AnimationItem.addEventListener

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

Adds an event listener. After the event is complete, the specified callback is triggered. This API returns the function object that can delete the event listener.

Parameters

Example

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

  // Delete the event listener.
  delFunction()

AnimationItem.removeEventListener

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

Removes an event listener.

Parameters

Example

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

AnimationItem.triggerEvent

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

Directly triggers all configured callbacks of a specified event.

Parameters

Example

  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-based Declarative Development Paradigm

harmony 鸿蒙Property Animator

harmony 鸿蒙Enums

harmony 鸿蒙Blank

harmony 鸿蒙Button

harmony 鸿蒙Checkbox

harmony 鸿蒙CheckboxGroup

harmony 鸿蒙DataPanel

harmony 鸿蒙DatePicker

harmony 鸿蒙Divider