189 8069 5689

创新互联百度小程序教程: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
     
     
     
    1. class="controls"
    2. path="{{path}}"
    3. loop="{{loop}}"
    4. autoplay="{{autoplay}}"
    5. action="{{action}}"
    6. hidden="{{hidden}}"
    7. bindended="lottieEnd">

    代码示例 2:动画资源地址在服务器上存放

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    此种使用方式建议在真机查看完整效果,注意 path 属性仅可在组件初始化时传入,不支持用 setData 方法后续动态传入。

    • SWAN
    • JS
     
     
     
    1. s-if="{{shouldShow}}"
    2. class="controls"
    3. path="{{path}}"
    4. loop="{{loop}}"
    5. autoplay="{{autoplay}}"
    6. action="{{action}}"
    7. hidden="{{hidden}}"
    8. 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.cdxtjz.cn/article/djgijjp.html

    联系我们

    您好HELLO!
    感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
    • 电话:028- 86922220 18980695689
    • 商务合作邮箱:631063699@qq.com
    • 合作QQ: 532337155
    • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

    小谭建站工作室

    成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

    小谭观点

    相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
    我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。