创新互联百度小程序教程：Animation

  • Animation
    • 方法参数
    • 示例
      • 图片示例
      • 代码示例 1：动画队列
      • 代码示例 2：动画样式设置
      • 代码示例 3：动画宽高设置
      • 代码示例 4：底部弹窗自定义动画（CSS 控制）
      • 代码示例 5：底部弹窗自定义动画（API 控制）
      • 代码示例 6：弹出菜单特效的实现

    Animation

    解释：动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。

    动画队列
    调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。

    方法参数

    属性 类型 说明

    opacity

    Number

    透明度，参数范围 0-1 。示例：animation.opacity(0.5)

    backgroundColor

    String

    颜色值。示例：animation.backgroundColor(‘#DC143C’)

    width

    String/Number

    长度值，如果传入 Number 则默认使用 px ，可传入其他自定义单位的长度值。示例：animation.width(‘20px’)

    height

    String/Number

    长度值，如果传入 Number 则默认使用 px ，可传入其他自定义单位的长度值。示例：animation.height(‘70px’)

    top

    String/Number

    长度值，如果传入 Number 则默认使用 px ，可传入其他自定义单位的长度值。示例：animation.top(‘40px’)

    left

    String/Number

    长度值，如果传入 Number 则默认使用 px ，可传入其他自定义单位的长度值。示例：animation.left(‘90px’)

    bottom

    String/Number

    长度值，如果传入 Number 则默认使用 px ，可传入其他自定义单位的长度值。示例：animation.bottom(‘60px’)

    right

    String/Number

    长度值，如果传入 Number 则默认使用 px ，可传入其他自定义单位的长度值。示例：animation.right(‘80px’)

    示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    图片示例

    代码示例 1：动画队列

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
      4.

    代码示例 2：动画样式设置

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
      4.

    代码示例 3：动画宽高设置

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
      4.

    代码示例 4：底部弹窗自定义动画（CSS 控制）

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • SWAN
    • JS
    • CSS
     
 
 
      
  
  
  
      2.   
  
  
      3.   
  
  
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
    6.  {{item}}
      7.   
  
  
    7.  
      8.   
  
  
      9.

    代码示例 5：底部弹窗自定义动画（API 控制）

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  
      9.   
  
  
    9.  
      10.   
  
  
    10.  {{item}}
      11.   
  
  
    11.  
      12.   
  
  
      13.

    代码示例 6：弹出菜单特效的实现

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • SWAN
    • JS
    • CSS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
      7.

    网站名称：创新互联百度小程序教程：Animation
    本文路径：http://www.csdahua.cn/qtweb/news5/376105.html

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

    广告

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

    成都快上网为您推荐相关内容

    手机网站建设知识

    分类信息网

    遂宁海缘科技　　 　服务器托管　　 　成都app制作　　 　成都企业网站建设　　 　手机网站制作　　 　江油网站建设　　 　企业网站建设　　 　成都发电机租赁　　 　成都网站建设公司　　 　注册域名　　 　梓潼网站建设　　 　电信成都枢纽中心　　 　眉山做网站　　 　成都营销型网站建设　　 　南充网站建设　　 　泸州洋跃建站　　 　中国（西部）云计算中心　　 　研帮主　　 　安防网站建设方案　　 　成都艺考培训