SceneItem

Scene. SceneItem

manage Frame Keyframes and play keyframes.

Constructor

new SceneItem(propertiesopt, optionsopt)

Source:
Name Type Attributes Description
properties Object <optional>
 properties
options AnimatorOptions <optional>
 options
Example
const item = new Scene.SceneItem({
		0: {
			display: "none",
		},
		1: {
			display: "block",
			opacity: 0,
		},
		2: {
			opacity: 1,
		}
	});

Extends

Methods

append(item) → {Scene.SceneItem}

Source:
Append the item or object at the last time.
Name Type Description
item SceneItem | object the scene item or item object
Example
item.append(new SceneItem({
	0: {
		opacity: 0,
	},
	1: {
		opacity: 1,
	}
}));
item.append({
	0: {
		opacity: 0,
	},
	1: {
		opacity: 1,
	}
});
item.set(item.getDuration(), {
	0: {
		opacity: 0,
	},
	1: {
		opacity: 1,
	}
});
Returns:
An instance itself
Type
Scene.SceneItem

clone(optionsopt) → {Scene.SceneItem}

Source:
clone SceneItem.
Name Type Attributes Description
options AnimatorOptions <optional>
 animator options
Example
item.clone();
Returns:
An instance of clone
Type
Scene.SceneItem

copyFrame(fromTime, toTime) → {Scene.SceneItem}

Source:
Copy frame of the previous time at the next time.
Name Type Description
fromTime number | string | object the previous time
toTime number the next time
Example
// getFrame(0) equal getFrame(1)
item.copyFrame(0, 1);
Returns:
An instance itself
Type
Scene.SceneItem

end() → {Scene.Animator}

Source:
Overrides:
end animator
Returns:
An instance itself.
Type
Scene.Animator

finish() → {Scene.Animator}

Source:
Overrides:
end animator
Returns:
An instance itself.
Type
Scene.Animator

get(time, …args) → {Number|String|Scene.PropertyObejct}

Source:
Get properties of the sceneItem at that time
Name Type Attributes Description
time Number time
args String | Object <repeatable>
 property's name or properties
Example
item.get(0, "a"); // item.getFrame(0).get("a");
item.get(0, "transform", "translate"); // item.getFrame(0).get("transform", "translate");
Returns:
property value
Type
Number | String | Scene.PropertyObejct

getActiveDuration() → {number}

Source:
Overrides:
Get the animator's total duration excluding delay
Example
animator.getTotalDuration();
Returns:
Total duration excluding delay
Type
number

getDelay() → {number}

Source:
Overrides:
Get a delay for the start of an animation.
Returns:
delay
Type
number

getDirection() → {"normal"|"reverse"|"alternate"|"alternate-reverse"}

Source:
Overrides:
Get whether an animation should be played forwards, backwards or in alternate cycles.
Returns:
direction
Type
"normal" | "reverse" | "alternate" | "alternate-reverse"

getDuration() → {number}

Source:
Overrides:
Get how long an animation should take to complete one cycle.
Returns:
duration
Type
number

getEasing() → {0|function}

Source:
Overrides:
Get the speed curve of an animation.
Returns:
easing
Type
0 | function

getEasingName() → {string}

Source:
Overrides:
Get the speed curve's name
Returns:
the curve's name.
Type
string

getFillMode() → {"none"|"forwards"|"backwards"|"both"}

Source:
Overrides:
Get fill mode for the item when the animation is not playing (before it starts, after it ends, or both)
Returns:
fillMode
Type
"none" | "forwards" | "backwards" | "both"

getFrame(time) → {Scene.Frame}

Source:
get sceneItem's frame at that time
Name Type Description
time Number frame's time
Example
const frame = item.getFrame(time);
Returns:
sceneItem's frame at that time
Type
Scene.Frame

getId() → {String}

Source:
Specifies the unique indicator of the item.
Example
const item = scene.newItem("item");
console.log(item.getId()); // item
Returns:
the indicator of the item.
Type
String

getIterationCount() → {"inifnite"|number}

Source:
Overrides:
Get the number of times an animation should be played.
Returns:
iterationCount
Type
"inifnite" | number

