创新互联百度小程序教程：animation-viewLottie动画
- animation-view Lottie 动画
- 属性说明
- action 有效值
- 示例
- 代码示例 1：动画资源地址在本地，path 为相对路径
- 代码示例 2：动画资源地址在服务器上存放
- Bug & Tip
- 属性说明
animation-view Lottie 动画
解释：仅支持 Lottie 动画的客户端原生组件，使用时请注意相关限制，动画资源地址可到 lottie 的官方库进行查询。Lottie 使用入门详见官方介绍；设计师精彩示例及动效文件详见设计社区。
创新互联建站成都网站建设按需求定制设计，是成都营销推广公司,为石凉亭提供网站建设服务,有成熟的网站定制合作流程，提供网站定制设计服务：原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站营销推广热线：18982081108
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
path | String | 是 | 动画资源地址，目前只支持绝对路径 | - | |
loop | Boolean | false | 否 | 动画是否循环播放 | - |
autoplay | Boolean | true | 否 | 动画是否自动播放 | - |
action | String | play | 否 | 动画操作，可取值 play、pause、stop | - |
hidden | Boolean | true | 否 | 是否隐藏动画 | - |
bindended | EventHandle | 否 | 当播放到末尾时触发 ended 事件（自然播放结束会触发回调，循环播放结束及手动停止动画不会触发） | 3.0.0 |
action 有效值
| 值 | 说明 |
|---|---|
play | 播放 |
pause | 暂停 |
stop | 停止 |
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
代码示例 1：动画资源地址在本地，path 为相对路径
- SWAN
- JS
class="controls"path="{{path}}"loop="{{loop}}"autoplay="{{autoplay}}"action="{{action}}"hidden="{{hidden}}"bindended="lottieEnd">
代码示例 2：动画资源地址在服务器上存放
在开发者工具中打开
在开发者工具中打开
在 WEB IDE 中打开
此种使用方式建议在真机查看完整效果，注意 path 属性仅可在组件初始化时传入，不支持用 setData 方法后续动态传入。
- SWAN
- JS
s-if="{{shouldShow}}"class="controls"path="{{path}}"loop="{{loop}}"autoplay="{{autoplay}}"action="{{action}}"hidden="{{hidden}}"bindended="lottieEnd">
Bug & Tip
- Tip：由于第三方库兼容性问题，在使用 animation-view 组件时，需要将小程序的最低基础库版本设置成大于等于 3.250.12 。
- Tip：若开发者使用 Adobe After Effects（AE）Bodymovin 插件导出 Lottie 文件时，应该使用版本号低于 5.5 版的 Bodymovin 插件导出 Lottie 文件（推荐使用 v5.4.4），否则会出现与 Lottie SDK 兼容性问题，导致无法正常播放。
- Tip：animation-view 组件的位置信息、padding 值以 path 里传的 JSON 文件里的 left、top、padding 值为准。
- Tip：animation-view 组件支持嵌套 cover-view、cover-image、button 原生组件。
- Tip：为避免出现 iOS 中画面被拉伸的情况，建议将 animation-view 组件的长宽比设置的与动画长宽比一致。
- Tip：path 暂不支持远程路径，原因是端上暂不支持解析远程路径的 JSON 文件, 如果不想将 JSON 文件放在小程序包内，可以通过 API swan.downloadFile 将文件下载到本地，具体可参考上方代码示例 2 。
- Tip：在保证产品体验流畅，不能影响性能的同时，建议在刷新、加载、运营 banner 、按钮、图标等场景中适时适度的使用动效。
- Tip：互动型动画 - 建议不自动播放；展示型动画 - 建议自动播放。
文章题目：创新互联百度小程序教程：animation-viewLottie动画
转载源于：http://www.36103.cn/qtweb/news32/15582.html
网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联