Reproduce CSS easing functions with Animation Curves

M

MarkWolF

Guest

Version: GMS 2.3 beta
Target Platform: all
Download: https://www.dropbox.com/s/qtp98xnxdkqs547/CSSstyleTransitions.zip?dl=0

Summary:
we will recreate the main CSS easing functions without having to do the necessary math. For this we will use the brand new animation curves.

A brief point on CSS curves:

CSS has several easing functions that allow you to easily animate the components of a web page (position, size, opacity...).
You can find a list of 30 easing functions and all you need to know to recreate them on this easing functions cheat sheet

chrome-capture.png

Here are the main ones. They are all cubic-bezier curves:

  1. ease: slow progression at the beginning and towards the end of the curve. Between the two, it really accelerates!
  2. ease-in: slow at the start and fast at the end
  3. ease-out: fast at the start and slow at the end
  4. ease-in-out: let's say it's a variant of ease. The curve mixes the values of ease-in and ease-out
In this project we will also use the ease-out-bounce curve. ease-out-bounce curve


Reproduce CSS curves:

The process consists of visually retracing the curves of our cheat sheet in an asset animation curves.
Here is an example of the ease-in curve:

Animation_curve_ease-in.png

Set the curve type to 'smooth', and the vertical range from 0 to 1.


Good practices...?:

You will notice that I have created all the curves in a single asset. Which in the end was not practical. Indeed, I mixed curves which required a number of different points at different places on the horizontal axis. An ease-in curve can be achieved with only 4 points.

Another point of attention: do not use the values that you will find in the cheat sheet which are made for cubic bézier curves. Gamemaker will not give you the right result. Rather, trust your eye. And if you don't trust it too much. Here is a site that will help: cubic-bezier.com

CubicBezizeEaseIn.png

You just have to hover your cursor over the curve to find the values to integrate on the horizontal (time) and vertical (progression) axes of your animation curves.

And now the code:

Apart from your curves that you will have drawn with animation curves, you will need the following elements to reproduce the demo:
  1. a room with the default configuration
  2. an object which will contain the following events (create, step, global left released, draw)
  3. a sprite ( I named mine 'sCss') containing 6 sub-images ordered in this way (linear, ease, ease-in-out, ease-in, ease-out, ease-out-bounce). Each sub-image corresponds to a curve.
I will put aside all that concerns the triggering of the animation with the mice (all the code is available via the download link).
I commented on each step of the code.


Create event:

GML:
/// @description set up CSS style transition demo
// exemple = sprite translation

// choose the start and end points
startPoint = 381;
endPoint = room_width-381;

// assign them to other variables (needed for the toggle direction system)
startx = startPoint;
endx = startPoint;

// fill an array with the sprites' initial positions (x and y)

positions = [];
var verticalStep = 80;
for (var i = 0; i < 6; ++i) {
    // code here
    positions[0][i] = startx;
    positions[1][i] = 152 + (i*verticalStep);
}


// animation variables
h = 0; // usually it is 't' for time but we choose 'h' for horizontal axis of the animation curve
inc = 1/room_speed; // time increment speed
animationOn = false; // if animation is on or not (see global left Released mouse evt)
towardsRight = true; // direction of translation (right or left)
Step event:

GML:
/// @description update mvt according to animation curves


if (animationOn) {
    
    if (h < 1) h+=inc; // udapte time value if time < 1
    else {animationOn = false; towardsRight = !towardsRight} // else stop animation and change direction
    
    // linear translation, for comparison
    positions[0][0] = lerp(startx, endx, h);
        
    // then the translations with the animation curves
    
    var curve;
    var v;
    var newX;
    
    for (var i = 0; i < 5; ++i) {
        
        // we select the proper curve (one channel = one curve)
        curve = animcurve_get_channel(CSStransitions, i);
        
        // then we get the v value of the curve according to h
        v = animcurve_channel_evaluate(curve, h);
        
        // we use lerp (linear interpolation function) to find out the new x position of our sprite
        newX = lerp(startx, endx,v);
        
        // we update its position in the positions' array
        positions[0][i+1]  = newX         
        
        
        /*shorter version :
        curve = animcurve_get_channel(CSStransitions, i);
        positions[0][i+1] = lerp(startx, endx,animcurve_channel_evaluate(curve, h));
        */
        
    }

    
}
Draw event:

GML:
/// @description render sprites

for (var i = 0; i < 6; ++i) {
    // code here
    draw_sprite(sCSS, i, positions[0][i], positions[1][i]);
}

Here we are!

You have your first CSS-style animation curves and without having to handle mathematical formulas!
The cheat sheet offers around twenty other curves. If you click on the curves, you will have access to animation examples and all the useful information to reproduce them with the gamemaker asset animation curves.
 
Top