SceneItem

SceneItem

manage Frame Timeline and play Timeline.

Constructor

new SceneItem(properties)

Source:
Create a scene's item.
Parameters:
Name Type Description
properties Object 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)

id

Source:
Specifies the item's id to synchronize the element.

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 SceneItem.
Example
Scene.SceneItem.addRole("property");
Scene.SceneItem.addRole("transform");
Scene.SceneItem.addRole("filter");
Parameters:
Name Type Description
role String property role(property, transform, filter)

copyFrame(fromTime, toTime) → {SceneItem}

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

getFilter(time, property) → {Object}

Source:
get filter's value in the sceneItem at that time
Example
item.getFilter(10, "opacity");
Parameters:
Name Type Description
time Number time
property String | Object property's name
Returns:
property's value
Type
Object

getFrame(time) → {Frame}

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

getNowFrame(time) → {Frame}

Source:
Get frame of the current time
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);
Parameters:
Name Type Description
time Number the current time
Returns:
frame of the current time
Type
Frame

hasFrame(time) → {Boolean}

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

load(properties)

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

mergeFrame(fromTime, toTime) → {SceneItem}

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

newFrame(time) → {Frame}

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

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

removeFrame(time) → {SceneItem}

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

reset() → {Animator}

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

set(time, role, propertiesopt, valueopt) → {SceneItem}

Source:
set properties to the sceneItem at that time
Example
item.duration; // = item.timeline.last
Parameters:
Name Type Attributes Description
time Number time
role String | Object property role or properties
properties String | Object <optional>
property's name or properties
value Object <optional>
property's value
Returns:
An instance itself
Type
SceneItem

setFrame(time) → {SceneItem}

Source:
add a frame to the sceneItem at that time
Example
item.setFrame(time, frame);
Parameters:
Name Type Description
time Number frame's time
Returns:
An instance itself
Type
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

setTransform(time, propertyopt, valueopt) → {SceneItem}

Source:
set transform to the sceneItem at that time
Example
item.setTransform(10, "scale", "1,1");
Parameters:
Name Type Attributes Description
time Number time
property String <optional>
property's name or properties
value Object <optional>
property's value
Returns:
An instance itself
Type
SceneItem

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

update() → {SceneItem}

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

updateFrame(time, frameopt) → {SceneItem}

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