action.md

ngui/action

create(json[,parent])

• 通过json数据创建动作，如果传入的json为Action跳过创建过程

  如果传入父动作，创建完成追加新创建的动作到parent结尾

• 如果传入的数据是一个Array创建KeyframeAction并使用这个Array创建Frame

• 如果传入的数据里有seq属性创建SequenceAction

• 如果传入的数据里有spawn属性创建SpawnAction

• 如果传入的数据里没有seq也没spawn创建KeyframeAction，

对像的内部属性frame如果为Array，那么用这个Array创建Frame

• @arg json {Object}
• @arg [parent] {GroupAction}
• @ret {Action}

Example:

var act1 = action.create([
    { time:0, x:0 },
    { time:1000, x:100 },
]);
var act1 = action.create({
    delay: 1000,
    frame: [
        { time:0, x:0, curve: 'linear', },
        { time:1000, x:100 },
    ]
});
// 创建SequenceAction并有两子KeyframeAction
var act2 = action.create({
    loop: -1,
    seq: [
        {
            frame: [
                { time:0, x: 0 },
                { time:1000, x: 100 },
            ]
        },
        [
            { time:0, x: 100 },
            { time:1000, x: 0 },
        ]
    ]
})

transition(view,style[,delay[,cb]])

transition(view,style[,cb])

• 通过样式创建视图样式过渡动作并播放这个动作，完成后回调

Callback: cb()

• @arg view {View}
• @arg style {Object}
• @arg [delay] {uint} ms
• @arg [cb] {Function}
• @ret {KeyframeAction}

Example:

// 1秒后过渡完成并回调
action.transition(view, {
    time: 1000,
    y: 100, 
    x: 100,
}, ()={
    console.log('view transition end');
})
// 延时1秒后开始播放，并使用线性过渡
action.transition(view2, {
    time: 1000,
    curve: 'linear',
    y: 100, 
    x: 100,
}, 1000)

Class: Action

• abstract class

• 动作基础类型，这是个抽象类型没有构造函数

Action.play()

• 播放动作

Action.stop()

• 停止动作

Action.seek(time)

• 跳转到目标time时间，调用后会重置loopd

• 不包含延时时间，如果想在延时之前，可传入负数time

• @arg time {int} ms

Action.seekPlay(time)

• 跳转到目标time时间，并开始播放，调用后会重置loopd

• @arg time {int} ms

Action.seekStop(time)

• 跳转到目标time时间，并停止播放，调用后会重置loopd

• @arg time {int} ms

Action.clear()

• 清空动作,清空动作后会立即停止动作

Action.loop

• 动作循环播放的次数，-1表示无限循环

• {int}

Get: Action.loopd

• 当前动作已经循环播放的次数

• {uint}

Action.delay

• 延时播放

• {uint} ms

Get: Action.delayd

• 延时过去的时间

• {uint} ms

Action.speed

• 播放速率，默认为1.0，可设置的范围在0.1到10.0之间

• {float} 0.1-10

Action.playing

• 是否播放中，设置action.playing = true相当调用action.play()

• {bool}

Get: Action.duration

• 当前动作的时长不包括延时，对于SpawnAction取最长的子动作

• {uint} ms

Get: Action.parent

• 父动作，如果没有父动作返回null

• {GroupAction}

Class: GroupAction

• abstract class
• extends Action

• 动作集合，这是个抽象类型没有构造函数

Get: GroupAction.length

• {uint}

  GroupAction.append(child)

• 追加子动作到结尾

• @arg child {Action}

  GroupAction.insert(index, child)

• 插入子动作到index的位置

• @arg index {uint}

• @arg child {Action}

  GroupAction.removeChild(index)

• 通过index删除子动作

• @arg index {uint}

  GroupAction.children(index)

• 获取子动作

• @arg index {uint}
• @ret {Action}

Class: SpawnAction

• extends GroupAction

• 并行子动作实现，所有的动作并行一起播放

SpawnAction.spawn(index)

• 返回子动作children(index)的别名函数

• @arg index {uint}
• @ret {Action}

Class: SequenceAction

• extends GroupAction

• 串行子动作实现，子动作一个接一个串行播放

SequenceAction.seq(index)

• 返回子动作children(index)的别名函数

• @arg index {uint}
• @ret {Action}

Class: KeyframeAction

• extends Action

• 关键帧动作, 不能包含子动作

KeyframeAction.hasProperty(name)

• 测试当前是否添加了属性名name

• @arg name {PropertyName}
• @ret {bool}

KeyframeAction.matchProperty(name)

• 测试属性名称是否与当前绑定的视图匹配

• @arg name {PropertyName}
• @ret {bool}

KeyframeAction.frame(index)

• 通过索引获取关键帧

• @arg index {uint}
• @ret {Frame}

KeyframeAction.add([time[,curve]])

• 通过time时间与曲线curve添加关键帧，并返回关键帧

• arg [time=0] {uint} 不传入time默认为0

• arg [curve='ease'] {Curve} 不传入curve默认为EASE

  可使用 LINEAR、EASE、EASE_IN、EASE_OUT、EASE_IN_OUT

或 'linear'、'ease'、'easeIn'、'easeOut'、'easeInOut' 做为参数。

• @ret {Frame}

KeyframeAction.add([style])

• 通过style对像属性添加关键帧，并返回关键帧

• arg [style] {Object}
• @ret {Frame}

Get: KeyframeAction.first

• 第一个关键帧

• {Frame}

Get: KeyframeAction.last

• 最后一个关键帧

• {Frame}

Get: KeyframeAction.length

• 关键帧数量

• {uint}

Get: KeyframeAction.position

• 当前关键帧的播放位置，-1表示还未开始播放

• {int}

Get: KeyframeAction.time

• 当前播放时间time

• {uint} ms

Class: Frame

• 关键帧

Frame.fetch([view])

• 通过视图抓取样式属性填充到当前frame

  如果不传入视图抓取当前绑定的视图样式属性

• @arg [view] {View}

Frame.flush()

• 恢复当前关键帧样式属性为默认值

Get: Frame.index

• 关键帧所在的动作中的索引位置

• {uint}

Frame.time

• 关键帧的所在动作中的时间time

• {uint} ms

Get: Frame.host

• 关键帧所在的动作KeyframeAction

• {KeyframeAction}

Frame.curve

• 当前关键帧到下一个关键帧的过渡曲线

可使用 LINEAR、EASE、EASE_IN、EASE_OUT、EASE_IN_OUT

或 'linear'、'ease'、'easeIn'、'easeOut'、'easeInOut' 做为值设置。

• {Curve}

Frame.translate

• {Vec2}

Frame.scale

• {Vec2}

Frame.skew

• {Vec2}

Frame.origin

• {Vec2}

Frame.margin

• {Value}

Frame.border

• {Border}

Frame.borderWidth

• {float}

Frame.borderColor

• {Color}

Frame.borderWadius

• {float}

Frame.minWidth

• {Value}

Frame.minHeight

• {Value}

Frame.start

• {Vec2}

Frame.ratio

• {Vec2}

Frame.width

• {Value|float}

Frame.height

• {Value|float}

Frame.x

• {float}

Frame.y

• {float}

Frame.scaleX

• {float}

Frame.scaleY

• {float}

Frame.skewX

• {float}

Frame.skewY

• {float}

Frame.originX

• {float}

Frame.originY

• {float}

Frame.rotateZ

• {float}

Frame.opacity

• {float}

Frame.visible

• {bool}

Frame.marginLeft

• {Value}

Frame.marginTop

• {Value}

Frame.marginRight

• {Value}

Frame.marginBottom

• {Value}

Frame.borderLeft

• {Border}

Frame.borderTop

• {Border}

Frame.borderRight

• {Border}

Frame.borderBottom

• {Border}

Frame.borderLeftWidth

• {float}

Frame.borderTopWidth

• {float}

Frame.borderRightWidth

• {float}

Frame.borderBottomWidth

• {float}

Frame.borderLeftColor

• {Color}

Frame.borderTopColor

• {Color}

Frame.borderRightColor

• {Color}

Frame.borderBottomColor

• {Color}

Frame.borderRadiusLeftTop

• {float}

Frame.borderRadiusRightTop

• {float}

Frame.borderRadiusRightBottom

• {float}

Frame.borderRadiusLeftBottom

• {float}

Frame.backgroundColor

• {Color}

Frame.newline

• {bool}

Frame.contentAlign

• {ContentAlign}

Frame.textAlign

• {TextAlign}

Frame.maxWidth

• {Value}

Frame.maxHeight

• {Value}

Frame.startX

• {float}

Frame.startY

• {float}

Frame.ratioX

• {float}

Frame.ratioY

• {float}

Frame.repeat

• {Repeat}

Frame.textBackgroundColor

• {TextColor}

Frame.textColor

• {TextColor}

Frame.textSize

• {TextSize}

Frame.textStyle

• {TextStyle}

Frame.textFamily

• {TextFamily}

Frame.textLineHeight

• {TextLineHeight}

Frame.textShadow

• {TextShadow}

Frame.textDecoration

• {TextDecoration}

Frame.textOverflow

• {TextOverflow}

Frame.textWhiteSpace

• {TextWhiteSpace}

Frame.alignX

• {Align}

Frame.alignY

• {Align}

Frame.shadow

• {Shadow}

Frame.src

• {String}

Frame.backgroundImage

• {String}

LINEAR

EASE

EASE_IN

EASE_OUT

EASE_IN_OUT