• swan.createAnimation
  • 方法參數(shù)
    • 返回值
    • object 參數(shù)說明
    • timingFunction 有效值
  • 示例
    • 代碼示例 1
    • 代碼示例 2：參數(shù)默認(rèn)值
    • 代碼示例 3：timingFunction

swan.createAnimation

解釋：創(chuàng)建一個(gè)動(dòng)畫實(shí)例 animation 。

方法參數(shù)

Object object

返回值

Animation

object 參數(shù)說明

duration

Number

否

400

動(dòng)畫持續(xù)時(shí)間（單位：ms）

timingFunction

String

否

‘linear’

定義動(dòng)畫的效果

delay

Number

否

0

動(dòng)畫延遲時(shí)間（單位：ms）

transformOrigin

String

否

‘50% 50% 0’

動(dòng)畫

屬性名	類型	必填	默認(rèn)值	說明

timingFunction 有效值

linear

以相同速度開始至結(jié)束

ease

慢速開始，然后變快，然后慢速結(jié)束

ease-in

慢速開始的過渡效果

ease-in-out

動(dòng)畫以低速開始和結(jié)束

ease-out

動(dòng)畫以低速結(jié)束

step-start

動(dòng)畫第一幀就跳至結(jié)束狀態(tài)直到結(jié)束

step-end

動(dòng)畫一直保持開始狀態(tài)，最后一幀跳到結(jié)束狀態(tài)

值	說明

示例

跳轉(zhuǎn)編輯工具

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

在 WEB IDE 中打開

掃碼體驗(yàn)

代碼示例

請(qǐng)使用百度APP掃碼

代碼示例 1

• SWAN
• JS
• CSS

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 展示動(dòng)畫
  
  
  
 
  
  
  
 旋轉(zhuǎn)
  
  
  
 縮放
  
  
  
 移動(dòng)
  
  
  
 傾斜
  
  
  
 旋轉(zhuǎn)并縮放
  
  
  
 旋轉(zhuǎn)后縮放
  
  
  
 同時(shí)展示全部動(dòng)作
  
  
  
 順序展示全部動(dòng)作
  
  
  
 還原
  
  
  
 
  
  
  
 
  
  
  
 
 

代碼示例 2：參數(shù)默認(rèn)值

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

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

在 WEB IDE 中打開

• SWAN
• JS

代碼示例 3：timingFunction

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

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

在 WEB IDE 中打開

• SWAN
• JS

本文題目：創(chuàng)新互聯(lián)百度小程序教程：swan.createAnimation
文章起源：http://m.fisionsoft.com.cn/article/cdjdecc.html