lottie

Lottie component, used to integrate and display Lottie animations in mini programs. Lottie animation is an animation library developed by Airbnb, which uses JSON format animation data and can run on various platforms such as web pages and mobile applications.

Example

Page({
 data: {
   instance: null,
   renderer: 'svg',
   loop: true,
   autoplay: true,
   path: 'pages/packageAPI/pages/read-file/lottie.json',
   rendererSettings: {
     preserveAspectRatio: "xMidYMid slice"
   },
 },
 onReady() {    
   this.instance = bn.createLottieContext('lottie')
 },
 play() {
   this.instance.play()
 },
 pause() {
   this.instance.pause()
 },
 stop() {
   this.instance.stop()
 },
 setSpeed() {
   this.instance.setSpeed(0.25)
 },
 setDirection() {
   this.instance.setDirection(-1)
 },
 destroy() {
   this.instance.destroy()
 },
 play2() {
   this.instance2.play()
 },
 stop2() {
   this.instance2.stop()
 },
})

  <theme-context>
   <view class='container'>
     <head title='lottie'></head>
     <view class='page-body'>
      <lottie 
        lottie-id="lottie" 
        renderer="{{renderer}}" 
        loop="{{loop}}" 
        path="{{path}}" 
        autoplay="{{autoplay}}" 
        renderer-settings="{{rendererSettings}}  
        class="lottie">
      </lottie>
       <button class="play" bindtap="play">
         play
       </button>
      <button class="stop" bindtap="stop">
        stop
      </button>
      <button class="pause" bindtap="pause">
        pause
      </button>
      <button class="setSpeed" bindtap="setSpeed">
        setSpeed
      </button>
      <button class="setDirection" bindtap="setDirection">
        setDirection - reverse
      </button>
      <button class="destroy" bindtap="destroy">
        destroy
      </button>
    </view>
  </view>
 </theme-context>

 .lottie {
   width: 300px;
   height: 200px;
 }

Props

Name	Type	Description	Default
`lottieId`	`string`	Unique lottie id for keeping context
`renderer`	`svg\|canvas\|html`	to set the renderer mode	`svg`
`loop`	`boolean`	Activate loop animation	`true`
`autoplay`	`boolean`	`true / false` it will start playing as soon as it is ready	`true`
`path`	`string`	the local path to the animation object
`rendererSetting`	`RendererSettings`	To set the mode of the renderer
`initialSegment`	`[number, number]`	initial Animation Segment

RendererSetting types

Events

lottieContextEvents

Name	Description
`play`	play animation
`stop`	stop animation
`pause`	pause animation
`destroy`	destroy animation
`setSpeed`	set animation speed, `speed: 1` is normal speed
`setDirection`	`direction: 1` is forward, `-1` is reverse.

lottie

Props​

Events​

Props

Events