Timing, molle e composizione

timing, spring e decay

timing segue una curva per una duration fissa. spring segue la fisica e non ha una durata fissa. decay parte con una velocità e rallenta.

Gli stessi driver accettano un numero, un ValueXY o un record, quindi { x, y, opacity } possono muoversi insieme.

Parametri della molla

Usa una sola parametrizzazione. Senza nessuna ottieni la molla predefinita di React Native (tension 40, friction 7). La velocity di una molla è, di default, la velocità della traiettoria che interrompe.

spring(value, { toValue: 1 }); // React Native default
spring(value, { toValue: 1, stiffness: 260, damping: 20 }); // physical
spring(value, { toValue: 1, bounciness: 8, speed: 12 }); // React Native style
spring(value, { toValue: 1, tension: 40, friction: 7 }); // origami style

Componi

sequence esegue uno dopo l’altro, parallel esegue insieme, stagger avvia ognuno dopo un ritardo, delay aspetta e loop ripete. Il risultato è di nuovo un controller, quindi le composizioni si annidano.

start, stop e reset

Ogni controller ha start(callback?), stop() e reset(). Il callback riceve { finished }: false quando il movimento è stato fermato o sostituito.

Avviare un nuovo driver sullo stesso valore sostituisce quello in corso a partire dalla posizione attuale. Non c’è nessun salto a una delle estremità.

const move = timing(value, { toValue: 1, duration: 600 });

move.start(({ finished }) => {
  // finished is false when stopped or replaced by a new animation
});
move.stop(); // keeps the value where it is on screen
move.reset(); // returns to where this animation started

Segui un altro valore

Un toValue vivo riavvia il driver ogni volta che quel valore cambia, come il tracking in React Native. follow(target, source) è la stessa connessione a molla come funzione con un nome.

// A live toValue tracks another value, like React Native tracking.
spring(badge, { toValue: pointer, stiffness: 300, damping: 26 }).start();

// follow() is the same connection as a named function.
follow(badge, pointer, { stiffness: 300, damping: 26 });

Easing e keyframe

Easing corrisponde a React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier e gli helper in, out, inOut. keyframes(value, frames, options) porta un valore attraverso più numeri, con times e repeat facoltativi.