Share
L'animazione è davvero una delle migliori caratteristiche per colpire i CSS da molto tempo. Dopotutto, come ci siamo resi conto, il movimento può migliorare l'esperienza dell'utente e incoraggiare azioni in cui i contesti statici non sono sufficienti. In questo tutorial costruiremo un prototipo per un'app utilizzando animazioni CSS e un tocco di JavaScript.
Per questo esercizio svilupperemo un prototipo per un'app che consenta agli abbonati di seguirsi l'un l'altro. Inizialmente inseriremo un elenco di utenti con i loro nomi sotto ciascun avatar corrispondente. Questi avatar, quando cliccato, attiveranno una modale contenente un pulsante "segui" e ulteriori informazioni relative a ciascun singolo utente.
A scopo dimostrativo, verranno caricati 30 utenti utilizzando un servizio gratuito chiamato Generatore di utenti casuali. La loro API non fornisce solo immagini casuali degli utenti, ma fornisce anche dati casuali come nomi, indirizzi, e-mail e molto altro.
Ho discusso le opzioni precedentemente per la costruzione di prototipi, ma per questo articolo costruiremo un prototipo con codice reale. Per questo compito utilizzeremo i dispositivi Marvel; una libreria open source che contiene undici dispositivi mobili CSS puri per mostrare i prototipi realizzati in genere con l'app Marvel.
Per iniziare includere devices.min.css nella parte superiore del documento, tornare alla demo e selezionare la combinazione desiderata, quindi copiare e incollare l'HTML generato nel progetto.
Con il CSS ottenuto per il nostro dispositivo demo (Nexus 5) è ora di lavorare sul caricamento nel feed utente della nostra applicazione.
risultati
Gli utenti verranno caricati come voci di elenco e inseriti nel .utenti lista non ordinata. Questa è la base iniziale, ma è necessario utilizzare JavaScript per comunicare con l'API utente casuale al fine di inserire questi elementi di elenco. Per fare questa richiesta useremo lo stile JavaScript ES6 semplice e vanigliato.
let request = new XMLHttpRequest ();
Il richiesta è la variabile che conterrà la nostra richiesta AJAX, ma richiede un URL con cui connettersi.
Accentsconagua
request.open ('GET', 'https://randomuser.me/api/?results=30', true);Il Aperto il metodo recupera i dati API dall'URL e i parametri che impostiamo. Ci sono molti altri parametri da utilizzare, ma per questa demo recupereremo solo 30 risultati. Ora che abbiamo il nostro URL in posizione e la richiesta inviata, recuperiamo i dati.
// Utility per la selezione della funzione DOM select (s) return document.querySelector (s); // Store per referencing const users = select ('. Users'), // AJAX Request request.onload = function () if (request.status> = 200 && request.status < 400) let data = JSON.parse(request.responseText), l = data.results.length; for(var i = 0; i < l; i++) // data results console.log(data.results[i]); else alert('We reached our target server, but there was an error'); ; request.onerror = function() alert('There was a connection error of some sort') ; // Send Ajax call request.send();L'intera richiesta è ora in atto. Aprendo la console vedrai tutti i risultati dei dati forniti elencati. Questo è un buon inizio, ma dobbiamo assolutamente fare di più che registrare l'output sulla console.
Per questa parte successiva, inseriremo il markup utilizzando i dati disponibili dall'API casuale dell'utente.
users.insertAdjacentHTML ('beforeend', '
'+ data.results [i] .name.first +'Le righe di codice sopra saranno posizionate nel ciclo creato prima di registrare i dati nella console. Come accennato, abbiamo alcune opzioni per quanto riguarda i dati allegati agli oggetti dell'utente, come il nome, l'email e le dimensioni degli avatar. La dimensione media dell'immagine verrà utilizzata per la visualizzazione iniziale, mentre la dimensione maggiore verrà utilizzata per il modale che viene attivato quando si fa clic sull'anteprima della miniatura. Tutte queste informazioni saranno memorizzate all'interno degli attributi dei dati, in modo che possiamo recuperarli secondo necessità.
Stiamo costruendo un altro componente per questa demo; una modale che viene attivata dal punto di esecuzione (ad esempio facendo clic su un avatar). Avremo bisogno del nostro caro amico matematico per determinare realmente da dove si espanderà il modale.
var transOriginNames = webkitTransformOrigin: 'webkitTransformOrigin', MozTransformOrigin: 'MozTransformOrigin', msTransformOrigin: 'msTransformOrigin', transformOrigin: 'transformOrigin'; users.addEventListener ('click', function (e) let target = e.target, target_coords = target.getBoundingClientRect (); if (target.nodeName === 'IMG') per (nome var in transOriginNames) modal .style [nome] = (target.offsetLeft + (target_coords.width / 2)) + 'px' + ((target.offsetTop + (target_coords.height / 2)) - screen_scroll.scrollTop) + 'px'; );Per raggiungere questa espansione del modale dal punto di esecuzione dobbiamo assicurarci che il nostro trasformare origine è corretto per avere correttamente la scala modale. Sto usando un oggetto per contenere tutto il nostro trasformare origine prefissi poiché utilizziamo JavaScript per impostarli e dobbiamo anche assicurarci che tutte le basi siano coperte per i browser che non supportano lo standard.
Prendi nota dei calcoli necessari per determinare il trasformare origine valori.
modal.style [nome] = (target.offsetLeft + (target_coords.width / 2)) + 'px' + ((target.offsetTop + (target_coords.height / 2)) - screen_scroll.scrollTop) + 'px';
Lo schema sopra illustra visivamente come viene calcolata la matematica. Al fine di determinare la posizione corretta che usiamo offsetLeft e offsetTop più metà del larghezza e altezza rispettivamente per trovare il centro esatto dell'avatar. scrollTop è anche molto importante perché 30 utenti supereranno il limite dello schermo del dispositivo e offsetTop sarà necessario sottrarre questo valore per determinare la distanza corretta dalla parte superiore dello schermo. Tutti i valori nel diagramma sopra sono forniti dal nostro amico getBoundingClientRect.
Registrazione del target_coords alla console puoi vedere tutte le dimensioni e i valori di cui abbiamo bisogno per fare un'assunzione corretta. Questi valori rispetto al larghezza e altezza cambierà sempre in base alla posizione dell'avatar all'interno dello schermo del dispositivo.
Con le coordinate dell'avatar preparate e pronte a ricevere il nostro evento click, è ora di aggiungere il movimento modale che visualizzerà il profilo dell'utente.
.modal transform: scale (0) translateZ (0); durata della transizione: 320 ms; transition-timing-function: cubic-bezier (.4, 0, .2, 1); transizione-proprietà: trasformazione, opacità; opacità: 0;
Il codice sopra è ridotto dalla demo live per mostrare le proprietà esatte del movimento che useremo. Inizialmente ci stiamo nascondendo usando opacità e scala.
Ora è il momento di definire le proprietà CSS che gestiranno lo stato attivo per il movimento del modale.
.screen.active .modal transform: scale (1) translateZ (0); opacità: 1;
Usando JavaScript potremo attivare un attivo lezione su schermo. Nelle righe precedenti stiamo invertendo ciò che abbiamo impostato in precedenza. Questo è il modo in cui creiamo l'effetto di espansione del modale. È un vero stile di Google Material Design che aiuta a interrompere il comportamento cognitivo e risponde rapidamente all'input dell'utente, rendendo il movimento reattivo. Questo stile conferma anche l'input dell'utente espandendosi immediatamente verso l'esterno dal punto di contatto.
Durante il carico creeremo un effetto di ridimensionamento rendendo la sequenza meno statica e più reattiva. Ogni avatar scalerà in un intervallo diverso rispetto al prossimo e per questo useremo CSS.
@keyframes fade-in from opacity: 0; a opacità: 1; @keyframes expand-out from transform: scale (0); a transform: scale (1); .users li opacity: 0;
Inizialmente nascondiamo gli utenti e quindi attiviamo a mostrare classe una volta che la richiesta AJAX è buona per andare. Ho anche incluso i nostri keyframe che trasformeranno le nostre proprietà in valori corretti. Useremo questi fotogrammi chiave nel seguente frammento di codice che imposta il movimento in gioco.
$ user-count: 30; $ durata: 200ms; $ stagger_delay: 0.0125s; $ easing: cubic-bezier (.66, .14, .83, .67); .users.show li animazione-durata: $ durata; nome-animazione: dissolvenza in apertura; animation-fill-mode: entrambi; funzione di animazione-temporizzazione: $ easing; opacità: 1; img durata-animazione: $ durata; nome-animazione: espansione; animation-fill-mode: entrambi; funzione di animazione-temporizzazione: $ easing; @for $ i da 1 a $ user-count &: nth-of-type (# $ i) ritardo-animazione: ($ stagger_delay * $ i); img ritardo di animazione: ($ stagger_delay * $ i);
Per aiutare con la matematica, sto usando i loop e le variabili di Sass per mantenere il conteggio degli utenti che è anche legato ai nostri risultati JS dalla chiamata dell'API casuale dell'utente. Il ciclo è la chiave per l'intero puzzle in quanto passerà in loop sul nostro conteggio degli utenti e aggiungeremo il valore di scaglionamento definito in una variabile.
Sopra è il nostro risultato con la sequenza di animazione dell'avatar finale. Ricorda che stiamo usando solo animazioni di fotogrammi chiave in CSS e utilizzando JavaScript per attivare / disattivare mostrare classe una volta che gli avatar sono stati recuperati dall'API casuale dell'utente.
Assicurati di guardare la demo dal vivo in quanto ci sono anche elementi aggiuntivi che aggiungono vantaggi, come ad esempio un caricatore animato che verrà visualizzato mentre gli utenti si caricano e si rimuovono una volta caricati gli avatar.
Grazie a Shaw per la sua intuizione e questo colpo di Dribbble usato per l'ispirazione. Come sempre lasciate i commenti sotto per ulteriori discussioni, e date alla demo alcuni cuori su CodePen se volete vederne di più!
