Components

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

you can refer to the following example to configure the webpack config file.

pika.config/webpack.config.js


Code
const CopyPlugin = require("copy-webpack-plugin");
module.exports = (config, { name, mode, webpack, resolveWebpackModule, helpers, type }) => {
  config.plugin("app/webpack-copy-plugin").use(CopyPlugin, [
    {
      patterns: [
        {
          from: "src/assets/your_lottie_file.json",
          // `to` file path is the path of <Lottie> component
          to: "pages/your_page/lottie/your_lottie_file.json",
        },
      ],
    },
  ]);
  return config;
};


Code
Page({
  data: {
    instance: null,
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "pages/your_page/lottie/your_lottie_file.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();
  },
});

bxml

Code
<theme-context>
  <view class="container">
    <head title="lottie"></head>
    <view class="page-body">
      <lottie lottie-id="lottie" bindcomplete="onComplete" bindloopcomplete="onLoopComplete" 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>

bxss


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

Events

sdk ≥ 4.38.0

Event	Description
`onComplete`	trigger on Lottie animation completed without `loop: false`.
`onLoopComplete`	trigger on Lottie animation completed with `loop: true`.
`onSegmentStart`	trigger on Lottie animation start a segment.
`onConfigReady`	trigger on Lottie animation config ready.
`onDataReady`	trigger on Lottie animation data ready.
`onDataFailed`	trigger on Lottie animation data failed.
`onLoadedImages`	trigger on Lottie animation loaded images.
`onDOMLoaded`	trigger on Lottie animation DOM loaded.
`onDestroy`	trigger on Lottie animation destruction.

remark - sdk ≥ 4.38.0 pika ≥ 0.3.57 @binance/bmp-api ≥ 1.0.153

Props

Name	Type	Default
`lottie-id` required	`string`
`renderer`	`RendererType`	`"svg"`
`loop`	`boolean`	`true`
`autoplay`	`boolean`	`true`
`path` required	`string`
`renderer-settings`	`AnimationConfigWithData['rendererSettings']`
`initial-segment`	`AnimationSegment`

Events

Name	Description
`bindcomplete`	Arguments`{ _currentTarget: this.$el, _type: 'complete', _detail: e, }: object`
`bindloopcomplete`	Arguments`{ _type: 'loopcomplete', _currentTarget: this.$el, _detail: e, }: object`
`bindsegmentstart`	Arguments`{ _currentTarget: this.$el, _type: 'segmentstart', _detail: { animationName: this.lottieId, }, }: object`
`bindconfigready`	Arguments`{ _currentTarget: this.$el, _type: 'configready', _detail: { animationName: this.lottieId, }, }: object`
`binddataready`	Arguments`{ _currentTarget: this.$el, _type: 'dataready', _detail: { animationName: this.lottieId, }, }: object`
`binddatafailed`	Arguments`{ _currentTarget: this.$el, _type: 'datafailed', _detail: { animationName: this.lottieId, }, }: object`
`bindloadedimages`	Arguments`{ _currentTarget: this.$el, _type: 'loadedimages', _detail: { animationName: this.lottieId, }, }: object`
`binddomloaded`	Arguments`{ _currentTarget: this.$el, _type: 'DOMLoaded', _detail: { animationName: this.lottieId, }, }: object`
`binddestroy`	Arguments`{ _currentTarget: this.$el, _type: 'destroy', _detail: { animationName: this.lottieId, }, }: object`

Was this page helpful?

Last modified on July 7, 2026

label markdown

Code

const CopyPlugin = require("copy-webpack-plugin");
module.exports = (config, { name, mode, webpack, resolveWebpackModule, helpers, type }) => {
  config.plugin("app/webpack-copy-plugin").use(CopyPlugin, [
    {
      patterns: [
        {
          from: "src/assets/your_lottie_file.json",
          // `to` file path is the path of <Lottie> component
          to: "pages/your_page/lottie/your_lottie_file.json",
        },
      ],
    },
  ]);
  return config;
};

Code

Page({
  data: {
    instance: null,
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "pages/your_page/lottie/your_lottie_file.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();
  },
});

Code

<theme-context>
  <view class="container">
    <head title="lottie"></head>
    <view class="page-body">
      <lottie lottie-id="lottie" bindcomplete="onComplete" bindloopcomplete="onLoopComplete" 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>

Event

Description

onComplete

trigger on Lottie animation completed without loop: false.

onLoopComplete

trigger on Lottie animation completed with loop: true.

onSegmentStart

trigger on Lottie animation start a segment.

onConfigReady

trigger on Lottie animation config ready.

onDataReady

trigger on Lottie animation data ready.

onDataFailed

trigger on Lottie animation data failed.

onLoadedImages

trigger on Lottie animation loaded images.

onDOMLoaded

trigger on Lottie animation DOM loaded.

onDestroy

trigger on Lottie animation destruction.

Name

Type

Description

Default

lottie-id required

string

renderer

RendererType

"svg"

loop

boolean

true

autoplay

boolean

true

path required

string

renderer-settings

AnimationConfigWithData['rendererSettings']

initial-segment

AnimationSegment

Events

Name

Description

bindcomplete

Arguments{ _currentTarget: this.$el, _type: 'complete', _detail: e, }: object

bindloopcomplete

Arguments{ _type: 'loopcomplete', _currentTarget: this.$el, _detail: e, }: object

bindsegmentstart

Arguments{ _currentTarget: this.$el, _type: 'segmentstart', _detail: { animationName: this.lottieId, }, }: object

bindconfigready

Arguments{ _currentTarget: this.$el, _type: 'configready', _detail: { animationName: this.lottieId, }, }: object

binddataready

Arguments{ _currentTarget: this.$el, _type: 'dataready', _detail: { animationName: this.lottieId, }, }: object

binddatafailed

Arguments{ _currentTarget: this.$el, _type: 'datafailed', _detail: { animationName: this.lottieId, }, }: object

bindloadedimages

Arguments{ _currentTarget: this.$el, _type: 'loadedimages', _detail: { animationName: this.lottieId, }, }: object

binddomloaded

Arguments{ _currentTarget: this.$el, _type: 'DOMLoaded', _detail: { animationName: this.lottieId, }, }: object

binddestroy

Arguments{ _currentTarget: this.$el, _type: 'destroy', _detail: { animationName: this.lottieId, }, }: object

Was this page helpful?

Last modified on July 7, 2026