getIterationTime() → {number}

Source:
Overrides:
Get the animator's current iteration time
Example
animator.getIterationTime();
Returns:
current iteration time
Type
number

getNowFrame(time, easing) → {Scene.Frame}

Source:
Get frame of the current time
Name Type Description
time Number the current time
easing function the speed curve of an animation
Example
let item = new Scene.SceneItem({
	0: {
		display: "none",
	},
	1: {
		display: "block",
		opacity: 0,
	},
	2: {
		opacity: 1,
	}
});
// opacity: 0.7; display:"block";
const frame = item.getNowFrame(1.7);
Returns:
frame of the current time
Type
Scene.Frame

getPlaySpeed() → {number}

Source:
Overrides:
Get the animator's play speed
Returns:
playSpeed
Type
number

getPlayState() → {"paused"|"running"}

Source:
Overrides:
Get whether the animation is running or paused.
Returns:
playState
Type
"paused" | "running"

getTime() → {number}

Source:
Overrides:
Get the animator's current time
Example
animator.getTime();
Returns:
current time
Type
number

getTotalDuration() → {number}

Source:
Overrides:
Get the animator's total duration including delay
Example
animator.getTotalDuration();
Returns:
Total duration
Type
number

hasFrame(time) → {Boolean}

Source:
check if the item has a frame at that time
Name Type Description
time Number frame's time
Example
if (item.hasFrame(10)) {
	// has
} else {
	// not
}
Returns:
true: the item has a frame // false: not
Type
Boolean

isDelay() → {boolean}

Source:
Overrides:
Check if the current state of animator is delayed.
Returns:
check delay state
Type
boolean

isEnded() → {boolean}

Source:
Overrides:
Check if the animator has reached the end.
Example
animator.isEnded(); // true or false
Returns:
ended
Type
boolean

isPaused() → {boolean}

Source:
Overrides:
Check if the animator is paused:
Example
animator.isPaused(); // true or false
Returns:
paused
Type
boolean

mergeFrame(fromTime, toTime) → {Scene.SceneItem}

Source:
merge frame of the previous time at the next time.
Name Type Description
fromTime number | string | object the previous time
toTime number | string the next time
Example
// getFrame(1) contains getFrame(0)
item.merge(0, 1);
Returns:
An instance itself
Type
Scene.SceneItem

newFrame(time) → {Scene.Frame}

Source:
Create and add a frame to the sceneItem at that time
Name Type Description
time Number frame's time
Example
item.newFrame(time);
Returns:
Created frame.
Type
Scene.Frame

off(name, callback) → {EventTrigger}

Source:
Overrides:
Dettach an event handler function for one or more events to target
Name Type Description
name String event's name
callback function function to execute when the event is triggered.
Example
const callback = function() {
	console.log("animate");
};
target.on("animate", callback);

target.off("animate", callback);
target.off("animate");
Returns:
An Instance itself.
Type
EventTrigger

on(name, callback) → {EventTrigger}

Source:
Overrides:
Attach an event handler function for one or more events to target
Name Type Description
name String event's name
callback function function to execute when the event is triggered.
Example
target.on("animate", function() {
	console.log("animate");
});

target.trigger("animate");
Returns:
An Instance itself.
Type
EventTrigger

pause() → {Scene.Animator}

Source:
Overrides:
pause animator
Returns:
An instance itself.
Type
Scene.Animator

play() → {Scene.Animator}

Source:
Overrides:
play animator
Returns:
An instance itself.
Type
Scene.Animator

playCSS(exportCSSopt, propertiesopt)

Source:
See:
Play using the css animation and keyframes.
Name Type Attributes Default Description
exportCSS boolean <optional>
 true Check if you want to export css.
properties Object <optional>
 {} The shorthand properties for six of the animation properties.
Properties
Name Type Attributes Description
duration Object <optional>
 The duration property defines how long an animation should take to complete one cycle.
fillMode Object <optional>
 The fillMode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
iterationCount Object <optional>
 The iterationCount property specifies the number of times an animation should be played.
