Methods
(static) blink(options, options.fromopt, options.toopt, options.duration)
- Source:
Make a blinking effect.
| Name |
Type |
Description |
options |
AnimatorState
|
Properties
| Name |
Type |
Default |
Description |
from? |
number
|
0
|
start opacity |
to? |
number
|
1
|
end opacity |
duration |
number
|
|
animation's duration |
|
Example
// import {blink} from "scenejs";
// blink({duration: 2});
Scene.blink({duration: 2});
// Same
new SceneItem({
"0%": {
opacity: 0,
},
"50%": {
opacity: 1,
},
"100%": {
opacity: 0,
}
}, {
duration: 2,
});
(static) fadeIn(options, options.fromopt, options.toopt, options.duration)
- Source:
Make a fade in effect.
| Name |
Type |
Description |
options |
AnimatorState
|
Properties
| Name |
Type |
Default |
Description |
from? |
number
|
0
|
start opacity |
to? |
number
|
1
|
end opacity |
duration |
number
|
|
animation's duration |
|
Example
// import {fadeIn} from "scenejs";
// fadeIn({duration: 2});
Scene.fadeIn({duration: 2});
// Same
new SceneItem({
"0%": {
opacity: 0,
},
"100%": {
opacity: 1,
}
}, {
duration: 2,
});
(static) fadeOut(options, options.fromopt, options.toopt, options.duration)
- Source:
Make a fade out effect.
| Name |
Type |
Description |
options |
AnimatorState
|
Properties
| Name |
Type |
Default |
Description |
from? |
number
|
1
|
start opacity |
to? |
number
|
0
|
end opacity |
duration |
number
|
|
animation's duration |
|
Example
// import {fadeOut} from "scenejs";
// fadeOut({duration: 2});
Scene.fadeOut({duration: 2});
// Same
new SceneItem({
"0%": {
opacity: 1,
},
"100%": {
opacity: 0,
}
}, {
duration: 2,
});
(static) transition(item1, item2, options, options.from, options.to, options.duration, options.timeopt)
- Source:
Use the property to create an effect.
| Name |
Type |
Description |
item1 |
Scene.SceneItem
|
Item that end effect |
item2 |
Scene.SceneItem
|
Item that start effect |
options |
AnimatorOptions
|
Properties
| Name |
Type |
Description |
from |
object
|
The starting properties of item1 and end properties of item2 |
to |
object
|
The starting properties of item2 and end properties of item1 |
duration |
number
|
animation's duration |
time? |
number
|
start time of item1
default: item1.getDuration() - duration |
|
Example
// import {transition} from "scenejs";
transition(item1, item2, {
from: {
opacity: 1,
},
to: {
opacity: 0,
},
duration: 0.1,
});
// Same
item1.set({
[item1.getDuration() - 0.1]: {
opacity: 1,
},
[item1.getDuration()]: {
opacity: 0,
}
});
item2.set({
0: {
opacity: 0,
},
0.1: {
opacity: 1,
}
});
(static) wipeIn(options, options.propertyopt, options.fromopt, options.toopt, options.duration)
- Source:
Make a wipe in effect.
| Name |
Type |
Description |
options |
AnimatorOptions
|
Properties
| Name |
Type |
Default |
Description |
property? |
string
|
Array.<string>
|
"left"
|
position property |
from? |
number
|
string
|
"-100%"
|
start position |
to? |
number
|
string
|
"0%"
|
end position |
duration |
number
|
|
animation's duration |
|
Example
// import {wipeIn} from "scenejs";
// wipeIn({property: "left", duration: 2});
Scene.wipeIn({property: "left", duration: 2});
// Same
new SceneItem({
"0%": {
"left": "-100%",
},
"100%": {
"left": "0%",
}
}, {
duration: 2,
});
(static) wipeOut(options, options.propertyopt, options.fromopt, options.toopt, options.duration)
- Source:
Make a wipe out effect.
| Name |
Type |
Description |
options |
AnimatorOptions
|
Properties
| Name |
Type |
Default |
Description |
property? |
string
|
Array.<string>
|
"left"
|
position property |
from? |
number
|
string
|
"0%"
|
start position |
to? |
number
|
string
|
"100%"
|
end position |
duration |
number
|
|
animation's duration |
|
Example
// import {wipeOut} from "scenejs";
// wipeOut({property: "left", duration: 2});
Scene.wipeOut({property: "left", duration: 2});
// Same
new SceneItem({
"0%": {
"left": "0%",
},
"100%": {
"left": "100%",
}
}, {
duration: 2,
});
(static) zoomIn(options, options.fromopt, options.toopt, options.duration)
- Source:
Make a zoom in effect.
| Name |
Type |
Description |
options |
AnimatorOptions
|
Properties
| Name |
Type |
Default |
Description |
from? |
number
|
0
|
start zoom |
to? |
number
|
1
|
end zoom |
duration |
number
|
|
animation's duration |
|
Example
// import {set, zoomIn} from "scenejs";
// zoomIn({duration: 2});
Scene.zoomIn({duration: 2});
// Same
new SceneItem({
"0%": {
"transform": "scale(0)",
},
"100%": {
"transform": "scale(1)",
}
}, {
duration: 2,
});
(static) zoomOut(options, options.fromopt, options.toopt, options.duration)
- Source:
Make a zoom out effect.
| Name |
Type |
Description |
options |
AnimatorOptions
|
Properties
| Name |
Type |
Default |
Description |
from? |
number
|
1
|
start zoom |
to? |
number
|
0
|
end zoom |
duration |
number
|
|
animation's duration |
|
Example
// import {zoomOut} from "scenejs";
// zoomOut({duration: 2});
Scene.zoomOut({duration: 2});
// Same
new SceneItem({
"0%": {
"transform": "scale(1)",
},
"100%": {
"transform": "scale(0)",
}
}, {
duration: 2,
});
Type Definitions
PresetState
- Source:
Properties:
| Name |
Type |
Description |
[key: string] |
any
|
|
Type: