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)
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
|
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
|
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
|