快上网建站品牌

13518219792

创新互联百度小程序教程：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
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  class="controls" 
      5. 
  
  
  
    5.  path="{{path}}" 
      6. 
  
  
  
    6.  loop="{{loop}}" 
      7. 
  
  
  
    7.  autoplay="{{autoplay}}" 
      8. 
  
  
  
    8.  action="{{action}}" 
      9. 
  
  
  
    9.  hidden="{{hidden}}" 
      10. 
  
  
  
    10.  bindended="lottieEnd">
      11. 
  
  
  
    11.  
      12. 
  
  
  
    12.  
      13. 
  
  
  
    13.  
      14. 
  
  
  
      15.

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

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

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

    • SWAN
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  
      5. 
  
  
  
    5.  s-if="{{shouldShow}}" 
      6. 
  
  
  
    6.  class="controls" 
      7. 
  
  
  
    7.  path="{{path}}" 
      8. 
  
  
  
    8.  loop="{{loop}}" 
      9. 
  
  
  
    9.  autoplay="{{autoplay}}" 
      10. 
  
  
  
    10.  action="{{action}}" 
      11. 
  
  
  
    11.  hidden="{{hidden}}" 
      12. 
  
  
  
    12.  bindended="lottieEnd">
      13. 
  
  
  
    13.  
      14. 
  
  
  
    14.  
      15. 
  
  
  
    15.  
      16. 
  
  
  
    16.  
      17. 
  
  
  
      18.

    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://gydahua.com/article/djgijjp.html
    扫二维码与项目经理沟通

    我们在微信上24小时期待你的声音

    解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

    其他资讯

    行业动态

    企业网站建设的重要性！

    现在虽然是移动互联网时代，但企业网站依然重要，包含PC站点，移动站。可以说企业网站关系企业的未来发展和前途，尤其对中小企业更是如此，一些中小企业老板，对自己的名片很在乎，因为这是个门面。...

    服务项目

    联系吧 在百度地图上找到我们

    电话：13518219792

    如遇占线或暂未接听请拨：136xxx98888

    业务咨询 技术咨询 售后服务
    网站设计
    成都网站设计
    成都网站设计
    四川成都网站设计
    温江网站设计
    网站制作
    H5网站制作
    成都网站制作
    网站制作
    温江网站制作
    联系我们
    电话：13518219792
    邮箱：631063699@qq.com
    地址：成都青羊区锦天国际1002号
    网址：www.gydahua.com
    网站建设
    上市集团网站建设
    安防网站建设方案
    成都定制网站建设
    大足网站建设

    微信二维码

    Copyright © 2002-2023 www.gydahua.com 快上网建站品牌 QQ：244261566 版权所有 备案号：蜀ICP备19037934号