• 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：动画样式设置

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

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

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

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

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS
• CSS

 
 
 

  
  
  
点击显示底部弹框
  
  
  
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 {{item}}
  
  
  
 
  
  
  
 
 
 

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

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

 
 
 

  
  
  
  
  
  
 点击显示底部弹框
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 {{item}}
  
  
  
 
  
  
  
 
 
 

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

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS
• CSS

本文标题：创新互联百度小程序教程：Animation
路径分享：http://www.zsjierui.cn/article/dhigpis.html