Quark v1.2.0 Documentation

Documentation Index | Home

quark/action

quark/action #

KeyframeIn #

@type KeyframeIn = StyleSheet|CSSNameExp

ActionIn #

@type ActionIn = Action|KeyframeIn[]| {
playing?: boolean;
loop?: number;
speed?: number;
spawn?: ActionIn[];
seq?: ActionIn[];
keyframe?: KeyframeIn[];
}

Class: Keyframe #

Keyframe #

@extends StyleSheet

keyframe.index #

Get Keyframe index in the keyframe action

@get index: number

keyframe.time #

Get Keyframe time poing

@get time: number

keyframe.curve #

Get transition curve

@get curve: types.Curve

keyframe.itemsCount #

Get StyleSheet items count

@get itemsCount: number

keyframe.apply(view) #

apply style to view

@param view: View
@return void

keyframe.fetch(view) #

fetch style from view

@param view: View
@return void

Class: Action #

Action #

Action base type, this is an abstract type without a constructor

@abstract

action.duration #

Get action playtime long

@get duration: number

action.playing #

Set/Get action playing state, if set then play() or stop() is called

playing: boolean

action.loop #

Set/Get action loop, the zero means not loop

loop: number

action.speed #

Set/Get action speed

speed: number

action.play() #

To play action

@return this

action.stop() #

To stop action

@return this

action.seek(time) #

Jump to target time, after calling it, it will reset the internal looped

@param time: Uint unit as ms
@return this

action.seekPlay(time) #

Jump to the target time and start playing. The internal looped will be reset after calling

@param time: Uint unit as ms
@return this

action.seekStop(time) #

Jump to the target time and stop playing. The internal looped will be reset after calling

@param time: Uint unit as ms
@return this

action.before(action) #

Add a sibling action to the front of itself.
The current action needs to have a parent action else it will be invalid.

@param action: Action
@return void

action.after(action) #

Add a sibling action to the back of itself.
The current action needs to have a parent action, otherwise it will be invalid.

@param action: Action
@return void

action.remove() #

Deleting myself from the parent

@return void

action.append(child) #

Add sub-actions to the end. Note: {KeyframeAction} cannot add sub-actions

@param child: Action
@return void

action.clear() #

Clear all sub-actions or keyframes. After clearing, the action will stop immediately.

@return void

action.constructor(win) #

@param win: Window

Class: SpawnAction #

SpawnAction #

@extends Action

Class: SequenceAction #

SequenceAction #

@extends Action

Class: KeyframeAction #

KeyframeAction #

@extends Action

keyframeaction.time #

get play time

@get time: number

keyframeaction.frame #

get playing frame index

@get frame: number

keyframeaction.length #

get count of frames

@get length: number

keyframeaction.indexed #

Get the {Keyframe} for index

@get indexed: Keyframe

keyframeaction.addFrame(time,curve?) #

By time and curve add keyframe，and return it

@param time: Uint Keyframe time point
@param curve?: types.CurveIn No curve use 'ease' as default

Can use 'linear'、'ease'、'easeIn'、'easeOut'、'easeInOut' as params

@return Keyframe

keyframeaction.addFrameWithCss(cssExp,time?,curve?) #

Add keyframes by the cssExp stylesheet name expression and return keyframes

@param cssExp: CSSNameExp css exp
@param time?: Uint Keyframe time point, Default as zero
@param curve?: types.CurveIn If not passed, curve Default as 'ease'
@return Keyframe

keyframeaction.add(styleOrCssExp,time?,curve?) #

Add keyframes through cssExp stylesheet name expression or target property table,
and return keyframes

@param styleOrCssExp: KeyframeIn style sheet or css exp
@param time?: Uint Keyframe time point, Default as zero
@param curve?: types.CurveIn If not passed, curve Default as 'ease'
@return Keyframe

createAction(win,arg,parent?) #

Create an action through the json parameter. If the arg passed in is Action,
skip the creation process and return directly.
If the parent action is passed in, append the newly created action to the end of parent after creation.
If the passed in parameter is an Array, create a KeyframeAction and use this Array to create the corresponding Keyframe
If the passed in parameter has a seq attribute, create a SequenceAction
If the passed in parameter has a spawn attribute, create a SpawnAction
If there is no seq or spawn in the passed in parameter, create a KeyframeAction
If the object's internal attribute keyframe is Array, use this Array to create a Keyframe

For example:

var act1 = createAction(win, [
    { time:0, x:0 },
    { time:1000, x:100 },
]);
var act1 = createAction(win, {
    keyframe: [
        { time:0, x:0, curve: 'linear', },
        { time:1000, x:100 },
    ]
});
// Creating `SequenceAction` and have two `KeyframeAction`
var act2 = createAction(win, {
    loop: 999999,
    seq: [
        {
            keyframe: [
                { time:0, x: 0 },
                { time:1000, x: 100 },
            ]
        },
        [
            { time:0, x: 100 },
            { time:1000, x: 0 },
        ]
    ]
})

@param win: Window
@param arg: ActionIn
@param parent?: Action
@return Action

ActionCb #

@callback ActionCb(e)
@param e: ActionEvent

transition(view,to,fromOrCb?,cb?) #

Create a view style transition action by the style and play this action,
and callback after completion
Callback: cb()