Proper approach to animate sprite

[nautics889]

I use PixiJS but i don't think that context matters considering my question.

Suppose we have a sprite of a face and we going to make it's eyes blinkning. According to this topic it's up to me how to implement one: 

>there's no "proper way" of animating sprites

So i decided to use sprite mask and create a function which moves mask. Velocity of closing/opening eyes depends on game loop's update frequency (60 in PixiJS by default) and delta coords which i can easily configure in the function. When i used this approach it eventually looked pretty nice and mask moved smooth, but will i encounter any fails latter which is not obvious now? 

 

Also another important question (which disturbs me a lot more): 

What if i decided make the face to blink occasionally? How should i do that?

I know only one way in JS for such periodic tasks: `setInterval` and `setTimeout`. In fact in callback functions i only manipulate variables which mask moving based on (and indeed the moving happens in game loop), but anyway. It looked strange for me, it brought many additional state variable to source code and made code confusing a bit, but in place when i used this it works. And looked well. How can i replace this with more sophisticated approach? Or this is OK (i got doubt)?

[ivan.popelyshev]

> Will i encounter any fails latter which is not obvious now?

You probably will have to learn curves. All the easing stuff.

> What if i decided make the face to blink occasionally? How should i do that?

Animation state machine. Between states there are series of tweens.

Usually people already know it all from unity, unreal or much easier game engines

Maybe try to use something like GSAP for pixi  , to cover tweens, as for animation states.. well.. i dont even know where to start, its a coding thing.

[nautics889]

Thanks a lot, this really clarified my view