Scene

Scene

manage sceneItems and play Scene.

Constructor

new Scene(propertiesopt)

Source:
Create a Scene
Parameters:
Name Type Attributes Description
properties Object <optional>
properties

Extends

Members

(readonly) activeDuration

Source:
Inherited From:
total duration excluding delay.
Example
const animator = new Scene.Animator({
	delay: 2,
	diretion: "alternate",
	duration: 2,
	fillMode: "forwards",
	iterationCount: 3,
	timingFuncition: Scene.Animator.EASE,
});
animator.activeDuration; // duration * iterationCount =  2 * 3 = 6

(readonly) currentIterationTime

Source:
Inherited From:
iterationTime
Example
animator.currentIterationTime // ....

currentTime

Source:
Inherited From:
currentTime
Example
animator.currentTime = 10;

animator.currentTime // 10

delay

Source:
Inherited From:
specifies a delay for the start of an animation

direction

Source:
Inherited From:
Specifies whether an animation should play in reverse direction or alternate cycles(normal, reverse, alternate, alternate-reverse)

duration

Source:
Overrides:
Specifies how many seconds or milliseconds an animation takes to complete one cycle

(readonly) ended

Source:
Inherited From:
check if animator is ended.
Example
// true: animator is ended, false : not ended.
if (animator.ended) {
	// is ended...
} else {
	// not ended...
}

fillMode

Source:
Inherited From:
Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)(none, forwards, backwards)

iterationCount

Source:
Inherited From:
specifies the number of times an animation should be played
Example
const animator = new Scene.Animator({
	delay: 2,
	diretion: "forwards",
	duration: 2,
	fillMode: "alternate",
	iterationCount: 3,
	timingFuncition: Scene.Animator.EASE,
});
animator.totalDuration; // delay + duration * iterationCount =  2 + 2 * 3 = 8
animator.iterationCount = 2;
animator.totalDuration; // delay + duration * iterationCount =  2 + 2 * 2 = 6

(readonly) paused

Source:
Inherited From:
check if animator is paused.
Example
// true: animator is paused(not playing), false : not paused.
if (animator.paused) {
	// is paused...
} else {
	// not paused...
}

playSpeed

Source:
Inherited From:
playSpeed
Example
animator.playSpeed = 1;// default speed
animator.playSpeed = 2;// speed 2x

playState

Source:
Inherited From:
playState
Example
animator.play();
animator.playState // => running

animator.pause();
animator.playState // => paused

animator.stop();
animator.playState // => paused

(readonly) totalDuration

Source:
Inherited From:
total duration including all iteration.
Example
const animator = new Scene.Animator({
	delay: 2,
	diretion: "alternate",
	duration: 2,
	fillMode: "forwards",
	iterationCount: 3,
	timingFuncition: Scene.Animator.EASE,
});
animator.totalDuration; // delay + duration * iterationCount =  2 + 2 * 3 = 8

Methods

(static) addRole(role)

Source:
add Role to Scene.
Example
Scene.addRole("property");
Scene.addRole("transform");
Scene.addRole("filter");
Parameters:
Name Type Description
role String property role(property, transform, filter)

getItem(name)

Source:
get item in scene by name
Example
const item = scene.getItem("item1")
Parameters:
Name Type Description
name String item's name

load(properties)

Source:
load properties
Example
scene.load({
	item1: {
		0: {
			display: "none",
		},
		1: {
			display: "block",
			opacity: 0,
		},
		2: {
			opacity: 1,
		},
	},
	item2: {
		2: {
			opacity: 1,
		},
	}
});
Parameters:
Name Type Description
properties Object properties

newItem(name)

Source:
create item in scene
Example
const item = scene.newItem("item1")
Parameters:
Name Type Description
name String name of item to create

on(name, callback) → {EventTrigger}

Source:
Inherited From:
Attach an event handler function for one or more events to target
Example
target.on("animate", function() {
	console.log("animate");
});

target.trigger("animate");
Parameters:
Name Type Description
name String event's name
callback function function to execute when the event is triggered.
Returns:
An Instance itself.
Type
EventTrigger

pause() → {Animator}

Source:
Inherited From:
pause animator
Returns:
An instance itself.
Type
Animator

play() → {Animator}

Source:
Inherited From:
play animator
Returns:
An instance itself.
Type
Animator

reset() → {Animator}

Source:
Inherited From:
reset animator
Returns:
An instance itself.
Type
Animator

setItem(name, item)

Source:
add a sceneItem to the scene
Example
const item = scene.newItem("item1")
Parameters:
Name Type Description
name String name of item to create
item SceneItem sceneItem

setOptions(optionsopt)

Source:
Inherited From:
set animator's options.
see CSS3 Animation
Example
animator.({
	delay: 2,
	diretion: "alternate",
	duration: 2,
	fillMode: "forwards",
	iterationCount: 3,
	timingFuncition: Scene.Animator.EASE,
});
Parameters:
Name Type Attributes Description
options Object <optional>
animator's options
Properties
Name Type Attributes Description
delay Number <optional>
specifies a delay for the start of an animation
direction String <optional>
Specifies whether an animation should play in reverse direction or alternate cycles
duration Number <optional>
Specifies how many seconds or milliseconds an animation takes to complete one cycle
fillMode String <optional>
Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)
iterationCount Number | String <optional>
specifies the number of times an animation should be played
timingFunction Object <optional>
Specifies the speed curve of the animation

setTime(time)

Source:
Inherited From:
set currentTime
Example
animator.setTime(10);

animator.currentTime // 10
Parameters:
Name Type Description
time Number currentTime

stop() → {Animator}

Source:
Inherited From:
stop animator
Returns:
An instance itself.
Type
Animator

trigger(name, dataopt) → {EventTrigger}

Source:
Inherited From:
execute event handler
Example
target.on("animate", function(a1, a2) {
	console.log("animate", a1, a2);
});

target.trigger("animate", [1, 2]); // log => "animate", 1, 2
Parameters:
Name Type Attributes Description
name String event's name
data function <optional>
event handler's additional parameter
Returns:
An Instance itself.
Type
EventTrigger