百度小程序使用lottie 动画组件 taro版本 支持百度小程序 安卓版本 和ios版本

官方文档是这样的

https://smartprogram.baidu.com/docs/develop/component/base/#animation-view/

animation-view

解释：Lottie动画组件

属性说明：

属性名	类型	必填	默认值	说明	最低版本
path	String	是		动画资源地址，目前只支持绝对路径	-
loop	Boolean	否	false	动画是否循环播放	-
autoplay	Boolean	否	true	动画是否自动播放	-
action	String	否	play	动画操作，可取值 play、pause、stop	-
hidden	Boolean	否	true	是否隐藏动画	-
bindended	EventHandle	否	-	当播放到末尾时触发 ended 事件（自然播放结束会触发回调，循环播放结束及手动停止动画不会触发。）	3.0.0

说明:

• animation-view组件的位置信息、padding值以path里传的json文件里的left、top、padding值为准。
• animation-view组件不支持原生组件嵌套。
• 为避免出现iOS中画面被拉伸的情况，建议将animation-view组件的长宽比设置的与动画长宽比一致。
  示例：

<!-- animation-view.swan --> <view> <animation-view id="myAnim" action="{{action}}" hidden="{{hidden}}" class="controls" autoplay="false" path="{{path}}"> </animation-view> </view>

Page({ data: { path: '/anims/anim_one.json', action: 'play', hidden: false } }); animation-view 解释：Lottie动画组件 属性说明： 属性名 类型 必填 默认值 说明 最低版本 path String 是   动画资源地址，目前只支持绝对路径 - loop Boolean 否 false 动画是否循环播放 - autoplay Boolean 否 true 动画是否自动播放 - action String 否 play 动画操作，可取值 play、pause、stop - hidden Boolean 否 true 是否隐藏动画 - bindended EventHandle 否 - 当播放到末尾时触发 ended 事件（自然播放结束会触发回调，循环播放结束及手动停止动画不会触发。） 3.0.0 说明: animation-view组件的位置信息、padding值以path里传的json文件里的left、top、padding值为准。 animation-view组件不支持原生组件嵌套。 为避免出现iOS中画面被拉伸的情况，建议将animation-view组件的长宽比设置的与动画长宽比一致。 示例： <!-- animation-view.swan --> <view> <animation-view id="myAnim" action="{{action}}" hidden="{{hidden}}" class="controls" autoplay="false" path="{{path}}"> </animation-view> </view> Page({ data: { path: '/anims/anim_one.json', action: 'play', hidden: false } });

 

taro中按照下面的步骤来就不会出错

的index.js配置文件将src下面的json文件导入到dist打包目录下面

copy: {
  patterns: [
    {
      from: 'src/anims',
      to: 'dist/anims',
    },
  ],
  options: {
  }
},

引用文件如下

import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text, ScrollView, Swiper, SwiperItem, Button } from '@tarojs/components'
// import '../../anims/lottie_example.json'
上面的注释文件一定不能引用 否则taro会报错
export default class Index extends Component{

  constructor(props){
    super(props)
    this.state = {
      realPath : '/anims/star.json',
     // 这个变量也不用写 因为taro 根本不会用到
    }
  }
  componentDidMount(){
 
  }
  render(){
    return (
        <animation-view id="myAnim" action="play" hidden="false" className="controls"   loop = 'true' style = 'width : 155px;height 83px;margin-top : 200px;' path='/anims/star.json'>
// path这里直接引入这个地址就可以了 也不用包原生组件
          </animation-view>
    )

  }
}

 

 

项目目录结构如下图所示：

下面是效果图