当前位置：首页 > news >正文

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

news 来源：原创 2024/5/6 23:32:03

官方文档是这样的

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>
    )

  }
}

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