Animation Reference

WebGAL supports setting consecutive transform and effect states to create multi-segment animations.

A transform and effect object looks like this:

{
  "position": {
    "x": -500,
    "y": 20
  },
  "rotation": 0.3,
  "blur": 10
}

An animation segment object is a transform and effect object with additional properties such as duration:

{
  "position": {
    "x": -500,
    "y": 20
  },
  "rotation": 0.3,
  "blur": 10,
  "duration": 500,
  "ease": "easeInOut"
}

Multiple animation segment objects can form an animation:

[
  {
    "duration": 0
  },
  {
    "position": {
      "x": -500,
      "y": 20
    },
    "duration": 500
  },
  {
    "rotation": 0.3,
    "duration": 300
  },
  {
    "blur": 10,
    "duration": 200
  }
]

Except for required properties such as duration, many properties in animation segment objects can be omitted. WebGAL fills them with default values or existing values depending on the situation.

Info

The "existing value" inherited here means the target object's transform and effect snapshot before the animation starts, not the ending state of the previous animation segment.

; The figure object's initial coordinate is (-500,0)
changeFigure:character_a/normal.png -id=aaa -transform={"position":{"x":-500,"y":0}};
; The multi-segment animation coordinates are:
; (-500,0) -> (500,0) -> (-500,20)
setTempAnimation:[{"duration":0},{"position":{"x":500},"duration":500},{"position":{"y":20},"duration":500}] -target=aaa;

The first segment in an animation is the starting state. Its duration is usually set to 0. Even if it is greater than 0, it will not produce an animation effect.
You can still set transform and effect properties on the first segment so the animation jumps directly to a specified state when it starts.

; The figure object's initial coordinate is (0,0)
changeFigure:character_a/normal.png -id=aaa;
; Walk from left to right, jumping directly to the left side when the animation starts
setTempAnimation:[{"position":{"x":-500},"duration":0},{"position":{"x":500},"duration":1000}] -target=aaa;

Parameters

duration

• Number
• Unit: milliseconds
• Required

The duration of each animation segment.

changeFigure:1/open_eyes.png -id=aaa;
setTempAnimation:[{"position":{"x":-500},"duration":0},{"position":{"x":500},"duration":1000}] -target=aaa;

ease

• String

Sets the easing type used by the animation. The default value is easeInOut. Available values include:

• linear: linear
• easeIn: ease in
• easeOut: ease out
• easeInOut: ease in and out
• circIn: circular ease in
• circOut: circular ease out
• circInOut: circular ease in and out
• backIn: back ease in
• backOut: back ease out
• backInOut: back ease in and out
• bounceIn: bounce in
• bounceOut: bounce out
• bounceInOut: bounce in and out
• anticipate: anticipate

Any other string falls back to the default value.

changeFigure:1/open_eyes.png -id=aaa;
setTempAnimation:[{"position":{"x":-500},"duration":0},{"position":{"x":500},"duration":1000,"ease":"bounceOut"}] -target=aaa;