mx-lottie 动画组件

Lottie动画组件，集成的是lottie官方原生sdk。

引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-lottie": "/miniprogram_npm/m-ui/mx-lottie/index"
}

小程序码

可使用微信扫码查看小程序码

#

代码演示

基本用法

通过path属性设置动画配置数据。

 <mx-lottie path="{{path}}"></mx-lottie>

path:'https://www.smartmidea.net/projects/sit/meiju-lite-assets/assets/image/example/lottie/lottie.json'

参数使用

<template>
	<view>
		<mx-lottie class="animation" path="{{path}}" loop="{{loop}}" autoplay="{{autoplay}}" status="{{status}}"></mx-lottie>
	</view>
</template>

Page({
  data: {
   path: 'https://www.smartmidea.net/projects/sit/meiju-lite-assets/assets/image/example/lottie/lottie.json'
	 loop: false,
	 autoplay: false,
	 status: 'init'
  }
});

API

navbar Props

参数	说明	类型	默认值
path	图片路径	string	''
loop	是否循环播放	boolean	false
autoplay	是否自动播放	boolean	false
status	动画操作，可能的值为播放、暂停、停止	string	init

外部样式类

名称	说明
custom-class	根节点样式类
custom-canvas-class	动画canvas样式