How to do an animation in Pixi.js?

[Panix84]

Hello there,

I just wrote this post to make sure that I am on the right track. I am fairly new to the framework and just started building my own game using Pixi.js.

I am at a point right now where I am trying to perform some animations. My understanding so far is that to perform any sort of animation we need to add a function to the PIXI.Ticker.shared.add(myFunction, this) which will initiate a loop of the function and based on the delta time we add or subtract accordingly to an attribute.

For example:

this.chipSprite.scale.x += 0.05 * delta

this.chipSprite.scale.y += 0.05 * delta

This will increase the scale of the sprite fairly smoothly until we reach the desired scale value and then we use PIXI.Ticker.shared.remove(myFunction, this) inside the myFunction to remove / stop the animation from further execution.

At this point I am wandering.

Is this actually the proper way to do animations?

Are there any resources (that apparently, I haven’t found) that have some examples of advanced animations?

Right now I am just scaling a button that has been clicked. Do people use the above approach to do this or do they use some sort of animation library like gsap?

And finally in the above mentioned approach. How would someone go about in order to add some elastic ease (outBounce for example)?

So sorry for the many questions included in the post but I was just wandering if am on the right track or not. And how do people perform minor animations like button clicks or element hovers etc.

 

Thanks in advance for your time.

[Exca]

That is one valid way to do animations. To make things a lot easier though I would suggest using a tweening library.

Then you could say (example in tweenjs, https://createjs.com/tweenjs)

Tween.get( mySprite.scale ).to({x:2, y:2}, 2000, Ease.backOut); 

Or if you prefer to keep everything in manual control then using outBounce etc. would be easiest if instead of pure delta updates you would keep track of these values:
- Starting value of animation
- Animation total duration
- End value of animation.
- How much time has passed.
- What easing function to use.

Then you could do your update loop like this:
 

... easing function declarations. This is copied from tweenjs Ease method listing. https://github.com/CreateJS/TweenJS/blob/master/src/tweenjs/Ease.js
function bounceOut(t){
  if (t < 1/2.75) {
	return (7.5625*t*t);
  } else if (t < 2/2.75) {
	return (7.5625*(t-=1.5/2.75)*t+0.75);
  } else if (t < 2.5/2.75) {
	return (7.5625*(t-=2.25/2.75)*t+0.9375);
  } else {
	return (7.5625*(t-=2.625/2.75)*t +0.984375);
  }
}

... math utility functions
// Linear interpolation between a-b by amount of t [0,1]
function lerp( a, b, t){
  return (1-t)*a+t*b;
}
// Clamp number v between a and b
function clamp( v, a, b ){
  return Math.min(b, Math.max(a,v));
}

... update loop function somewhere
animationData.timePassed += elapsedTime;
let normalizedTime = animationData.timePassed / animationData.totalTime;
normalizedTime = clamp(normalizedTime, 0,1);
mySprite.scale.set(  lerp(animationData.startValue, animationData.endValue, animationData.easing( normalizedTime ) ) );

 

Edited February 2, 2022 by Exca

[Panix84]

Hmmm very very interesting. Thanks so much for the sample code, I see now the logic behind this. I am going to try and experiment with you code a bit to get a better grasp. It sound a bit of a complex process to follow for simple cases so I can see why a tweening library will save a lot of time and effort.

Thanks for your time by the way.