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

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

    广告

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

    猜你还喜欢下面的内容

    响应式网站知识

    行业网站建设

    绵阳服务器托管　　 　定制网站建设　　 　广元双南建站　　 　成都服务器租用　　 　抖音短视频拍摄　　 　成都外贸网站优化　　 　成都西云机房　　 　成都商城app开发　　 　免备案虚拟主机空间　　 　四川艾名斯　　 　成都服务器托管　　 　php主机　　 　成都免费自助建站　　 　高防机房　　 　成都网站改版公司　　 　复盛机电设备　　 　成都虚拟主机　　 　成都木托盘　　 　网站制作报价　　 　关键词优化