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.

Required Permissions

None

Modules to Import

import lottie from '@ohos/lottieETS'

NOTE

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

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 method, declare the Animator('__lottie_ets') object and check that the canvas layout is complete. This method can be used together with a lifecycle callback of the Canvas component, for example, onAppear() and onPageShow().

• Parameters

lottie.destroy

destroy(name: string): void

Destroys the animation. This method must be called when a page exits. This method 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')
        .onAppear(() => {
          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 method 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 interface and has attributes and interfaces. 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 interface 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 method 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 interface 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 method 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 interface.

• 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 function is triggered. This method 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)