Anticipazione e superamento

L’anticipazione, uno dei dodici principi dell’animazione, prepara un movimento con un piccolo spostamento nella direzione opposta. Il superamento porta il corpo oltre il punto d’arrivo, a cui torna dopo un istante, come per inerzia. Qui li produce tutti e due una sola funzione di easing.

    function easeInOutBack( t ) {   // da easings.net
    let c = 1.70158 * 1.525;
    if (t < 0.5) {
        return pow( 2*t, 2 ) * ((c + 1) * 2*t - c) / 2;
    }
    return (pow( 2*t - 2, 2 ) * ((c + 1) * (2*t - 2) + c) + 2) / 2;
}

function setup() {
    createCanvas( 670, 160 );
}

function draw() {
    background( 255 );
    let t = constrain( (frameCount % 180) / 90, 0, 1 );
    let x = lerp( 100, 570, easeInOutBack( t ) );
    if (floor( frameCount / 180 ) % 2 == 1) {
        x = width - x;
    }
    circle( x, 80, 40 );
}

Algoritmo

a ogni fotogramma:                                                draw()
    calcolare il tempo del movimento, da 0 a 1 in 90 fotogrammi,
    poi fermo a 1 per altri 90                                    constrain()
    trasformare il tempo con la funzione di easing                easeInOutBack()
    interpolare la posizione fra partenza e arrivo                lerp()
    un ciclo sì e uno no, rovesciare la posizione                 if()
    disegnare il cerchio

Istruzioni

È una delle funzioni di easing di Robert Penner, raccolte con i loro grafici su easings.net: riceve un tempo da 0 a 1 e restituisce un valore che all’inizio scende fino a circa -0.1 e verso la fine sale fino a circa 1.1, prima di tornare a 1. Di quanto, lo decide c.

Il resto della divisione per 180 conta i fotogrammi da 0 a 179, poi ricomincia; diviso per 90 va da 0 a quasi 2, e constrain() lo ferma a 1. Il cerchio si muove nei primi 90 fotogrammi e resta fermo negli altri 90.

Con t da solo il movimento sarebbe uniforme. Con la funzione di easing il cerchio arretra di circa 47 pixel prima di partire, e supera l’arrivo di altrettanti.

floor( frameCount / 180 ) conta i cicli completati: in quelli dispari la posizione si rovescia rispetto alla larghezza della tela, e il cerchio torna da destra a sinistra.

Variazioni

Con t al posto di easeInOutBack( t ) il movimento diventa uniforme e meccanico, senza anticipazione né superamento.

Con 1.70158 * 2 al posto di 1.70158 * 1.525 anticipazione e superamento passano da circa 47 a circa 71 pixel.

Approfondimenti: