Share
Bentornati alla serie di tutorial Introduzione a Popmotion. Nella parte 1, abbiamo scoperto come utilizzare le interpolazioni e i fotogrammi chiave per realizzare animazioni precise e pianificate nel tempo.
Nella parte 2, esamineremo il puntatore e le animazioni basate sulla velocità.
Il puntamento del puntatore ci consente di creare scaffali per prodotti scorrevoli, cursori con valore personalizzato o interfacce di trascinamento della selezione.
Le animazioni basate sulla velocità sono diverse da un'animazione basata sul tempo come interpolazione in quanto la proprietà primaria che influisce sul comportamento dell'animazione è velocità. L'animazione stessa potrebbe richiedere una quantità di tempo.
Vedremo le tre animazioni basate sulla velocità in Popmotion, primavera, decadimento, e fisica. Useremo il velocità dell'animazione di puntamento del puntatore per avviare queste animazioni e questo dimostrerà in che modo le animazioni basate sulla velocità possono creare interfacce utente accattivanti e giocose in un modo in cui le animazioni basate sul tempo semplicemente non possono.
Innanzitutto, apri questo CodePen per giocare.
Popmotion fornisce il pointer funzione per tracciare ed emettere le coordinate di un mouse o di un puntatore a tocco singolo.
Importa questo insieme con styler, che ci permetterà di impostare la posizione della palla.
Accentsconagua
const pointer, styler = popmotion; const ball = document.querySelector ('. ball'); const ballStyler = styler (palla);Per questo esempio, vogliamo trascinare la palla. Aggiungiamo un evento che mostrerà la posizione del puntatore alla palla:
lascia pointerTracker; const startTracking = () => pointerTracker = pointer (). start (ballStyler.set); ; ball.addEventListener ('mousedown', startTracking); ball.addEventListener ('touchstart', startTracking);Vogliamo anche che alcuni codici smettano di tracciare quando rilasciamo la palla:
const stopTracking = () => pointerTracker && pointerTracker.stop (); document.addEventListener ('mouseup', stopTracking); document.addEventListener ('touchend', stopTracking);Se provi a trascinare la palla ora, c'è un problema ovvio. La palla salta via quando la tocchiamo! Non è una grande esperienza utente.
Questo perché, di default, pointer emette la posizione del puntatore relativo alla pagina.
Per emettere la posizione del puntatore relativo ad un altro punto, in questo caso la trasformazione x / y della palla, possiamo semplicemente passare quella posizione a pointer come questo:
const startTracking = () => pointerTracker = pointer (x: ballStyler.get ('x'), y: ballStyler.get ('y')). start (ballStyler.set); ;Ora hai fatto la palla, in pochissime righe di codice, trascinabile! Tuttavia, quando l'utente rilascia la palla, si ferma.
Ciò non è soddisfacente: immagina un carosello scorrevole di prodotti che un utente può trascinare per scorrere. Se si fermasse appena, invece di scorrere lo slancio, sarebbe meno piacevole da usare.
Sarebbe anche più difficile, perché lo sforzo fisico complessivo necessario per scorrere il carosello sarebbe più alto.
Per abilitare animazioni come questa, dobbiamo prima conoscere il velocità dell'oggetto che viene lanciato.
Popmotion fornisce una funzione che può aiutarci a tracciare la velocità. È chiamato valore. Importa che:
const pointer, styler, value = popmotion;
Per parlare tecnicamente per un momento, tutte le animazioni di Popmotion sono conosciute come Azioni. Le azioni sono flussi di valori reattivi che possono essere avviati e fermati.
UN valore è, al contrario, a reazione. Non può essere fermato o avviato. Risponde passivamente solo quando è aggiornare il metodo è chiamato. Può tenere traccia dei valori e può essere usato per interrogare la loro velocità.
Quindi, dopo aver definito ballStyler, definiamo un nuovo valore per ballXY:
const ballXY = valore (x: 0, y: 0);
Ogni volta ballXY aggiornamenti, vogliamo aggiornare ballStyler. Possiamo passare un secondo argomento a valore, una funzione che verrà eseguita ogni volta ballXY aggiornamenti:
const ballXY = valore (x: 0, y: 0, ballStyler.set);
Ora possiamo riscrivere il nostro pointer aggiornare ballXY invece di ballStyler.set:
const startTracking = () => pointer (ballXY.get ()) .start (ballXY); ;
Ora, a qualsiasi puntatore, possiamo chiamare ballXY.getVelocity () e riceveremo le velocità di entrambi X e y, pronto per entrare nelle nostre animazioni basate sulla velocità.
primaveraLa prima animazione basata sulla velocità da introdurre è primavera. Si basa sulle stesse equazioni che governano il marchio CASpringAnimation di Apple, l'animazione primaverile dietro a tutta quella giocosità giocosa di iOS.
Importare:
const pointer, spring, styler, value = popmotion;
Adesso, modifica stopTracking in modo che invece di fermare il pointerTracker animazione, inizia a primavera animazione come questa:
const stopTracking = () => spring (from: ballXY.get (), velocity: ballXY.getVelocity (), a: 0, rigidità: 100, damping: 20). start (ballXY);
Forniamo con la posizione corrente della palla, la sua velocità e un bersaglio, e la simulazione viene eseguita. Cambia in base a come l'utente ha lanciato la palla.
La cosa bella delle molle è che sono espressive. Regolando il massa, rigidezza e smorzamento proprietà, si può finire con sensazioni di primavera radicalmente diverse.
Ad esempio, se cambi solo il rigidezza sopra a 1000, puoi creare un movimento che sembra uno schiocco ad alta energia. Quindi, cambiando massa a 20, crei un movimento che assomiglia quasi alla gravità.
C'è una combinazione che si sentirà giusta e soddisfacente per i tuoi utenti e adatta al tuo marchio, in quasi tutte le circostanze. Giocando con diverse sensazioni primaverili, puoi comunicare sentimenti diversi, come uno stretto scatto fuori limite o un rimbalzo affermativo più morbido..
decadimentoIl decadimento animazione, come suggerisce il nome, decadimenti la velocità fornita in modo che l'animazione rallenti gradualmente fino all'arresto completo.
Questo può essere usato per creare l'effetto di scorrimento momentum trovato sugli smartphone, come questo:
Importa il decadimento funzione:
const decay, pointer, spring, styler, value = popmotion;
E sostituire il stopTracking funzione con il seguente:
const stopTracking = () => decay (from: ballXY.get (), velocity: ballXY.getVelocity ()). start (ballXY);
decadimento calcola automaticamente un nuovo obiettivo basato sul fornito a partire dal e velocità oggetti di scena.
È possibile regolare la sensazione della decelerazione facendo confusione con gli oggetti di scena delineati nei documenti collegati sopra ma, a differenza di primavera e fisica, decadimento è progettato per funzionare fuori dalla scatola.
fisicaFinalmente, abbiamo il fisica animazione. Questo è il coltellino svizzero Popmotion delle animazioni basate sulla velocità. Con esso, puoi simulare:
primavera e decadimento offre movimento super-preciso e una più ampia varietà di "feel". Presto, saranno entrambi scrubabili.
Ma entrambi lo sono immutabile. Una volta che hai iniziato, le loro proprietà sono impostate in pietra. Perfetto per quando vogliamo iniziare un'animazione basata sull'iniziale a partire dal/velocità stato, ma non così buono se vogliamo un'interazione continua.
fisica, invece, è un simulazione integrata più vicino a quello di un videogioco. Funziona, una volta per fotogramma, prendendo lo stato corrente e quindi modificandolo in base alle proprietà correnti in quel momento.
Questo gli permette di essere mutevole, il che significa che possiamo cambiare quelle proprietà, che poi cambia il risultato della simulazione.
Per dimostrarlo, facciamo una svolta al classico levigatore dei puntatori, con una levigatura elastica.
Importare fisica:
const pointer, spring, physics, styler, value = popmotion;
Questa volta, cambieremo il startTracking funzione. Invece di cambiare ballXY con pointer, useremo fisica:
const startTracking = () => const physicsAnimation = physics (from: ballXY.get (), a: ballXY.get (), velocity: ballXY.getVelocity (), restSpeed: false, attrito: 0.6, springStrength: 400 ) .start (ballXY); ;
Qui, stiamo ambientando a partire dal e velocità come normale. attrito e springStrength entrambi regolano le proprietà della molla.
restSpeed: falso sovrascrive il comportamento predefinito dell'animazione che si interrompe quando il movimento si ferma. Vogliamo fermarlo manualmente dentro stopTracking.
Di per sé, questa animazione non farà nulla perché abbiamo impostato a, il bersaglio della primavera, allo stesso modo di a partire dal. Quindi reimplementiamo il pointer rintracciando questa volta per cambiare il bersaglio primaverile di fisica. Sull'ultima riga di startTracking, Inserisci:
pointerTracker = pointer (ballXY.get ()). start ((v) => physicsAnimation.setSpringTarget (v););
Qui, stiamo usando un simile pointer animazione come prima. Tranne questa volta, lo stiamo usando per cambiare il bersaglio di un'altra animazione. In tal modo, creiamo questo puntatore a puntatore elastico:
Le animazioni basate sulla velocità accoppiate con il puntatore possono creare interfacce coinvolgenti e divertenti.
primavera può essere usato per creare un'ampia varietà di sensazioni di primavera, mentre decadimento è specificamente adattato per animazioni di scorrimento del momento. fisica è più limitato in termini di configurabilità, ma offre anche l'opportunità di cambiare la simulazione in corso, aprendo nuove possibilità di interazione.
Nella prossima e ultima parte di questa serie introduttiva su Popmotion, prenderemo tutto ciò che abbiamo imparato nelle prime due parti e li useremo insieme ad una composizione funzionale leggera per creare un'animazione scrubbable, insieme a una scrubber da fare il lavaggio con!
