quark/action #

KeyframeIn #

type KeyframeIn = StyleSheets | CSSNameExp

ActionIn #

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

Class: Keyframe #

Keyframe #

Extends: StyleSheets

keyframe.index #

Get Keyframe index in the keyframe action

readonly index: number

keyframe.time #

Get Keyframe time poing

readonly time: number

keyframe.curve #

Get transition curve

readonly curve: types.Curve

keyframe.itemsCount #

Get StyleSheet items count

readonly itemsCount: number

keyframe.apply(view) #

apply style to view

apply(view: View): void

keyframe.fetch(from) #

fetch style from view

fetch(from: View): void

Class: Action #

Action #

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

• @abstract

action.duration #

Get action playtime long

readonly 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

play(): this

action.stop() #

To stop action

stop(): this

action.seek(time) #

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

seek(time: Uint): this

Parameters:

• time — unit as ms

action.seekPlay(time) #

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

seekPlay(time: Uint): this

Parameters:

• time — unit as ms

action.seekStop(time) #

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

seekStop(time: Uint): this

Parameters:

• time — unit as ms

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.

before(action: Action): 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.

after(action: Action): void

action.remove() #

Deleting myself from the parent

remove(): void

action.append(child) #

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

append(child: Action): void

action.clear() #

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

clear(): void

action.constructor(win) #

constructor(win: Window)

Class: SpawnAction #

SpawnAction #

Extends: Action

Class: SequenceAction #

SequenceAction #

Extends: Action

Class: KeyframeAction #

KeyframeAction #

Extends: Action

keyframeaction.time #

get play time

readonly time: number

keyframeaction.frame #

get playing frame index

readonly frame: number

keyframeaction.length #

get count of frames

readonly length: number

keyframeaction.indexed #

Get the {Keyframe} for index

readonly indexed: Keyframe

keyframeaction.addFrame(time,curve?) #

By time and curve add keyframe，and return it

addFrame(time: Uint, curve?: types.CurveIn): Keyframe

Parameters:

• time — Keyframe time point
• curve? — No curve use 'ease' as default

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

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

Add keyframes by the cssExp stylesheet name expression and return keyframes

addFrameWithCss(cssExp: CSSNameExp, time?: Uint, curve?: types.CurveIn): Keyframe

Parameters:

• cssExp — css exp
• time? — Keyframe time point, Default as zero
• curve? — If not passed, curve Default as 'ease'

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

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

add(styleOrCssExp: KeyframeIn, time?: Uint, curve?: types.CurveIn): Keyframe

Parameters:

• styleOrCssExp — style sheet or css exp
• time? — Keyframe time point, Default as zero
• curve? — If not passed, curve Default as 'ease'

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

  createAction(win: Window, arg: ActionIn, parent?: Action): Action

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 },
        ]
    ]
})

Interface: TransitionResult #

TransitionResult #

Extends: Promise<ActionEvent>

transitionresult.action #

The action instance of this transition

readonly action: KeyframeAction

transition(view,to,from?) #

Create a view style transition action by the style and play this action

transition(view: View, to: KeyframeIn, from?: KeyframeIn): TransitionResult

Returns: Promise object, when the transition is completed, the promise is resolved.

For example:

// The transition is completed and callback is made after 1 second
transition(view, {
    time: 1000,
    y: 100,
    x: 100,
}).then((evt)=>{
    console.log('transition end');
});

// Use an ease-in-out transition
transition(view, {
    time: 1000,
    curve: 'linear',
    y: 100,
    x: 100,
})