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

To use Lottie, download it first by running the ohpm install @ohos/lottieETS command in the Terminal window.

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)