new Animator(optionsopt)
- Source:
- See:
play video, animation, the others
Name | Type | Attributes | Description |
---|---|---|---|
options |
AnimatorOptions |
<optional> |
animator's options |
Example
const animator = new Animator({
delay: 2,
diretion: "alternate",
duration: 2,
fillMode: "forwards",
iterationCount: 3,
easing: Scene.eaasing.EASE,
});
Extends
Methods
end() → {Scene.Animator}
- Source:
end animator
Returns:
An instance itself.
- Type
- Scene.Animator
finish() → {Scene.Animator}
- Source:
end animator
Returns:
An instance itself.
- Type
- Scene.Animator
getActiveDuration() → {number}
- Source:
Get the animator's total duration excluding delay
Example
animator.getTotalDuration();
Returns:
Total duration excluding delay
- Type
- number
getDelay() → {number}
- Source:
Get a delay for the start of an animation.
Returns:
delay
- Type
- number
getDirection() → {"normal"|"reverse"|"alternate"|"alternate-reverse"}
- Source:
Get whether an animation should be played forwards, backwards or in alternate cycles.
Returns:
direction
- Type
- "normal" | "reverse" | "alternate" | "alternate-reverse"
getDuration() → {number}
- Source:
Get how long an animation should take to complete one cycle.
Returns:
duration
- Type
- number
getEasing() → {0|function}
- Source:
Get the speed curve of an animation.
Returns:
easing
- Type
- 0 | function
getEasingName() → {string}
- Source:
Get the speed curve's name
Returns:
the curve's name.
- Type
- string
getFillMode() → {"none"|"forwards"|"backwards"|"both"}
- Source:
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"
getIterationCount() → {"inifnite"|number}
- Source:
Get the number of times an animation should be played.
Returns:
iterationCount
- Type
- "inifnite" | number
getIterationTime() → {number}
- Source:
Get the animator's current iteration time
Example
animator.getIterationTime();
Returns:
current iteration time
- Type
- number
getPlaySpeed() → {number}
- Source:
Get the animator's play speed
Returns:
playSpeed
- Type
- number
getPlayState() → {"paused"|"running"}
- Source:
Get whether the animation is running or paused.
Returns:
playState
- Type
- "paused" | "running"
getTime() → {number}
- Source:
Get the animator's current time
Example
animator.getTime();
Returns:
current time
- Type
- number
getTotalDuration() → {number}
- Source:
Get the animator's total duration including delay
Example
animator.getTotalDuration();
Returns:
Total duration
- Type
- number
isDelay() → {boolean}
- Source:
Check if the current state of animator is delayed.
Returns:
check delay state
- Type
- boolean
isEnded() → {boolean}
- Source:
Check if the animator has reached the end.
Example
animator.isEnded(); // true or false
Returns:
ended
- Type
- boolean
isPaused() → {boolean}
- Source:
Check if the animator is paused:
Example
animator.isPaused(); // true or false
Returns:
paused
- Type
- boolean
off(name, callback) → {EventTrigger}
- Source:
- Inherited From:
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:
- Inherited From:
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:
pause animator
Returns:
An instance itself.
- Type
- Scene.Animator
play() → {Scene.Animator}
- Source:
play animator
Returns:
An instance itself.
- Type
- Scene.Animator
setDelay(delay) → {Scene.Animator}
- Source:
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:
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:
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:
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
setFillMode(fillMode) → {Scene.Animator}
- Source:
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
setIterationCount(iterationCount) → {Scene.Animator}
- Source:
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:
- 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:
Set the animator's play speed
Name | Type | Description |
---|---|---|
playSpeed |
number | playSpeed |
Returns:
An instance itself.
- Type
- Scene.Animator
setPlayState(playState) → {Scene.Animator}
- Source:
Set whether the animation is running or paused.
Name | Type | Description |
---|---|---|
playState |
"paused" | "running" | playState |
Returns:
An instance itself.
- Type
- Scene.Animator
setTime(time) → {Scene.Animator}
- Source:
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
trigger(name) → {EventTrigger}
- Source:
- Inherited From:
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
Events
ended
- Source:
This event is fired when animator is ended.
iteration
- Source:
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:
This event is fired when animator is paused.
play
- Source:
This event is fired when play animator.
timeupdate
- Source:
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
|