PersimmonM 动画

pm.createAnimation

创建动画引擎。

参数 类型 描述
frames Number 整个动画运行总帧数
delay Number 两帧起始点时间间隔,含每帧绘图时间,单位毫秒ms
var anim = pm.createAnimation(20, 50)   /* 20 帧, 50 ms一帧 */
参数 类型 描述
id String 动画引擎背景范围对应控件,默认为当前窗口
frames Number 整个动画运行总帧数
delay Number 两帧起始点时间间隔,含每帧绘图时间,单位毫秒ms
var anim = pm.createAnimation("panel1", 20, 50)   /* panel1 背景范围, 20 帧, 50 ms一帧 */

move

创建并往动画引擎中添加一个移动动画。

参数 类型 描述
ID String 控件ID
x2 Number 动画结束点X坐标
y2 Number 动画结束点Y坐标
var anim = pm.createAnimation(20, 50)   /* 20 帧,50 ms一帧 */
anim.move("panel2", 400, 200);          /* 控件 panel2 动画方式移动到坐标(400,200) */
参数 类型 描述
ID String 控件ID
x1 Number 动画起始点X坐标
y1 Number 动画起始点Y坐标
x2 Number 动画结束点X坐标
y2 Number 动画结束点Y坐标
var anim = pm.createAnimation(20, 50)   /* 20 帧,50 ms一帧 */
anim.move("panel2", 0, 200, 400, 200);  /* 控件 panel2 动画方式从坐标(0, 200)移动到坐标(400,200) */
  • fade

    move 动画使能配置淡入淡出功能方法,移动动画会在移动过程中带有淡入淡出效果,默认淡入。

    参数 类型 描述
    fade_out Bool true 则淡出,即起始 alpha 值为255,结束 alpha 值为0;false 则相反,默认 false
    var anim = pm.createAnimation(20, 50)   /* 20 帧,50 ms一帧 */
    var move = anim.move("panel2", 0, 200, 400, 200);  /* 控件 panel2 动画方式从坐标(0, 200)移动到坐标(400,200) */
    move.fade();    /* move.fade(false);  淡入效果*/
    
    参数 类型 描述
    fade1 Number 起始 alpha 值
    fade2 Number 结束 alpha 值

    注: fade1 < fade2 为淡入效果,相反则为淡出

    var anim = pm.createAnimation(20, 50)   /* 20 帧,50 ms一帧 */
    anim.move("panel2", 0, 200, 400, 200);  /* 控件 panel2 动画方式从坐标(0, 200)移动到坐标(400,200) */
    move.fade(255, 100);    /* 淡出效果*/
    
  • progress

    配置动画进程。

    参数 类型 描述
    pro1 Number 动画起始帧
    pro2 Number 动画结束帧
    var anim = pm.createAnimation(20, 50)   /* 20 帧,50 ms一帧 */
    anim.move("panel2", 0, 200, 400, 200);  /* 控件 panel2 动画方式从坐标(0, 200)移动到坐标(400,200) */
    move.progress(5, 15);   /* 引擎 20 帧动画,move 动画在 5 到 15 帧运行,第5帧开始,第15帧后会继续显示 */
    
  • interpolator

    配置动画插值器。

    参数 类型 描述
    inter String 动画插值器,默认匀速不需要配置,目前支持 insquare , outsquare
    var anim = pm.createAnimation(20, 50)   /* 20 帧,50 ms一帧 */
    anim.move("panel2", 0, 200, 400, 200);  /* 控件 panel2 动画方式从坐标(0, 200)移动到坐标(400,200) */
    move.interpolator("insquare");
    

fade

往动画引擎中添加一个淡入淡出动画。

参数 类型 描述
ID String 控件ID
fade1 Number 动画起始透明度值(选填)
fade2 Number 动画结束透明度值(选填)

注: fade1 < fade2 为淡入效果,相反则为淡出,默认值为 0;

var anim = pm.createAnimation(20, 50)   /* 20 帧,50 ms一帧 */
anim.fade("panel2");  /* 控件 panel2 淡入淡出动画 */
var anim = pm.createAnimation(20, 50)   /* 20 帧,50 ms一帧 */
anim.fade("panel2", 0, 255);    /* 控件 panel2 淡入淡出动画 */
参数 类型 描述
ID String 控件ID
fade1 Number 动画起始透明度值
fade2 Number 动画结束透明度值
x1 Number 动画X坐标
y1 Number 动画Y坐标

注: fade1 < fade2 为淡入效果,相反则为淡出,默认值为 0、255;x1,y1 默认为控件坐标;

var anim = pm.createAnimation(20, 50)   /* 20 帧,50 ms一帧 */
anim.fade("panel2", 0, 255, 100, 200);
  • progress

    功能同移动动画。

  • interpolator

    功能同移动动画。

start

启动动画引擎。

var anim = pm.createAnimation(20, 50)   /* 20 帧,50 ms一帧 */
anim.fade("panel2", 0, 255, 100, 200);
anim.start();