easing String <optional>
 The easing(timing-function) specifies the speed curve of an animation.
delay Object <optional>
 The delay property specifies a delay for the start of an animation.
direction Object <optional>
 The direction property defines whether an animation should be played forwards, backwards or in alternate cycles.
Example
item.playCSS();
item.playCSS(false, {
	direction: "reverse",
	fillMode: "forwards",
});

prepend(item) → {Scene.SceneItem}

Source:
Push the front frames for the time and prepend the scene item or item object.
Name Type Description
item SceneItem | object the scene item or item object
Returns:
An instance itself
Type
Scene.SceneItem

remove(time, propertiesopt) → {Scene.SceneItem}

Source:
remove properties to the sceneItem at that time
Name Type Attributes Description
time Number time
properties String | Object <optional>
 property names or values
Example
item.remove(0, "a");
Returns:
An instance itself
Type
Scene.SceneItem

removeFrame(time) → {Scene.SceneItem}

Source:
remove sceneItem's frame at that time
Name Type Description
time Number frame's time
Example
item.removeFrame(time);
Returns:
An instance itself
Type
Scene.SceneItem

set(time, propertiesopt) → {Scene.SceneItem}

Source:
Set properties to the sceneItem at that time
Name Type Attributes Description
time Number time
properties String | Object <optional>
 property names or values
Example
item.set(0, "a", "b") // item.getFrame(0).set("a", "b")
console.log(item.get(0, "a")); // "b"
Returns:
An instance itself
Type
Scene.SceneItem

setCSS(properties) → {Scene.SceneItem}

Source:
add css styles of items's element to the frame at that time.
Name Type Description
properties Array elements to synchronize item's keyframes.
Example
item.setElement(document.querySelector("#id.class"));
item.setCSS(0, ["opacity"]);
item.setCSS(0, ["opacity", "width", "height"]);
Returns:
An instance itself
Type
Scene.SceneItem

setDelay(delay) → {Scene.Animator}

Source:
Overrides:
Set a delay for the start of an animation.
Name Type Description
delay number delay
Returns:
An instance itself.
Type
Scene.Animator

setDirection(direction) → {Scene.Animator}

Source:
Overrides:
Set whether an animation should be played forwards, backwards or in alternate cycles.
Name Type Description
direction "normal" | "reverse" | "alternate" | "alternate-reverse" direction
Returns:
An instance itself.
Type
Scene.Animator

setDuration(duration) → {Scene.Animator}

Source:
Overrides:
Set how long an animation should take to complete one cycle.
Name Type Description
duration number duration
Returns:
An instance itself.
Type
Scene.Animator

setEasing(curverArray) → {Scene.Animator}

Source:
Overrides:
set animator's easing.
Name Type Description
curverArray array | function The speed curve of an animation.
Example
animator.({
	delay: 2,
	diretion: "alternate",
	duration: 2,
	fillMode: "forwards",
	iterationCount: 3,
	easing: Scene.easing.EASE,
});
Returns:
An instance itself.
Type
Scene.Animator

setElement(elements) → {Scene.SceneItem}

Source:
Specifies an element to synchronize item's keyframes.
Name Type Description
elements Element | Array | string elements to synchronize item's keyframes.
Example
item.setElement(document.querySelector("#id.class"));
item.setElement(document.querySelectorAll(".class"));
Returns:
An instance itself
Type
Scene.SceneItem

setFillMode(fillMode) → {Scene.Animator}

Source:
Overrides:
Set fill mode for the item when the animation is not playing (before it starts, after it ends, or both)
Name Type Description
fillMode "none" | "forwards" | "backwards" | "both" fillMode
Returns:
An instance itself.
Type
Scene.Animator

setFrame(time) → {Scene.SceneItem}

Source:
Add a frame to the sceneItem at that time
Name Type Description
time Number frame's time
Example
item.setFrame(time, frame);
Returns:
An instance itself
Type
Scene.SceneItem

setId(idopt) → {Scene.SceneItem}

Source:
set the unique indicator of the item.
Name Type Attributes Description
id String <optional>
 the indicator of the item.
Example
const item = new SceneItem();

