🌖Animate

it all starts with walking animation

you can do animation in two ways

1. With the splite system, you can split an image into several animations.

2. You set the desired property of the object to do the things in the array.

1. Splite system

var mybestanimate = [
  {
    image: "test.png",//file name
    time: 100,//how long will it stay
    position: { x: 10, y: 5 },//starting position
    scale:{x:50,y:45}//ending position
  },
  {
    image: "test.png",//file name
    time: 100,//how long will it stay
    position: { x: 58, y: 5 },//starting position
    scale:{x:50,y:45}//ending position
  }
];

Add, Remove and Update

Component

{
animate:mybestanimate // add animation
animate:newanimation //change animation
animate:[] // remove animation
}

The top left part in the picture is position.

The lower right part of the picture becomes scale.

To understand that the animation is finished, you can use

animateout = (obj,data) =>{
  console.log(obj,data)//player1 []
}

This system can be confusing so method 2 might be better for you

2. Animator

Animator(
  true,//Add or remove
  "player1",//Obje
  ["#ddd","yellow","blue"],//Array
  "color",//Change type
  1000,//Time to build the next array (not total)
  false//Loop
)

//Another example, you can edit most things you want.
Animator(
  true,//Add or remove
  "player1",//Obje
  ["test1.png","test2.png","test3.png"],//Array
  "image",//Change type
  200,//Time to build the next array (not total)
  true//Loop
)

In order to use it, it is necessary to run the "eap" module in your project.

For remove

Animator(false,"player1")