Animation effect
Animation effect
Set animation for background or sprite
Use statement setAnimation:animation name -target=target object;
Example:
; // Set an animation of entering from the bottom for the middle sprite, and go to the next sentence.
setAnimation:enter-from-bottom -target=fig-center -next;
Currently, the preset animations are:
Animation effect | Animation name | Duration (ms) |
---|---|---|
Fade in | enter | 300 |
Fade out | exit | 300 |
Shake left and right once | shake | 1000 |
Enter from bottom | enter-from-bottom | 500 |
Enter from right | enter-from-right | 500 |
Enter from left | enter-from-left | 500 |
Move front and back once | move-front-and-back | 1000 |
Currently, the animation target objects are:
target | Actual target |
---|---|
fig-left | Left sprite |
fig-center | Middle sprite |
fig-right | Right sprite |
bg-main | Background |
A sprite with id |
Custom animation
Create animation
Animation files are in game/animation
. You can create your own custom animations.
The animation file uses JSON to describe. You can refer to the JSON syntax in the reference document.
Each animation file represents an animation sequence, described using a JSON array. Here is a sample describing an animation entering from the left:
Example: enter-from-left.json
[
{
"alpha": 0,
"scale": {
"x": 1,
"y": 1
},
"pivot": {
"x": 0.5,
"y": 0.5
},
"position": {
"x": -50,
"y": 0
},
"rotation": 0,
"blur": 5,
"duration": 0
},
{
"alpha": 1,
"scale": {
"x": 1,
"y": 1
},
"pivot": {
"x": 0.5,
"y": 0.5
},
"position": {
"x": 0,
"y": 0
},
"rotation": 0,
"blur": 0,
"duration": 500
}
]
The meaning of each attribute is:
Attribute | Meaning |
---|---|
alpha | Transparency, range 0-1 |
scale | Scale |
pivot | Anchor point |
position | Position offset |
rotation | Rotation angle, unit is radian |
blur | Gaussian blur radius |
duration | Duration of this time slice, unit is milliseconds (ms) |
Then, you need to add the file name of your custom animation (without the extension) in the animationTable
In file animationTable.json
:
["enter-from-left","enter-from-bottom","enter-from-right"]
Then, you can call it in the script:
setAnimation:enter-from-left -target=fig-left -next;
Omit some attributes
If your animation only needs to operate some attributes, you can leave other attributes that do not participate in the animation empty to keep them default:
Example: enter.json
[
{
"alpha": 0,
"duration": 0
},
{
"alpha": 1,
"duration": 300
}
]
Use transforms
An animation with a duration of 0 milliseconds and only one time slice is a transform.
Example:
[
{
"alpha": 0,
"duration": 0
}
]