Frame

Frame

Animation's Frame

Constructor

new Frame(propertiesopt)

Source:
Name Type Default Description
properties? string | Record<string, any> {} properties
Example
const frame = new Scene.Frame({
      display: "none"
      transform: {
          translate: "50px",
          scale: "5, 5",
      }
  });

Extends

Methods

clear() → {Frame}

Source:
Remove All Properties
Returns:
An instance itself
Type
Frame

clone() → {Frame}

Source:
clone frame.
Example
frame.clone();
Returns:
An instance of clone
Type
Frame

emit(eventName, paramopt) → {boolean}

Source:
Overrides:
Fires an event to call listeners.
Name Type Default Description
eventName string | ... Event name
param? TargetParam<any> | ... {} Event parameter

emit<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

Name Type Description
eventName extends Param ? Name : never

emit<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Name Type Description
eventName Name
param TargetParam<Param>
Example
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
Returns:
If false, stop the event.
Type
boolean

get(…args)

Source:
get property value
Name Type Attributes Description
args Number | String | PropertyObject <repeatable>
 property name or value
Example
frame.get("display") // => "none", "block", ....
      frame.get("transform", "translate") // => "10px,10px"

getKeys(...args) → {string[]}

Source:
get property keys
Name Type Description
...args NameType[] property names
Example
frame.gets("display") // => []
      frame.gets("transform") // => ["translate"]
Returns:
Type
string[]

getNames() → {string[][]}

Source:
Gets the names of properties.
Example
// one parameter
  frame.set({
      display: "none",
      transform: {
          translate: "10px, 10px",
          scale: "1",
      },
  });

  // [["display"], ["transform", "translate"], ["transform", "scale"]]
  console.log(frame.getNames());
Returns:
the names of properties.
Type
string[][]

getOrderObject()

Source:
get properties order object
Example
console.log(frame.getOrderObject());

getOrders(names) → {NameType[] | undefined}

Source:
get properties orders
Name Type Description
names NameType[] property names
Example
frame.getOrders(["display"]) // => []
      frame.getOrders(["transform"]) // => ["translate", "scale"]
Returns:
Type
NameType[] | undefined

gets(...args) → {KeyValueChildren[]}

Source:
get properties array
Name Type Description
...args NameType[] property names
Example
frame.gets("display") // => []
      frame.gets("transform") // => [{ key: "translate", value: "10px, 10px", children: [] }]
Returns:
Type
KeyValueChildren[]

has(…args)

Source:
check that has property.
Name Type Attributes Description
args String <repeatable>
 property name
Example
frame.has("property", "display") // => true or false

merge(frame) → {Frame}

Source:
merge one frame to other frame.
Name Type Description
frame Frame target frame.
Example
frame.merge(frame2);
Returns:
An instance itself
Type
Frame

off(eventNameopt, listeneropt) → {this}

Source:
Overrides:
Remove listeners registered in the event target.
Name Type Description
eventName? string | object | ... Name of the event to be removed
listener? EventListener<Events[any], this> | ... listener function of the event to be removed

off<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

Name Type Description
eventName? Name
listener? EventListener<Param, this>

off(events) → {this}

Name Type Description
events EventHash<Events, this>
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Remove all listeners.
emitter.off();

// Remove all listeners in "A" event.
emitter.off("a");


// Remove "listener" listener in "a" event.
emitter.off("a", listener);
Returns:
Type
this

on(eventName, listeneropt) → {this}

Source:
Overrides:
Add a listener to the registered event.
Name Type Description
eventName string | object | ... Name of the event to be added
listener? EventListener<Events[any], this> | ... listener function of the event to be added

on<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

Name Type Description
eventName Name
listener EventListener<Param, this>

on(events) → {this}

Name Type Description
events EventHash<Events, this>
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add listener in "a" event
emitter.on("a", () => {
});
// Add listeners
emitter.on({
 a: () => {},
 b: () => {},
});
Returns:
Type
this

once<Name extends keyof Events & string, Param = Events[Name]>(eventName, listeneropt) → {Promise<OnEvent<Param, this>>}

Source:
Overrides:
Add a disposable listener and Use promise to the registered event.
Name Type Description
eventName Name Name of the event to be added
listener? EventListener<Param, this> disposable listener function of the event to be added
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add a disposable listener in "a" event
emitter.once("a", () => {
});

// Use Promise
emitter.once("a").then(e => {
});
Returns:
Type
Promise<OnEvent<Param, this>>

remove(…args) → {Frame}

Source:
remove property value
Name Type Attributes Description
args String <repeatable>
 property name
Example
frame.remove("display")
Returns:
An instance itself
Type
Frame

set(…args) → {Frame}

Source:
set property
Name Type Attributes Description
args Number | String | PropertyObject <repeatable>
 property names or values
Example
// one parameter
  frame.set({
      display: "none",
      transform: {
          translate: "10px, 10px",
          scale: "1",
      },
      filter: {
          brightness: "50%",
          grayscale: "100%"
      }
  });

  // two parameters
  frame.set("transform", {
      translate: "10px, 10px",
      scale: "1",
  });

  // three parameters
  frame.set("transform", "translate", "50px");
Returns:
An instance itself
Type
Frame

setOrderObject(obj)

Source:
set properties orders object
Name Type Description
obj IObject<NameType[]> properties orders object
Example
frame.setOrderObject({
          "": ["transform"],
          "transform": ["scale", "tralsate"],
      });

setOrders(names, orders) → {NameType[]}

Source:
set properties orders
Name Type Description
names NameType[] property names
orders NameType[] orders
Example
frame.getOrders(["transform"]) // => ["translate", "scale"]
      frame.setOrders(["transform"], ["scale", "tralsate"])
Returns:
Type
NameType[]

toCSS() → {string}

Source:
Deprecated:
  • Yes
Specifies an css text that coverted the frame. Use `toCSSText()` method.
Returns:
cssText
Type
string

toCSSObject(useCamelCaseopt) → {object}

Source:
Specifies an css object that coverted the frame.
Name Type Description
useCamelCase? boolean If you want to return camel case name like css property or react, use the following parameter
Returns:
cssObject
Type
object

toCSSText() → {string}

Source:
Specifies an css text that coverted the frame.
Returns:
cssText
Type
string

trigger<Name extends keyof Events>(eventName, paramopt) → {boolean}

Source:
Overrides:
Fires an event to call listeners.
Name Type Default Description
eventName Name | ... Event name
param? TargetParam<any> | ... {} Event parameter

trigger<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

Name Type Description
eventName extends TargetParam<Param> ? Name : never

trigger<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Name Type Description
eventName Name
param TargetParam<Param>
Example
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
Returns:
If false, stop the event.
Type
boolean