item.setId("item");
console.log(item.getId()); // item
Returns:
An instance itself
Type
Scene.SceneItem

setIterationCount(iterationCount) → {Scene.Animator}

Source:
Overrides:
Set the number of times an animation should be played.
Name Type Description
iterationCount "inifnite" | number iterationCount
Returns:
An instance itself.
Type
Scene.Animator

setOptions(AnimatorOptionsopt) → {Scene.Animator}

Source:
Overrides:
See:
set animator's options.
Name Type Attributes Description
AnimatorOptions Object <optional>
 animator's options
Example
animator.({
	delay: 2,
	diretion: "alternate",
	duration: 2,
	fillMode: "forwards",
	iterationCount: 3,
	easing: Scene.eaasing.EASE,
});
Returns:
An instance itself.
Type
Scene.Animator

setPlaySpeed(playSpeed) → {Scene.Animator}

Source:
Overrides:
Set the animator's play speed
Name Type Description
playSpeed number playSpeed
Returns:
An instance itself.
Type
Scene.Animator

setPlayState(playState) → {Scene.Animator}

Source:
Overrides:
Set whether the animation is running or paused.
Name Type Description
playState "paused" | "running" playState
Returns:
An instance itself.
Type
Scene.Animator

setSelector(selectors) → {Scene.SceneItem}

Source:
Specifies an element to synchronize items' keyframes.
Name Type Description
selectors string Selectors to find elements in items.
Example
item.setSelector("#id.class");
Returns:
An instance itself
Type
Scene.SceneItem

setTime(time) → {Scene.Animator}

Source:
Overrides:
set currentTime
Name Type Description
time Number | String currentTime
Example
animator.setTime("from"); // 0
animator.setTime("to"); // 100%
animator.setTime("50%");
animator.setTime(10);
animator.getTime() // 10
Returns:
An instance itself.
Type
Scene.Animator

toCSS(durationopt, optionsopt)

Source:
Specifies an css text that coverted the keyframes of the item.
Name Type Attributes Default Description
duration Array <optional>
 this.getDuration() elements to synchronize item's keyframes.
options Array <optional>
 {} parent options to unify options of items.
Example
item.setCSS(0, ["opacity"]);
item.setCSS(0, ["opacity", "width", "height"]);

trigger(name) → {EventTrigger}

Source:
Overrides:
execute event handler
Name Type Attributes Description
name String event's name
...data function <optional>
 event handler's additional parameter
Example
target.on("animate", function(a1, a2) {
	console.log("animate", a1, a2);
});

target.trigger("animate", [1, 2]); // log => "animate", 1, 2
Returns:
An Instance itself.
Type
EventTrigger

update() → {Scene.SceneItem}

Source:
update property names used in frames.
Example
item.update();
Returns:
An instance itself
Type
Scene.SceneItem

updateFrame(frameopt) → {Scene.SceneItem}

Source:
update property names used in frame.
Name Type Attributes Description
frame Scene.Frame <optional>
 frame of that time.
Example
item.updateFrame(time, this.get(time));
Returns:
An instance itself
Type
Scene.SceneItem

Events

animate

Source:
This event is fired when timeupdate and animate.
Name Type Description
param.currentTime Number The total time that the animator is running.
param.time Number The iteration time during duration that the animator is running.
param.frame Scene.Frame frame of that time.

ended

Source:
Overrides:
This event is fired when animator is ended.

iteration

Source:
Overrides:
The event is fired when an iteration of an animation ends.
Name Type Description
param Object The object of data to be sent to an event.
Properties
Name Type Description
currentTime Number The total time that the animator is running.
iterationCount Number The iteration count that the animator is running.

paused

Source:
Overrides:
This event is fired when animator is paused.

play

Source:
Overrides:
This event is fired when play animator.

timeupdate

Source:
Overrides:
This event is fired when the animator updates the time.
Name Type Description
param Object The object of data to be sent to an event.
Properties
Name Type Description
currentTime Number The total time that the animator is running.
time Number The iteration time during duration that the animator is running.
iterationCount Number The iteration count that the animator is running.