How to Control Animation/Transform Timing?

[KamiFightingSpirit]

Hey,

I want to create an effect, where, upon being clicked, a text slowly fades in and then does some transformations.

I had this setup within CSS using the following code, the text read "See You Space Cowboy", faded in, then one at a time moved up and to the right while fading away. 

I am using Pixi.Text and already understand how to get a mouseclick event and change the text object itself, but everything happens instantaneously. So, how do you setup the equivalent of the keyframes animation percentages and ease-in, ease-out etc. within WEB GL?

 

My CSS Code which used a keyframes animation.

// CSS FOR "SEE YOU SPACE COWBOY..."
.spaceCowboyText {
  color: rgba(25, 25, 25, 1);
  display: inline-block;
  position: absolute;
  text-align: center;
  top: 10%;
  right: 1%;
  width: 100vw;
  font-size: 30px;
}

.spaceCowboyTextList li {
  list-style: none;
  display: inline-block;
}
//Adds whitespace after each li -- prettier is removing {" "}
.spaceCowboyTextList li::after {
  content: " ";
  white-space: pre;
}

.spaceCowboyTextListAfterClick li {
  color: #666;
  animation: spaceCowboyAnimation 4s linear forwards;
  opacity: 0;
}

@keyframes spaceCowboyAnimation {
  0% {
    transform: rotate(0deg) translateY(0px);
    filter: blur(1px);
    opacity: 0.1;
  }
  45% {
    transform: rotate(0deg) translateY(0px);
    filter: blur(0.3px);
    opacity: 1;
  }
  100% {
    transform: rotate(45deg) translateY(-200px);
    filter: blur(20px);
  }
}
.spaceCowboyTextList li:nth-child(1) {
  animation-delay: 0s;
}
.spaceCowboyTextList li:nth-child(2) {
  animation-delay: 0.4s;
}
.spaceCowboyTextList li:nth-child(3) {
  animation-delay: 0.8s;
}
.spaceCowboyTextList li:nth-child(4) {
  animation-delay: 1.2s;
}
.spaceCowboyTextList li:nth-child(5) {
  animation-delay: 1.6s;
}

 

Edited March 4, 2020 by KamiFightingSpirit

[Exca]

You could use a tweening library like tweenJs or tweenlite.

Then you could say something like this (example with TweenJS): Tween.get(sprite).to({alpha:0}, 500, Ease.QuadInOut).to({alpha:1}, 500, Ease.QuadOut);

[KamiFightingSpirit]

What about using the refresh rate to create a loop that runs for a specific amount of time? So increment a variable attached to your transformation and then use the refresh rate as a timer?

[Exca]

That is possible also. Basically just have something in renderloop like this:
sprite.alpha += some small number;
if(sprite.alpha > 1) sprite.alpha = 1;

You could also take the start time and calculate end time from that. Then just calculate how much time has passed and calculate:

var timepassed = currentTime-startTime;
sprite.alpha = startAlpha + (endAlpha-startAlpha)* Math.min(1,timepassed/totalTime);

Which is basically what tweens do, they just give a much nicer api for handling that.

[KamiFightingSpirit]

You use time in order to equalize changes across different machines, correct?

[themoonrat]

Correct. Animations and such should always be based on time rather than frames to ensure things occur at a consistent speed regardless of fps.

You'll often see 'delta' used in rendering engines. Some have delta as 'the amount of time passed since the last time an update occurred' and some have it as a number which has '1' running at normal speed, and '2' meaning the engine is running at half the fps. Then you can multiply the delta by your movement amount and voila.