animation

2022-06-13 13:47 更新

frame 動畫,支持平移,縮放,旋轉(zhuǎn)和透明度變化

僅支持 frame,不支持 window 以及 frameGroup 里面的 frame

animation({params}, callback(ret, err))

params

name:

  • 類型:字符串
  • 默認(rèn)值:當(dāng)前 frame
  • 描述:frame 名字

delay:

  • 類型:數(shù)字
  • 默認(rèn)值:0
  • 描述:(可選項(xiàng))動畫延遲時(shí)間,單位毫秒,默認(rèn)立即開始

duration:

  • 類型:數(shù)字
  • 默認(rèn)值:0
  • 描述:(可選項(xiàng))動畫過渡時(shí)間,單位毫秒

curve:

  • 類型:字符串
  • 默認(rèn)值:ease_in_out
  • 描述:(可選項(xiàng))動畫曲線類型,指定動畫開始和結(jié)束時(shí)的快慢
  • 取值范圍

ease_in_out     //開始和結(jié)束時(shí)慢
ease_in         //開始時(shí)慢
ease_out        //結(jié)束時(shí)慢
linear          //整個動畫過程速率一樣

repeatCount:

  • 類型:數(shù)字
  • 默認(rèn)值:0
  • 描述:(可選項(xiàng))動畫次數(shù),默認(rèn)不重復(fù),為-1時(shí)無限重復(fù)

autoreverse:

  • 類型:布爾
  • 默認(rèn)值:false
  • 描述:(可選項(xiàng))一次動畫結(jié)束后是否自動反轉(zhuǎn)動畫

alpha:

  • 類型:數(shù)字
  • 默認(rèn)值:無
  • 描述:(可選項(xiàng))整個頁面的透明度,介于0 1之間,Android 不支持

translation:

  • 類型:JSON
  • 默認(rèn)值:無
  • 描述:(可選項(xiàng))位置平移參數(shù)
  • 內(nèi)部字段:

{
    x: 0,         //x軸方向上的平移距離,默認(rèn)為0
    y: 0,         //y軸方向上的平移距離,默認(rèn)為0
    z: 0          //z軸方向上的平移距離,默認(rèn)為0,Android不支持
}

scale:

  • 類型:JSON
  • 默認(rèn)值:無
  • 描述:(可選項(xiàng))頁面縮放參數(shù),Android 不支持
  • 內(nèi)部字段:

{
    x: 1,         //x軸方向上的放大倍率,默認(rèn)為1
    y: 1,         //y軸方向上的放大倍率,默認(rèn)為1
    z: 1          //z軸方向上的放大倍率,默認(rèn)為1
}

rotation:

  • 類型:JSON
  • 默認(rèn)值:無
  • 描述:(可選項(xiàng))頁面旋轉(zhuǎn)參數(shù),Android 不支持
  • 內(nèi)部字段:

{
    degree:0,     //旋轉(zhuǎn)角度,默認(rèn)0
    x: 0,         //繞x軸旋轉(zhuǎn),默認(rèn)為0
    y: 0,         //繞y軸旋轉(zhuǎn),默認(rèn)為0
    z: 1          //繞z軸旋轉(zhuǎn),默認(rèn)為1
}

callback(ret, err)

動畫結(jié)束后的回調(diào)

示例代碼

api.animation({
    name: 'page1',
    delay: 1000,
    duration: 3000,
    curve: 'ease_in',
    repeatCount: 2,
    autoreverse: true,
    alpha: 0.6,
    translation: {
        x: 0,
        y: 100,
        z: 0
    },
    scale: {
        x: 1.2,
        y: 1,
        z: 1
    },
    rotation: {
        degree: 45,
        x: 0,
        y: 0,
        z: 1
    }
}, function(ret, err) {
    api.alert({
        msg:'動畫結(jié)束'
    });
});

可用性

iOS系統(tǒng),Android系統(tǒng)

可提供的1.0.0及更高版本

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號