• Animation
  • 方法參數(shù)
  • 示例
    • 圖片示例
    • 代碼示例 1：動畫隊列
    • 代碼示例 2：動畫樣式設(shè)置
    • 代碼示例 3：動畫寬高設(shè)置
    • 代碼示例 4：底部彈窗自定義動畫（CSS 控制）
    • 代碼示例 5：底部彈窗自定義動畫（API 控制）
    • 代碼示例 6：彈出菜單特效的實現(xiàn)

Animation

解釋：動畫實例可以調(diào)用以下方法來描述動畫，調(diào)用結(jié)束后會返回自身，支持鏈?zhǔn)秸{(diào)用的寫法。

動畫隊列
調(diào)用動畫操作方法后要調(diào)用 step() 來表示一組動畫完成，可以在一組動畫中調(diào)用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成后才會進行下一組動畫。

方法參數(shù)

屬性	類型	說明
opacity	Number	透明度，參數(shù)范圍 0-1 。示例：animation.opacity(0.5)
backgroundColor	String	顏色值。示例：animation.backgroundColor(‘#DC143C’)
width	String/Number	長度值，如果傳入 Number 則默認(rèn)使用 px ，可傳入其他自定義單位的長度值。示例：animation.width(‘20px’)
height	String/Number	長度值，如果傳入 Number 則默認(rèn)使用 px ，可傳入其他自定義單位的長度值。示例：animation.height(‘70px’)
top	String/Number	長度值，如果傳入 Number 則默認(rèn)使用 px ，可傳入其他自定義單位的長度值。示例：animation.top(‘40px’)
left	String/Number	長度值，如果傳入 Number 則默認(rèn)使用 px ，可傳入其他自定義單位的長度值。示例：animation.left(‘90px’)
bottom	String/Number	長度值，如果傳入 Number 則默認(rèn)使用 px ，可傳入其他自定義單位的長度值。示例：animation.bottom(‘60px’)
right	String/Number	長度值，如果傳入 Number 則默認(rèn)使用 px ，可傳入其他自定義單位的長度值。示例：animation.right(‘80px’)

示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

掃碼體驗

代碼示例

請使用百度APP掃碼

圖片示例

代碼示例 1：動畫隊列

• SWAN
• JS

代碼示例 2：動畫樣式設(shè)置

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• SWAN
• JS

代碼示例 3：動畫寬高設(shè)置

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• SWAN
• JS

代碼示例 4：底部彈窗自定義動畫（CSS 控制）

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• SWAN
• JS
• CSS

 
 
 

  
  
  
點擊顯示底部彈框
  
  
  
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 {{item}}
  
  
  
 
  
  
  
 
 
 

代碼示例 5：底部彈窗自定義動畫（API 控制）

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• SWAN
• JS

 
 
 

  
  
  
  
  
  
 點擊顯示底部彈框
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 {{item}}
  
  
  
 
  
  
  
 
 
 

代碼示例 6：彈出菜單特效的實現(xiàn)

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• SWAN
• JS
• CSS

當(dāng)前名稱：創(chuàng)新互聯(lián)百度小程序教程：Animation
當(dāng)前URL：http://m.fisionsoft.com.cn/article/dhigpis.html