创新互联百度小程序教程：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://www.shufengxianlan.com/qtweb/news13/132863.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    Google知识

    各行业网站

    成都400电话申请　　 　班戈纳美网站　　 　成都做网站　　 　护栏打桩机　　 　网站设计　　 　店面门头广告　　 　成都做网站　　 　郫县门窗定制　　 　专业网站设计　　 　四川雅安服务器托管　　 　移动服务器托管　　 　成都光华电信机房　　 　彭州网站建设　　 　东电技服　　 　服务器租用　　 　简阳机房托管　　 　成都服务器租用　　 　网站建设策划方案　　 　温江做网站　　 　香港空间腾讯云