English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
anime.js
anime.js è una libreria JavaScript leggera e flessibile per animazioni.
Con CSS, trasformazioni individuali, SVG, attributi DOM e oggetti JS.
Caratteristiche
Nello sviluppo di siti web o app, l'uso appropriato delle animazioni può aggiungere un tocco di classe. L'uso corretto delle animazioni non solo aiuta gli utenti a comprendere l'interazione, ma migliora notevolmente l'attrattiva e l'esperienza utente delle applicazioni web. Inoltre, nell'attuale sviluppo web, le animazioni sono diventate uno standard del design e stanno diventando sempre più importanti. Specialmente nei punti di interazione con l'utente, l'uso delle animazioni può fornire un migliore feedback agli utenti, migliorando l'esperienza utente.
Nella sviluppo web, ci sono molte tecnologie per realizzare animazioni. In questo articolo, utilizziamo anime.js, una libreria JavaScript leggera e potente per animazioni, per scrivere l'effetto animazione. Con essa è molto facile creare e gestire animazioni. Se non sei familiare con l'uso di questa libreria, puoi leggere un articolo introduttivo scritto in precedenza. Questo articolo utilizza principalmente questa libreria per realizzare l'effetto seguente:
Questo effetto animazione è molto semplice, principalmente composto da un cerchio e un'incrocio bianco. Utilizzando border-radius in CSS è molto facile creare questo cerchio. È probabilmente più semplice e richiede meno codice rispetto alla creazione di un cerchio con SVG, ma in questo effetto, poiché l'incrocio bianco deve essere realizzato con SVG, anche il cerchio viene realizzato con SVG. Inoltre, SVG sta diventando sempre più popolare e può essere ingrandito o ridotto a piacere. Di seguito è riportato il codice SVG di questo cerchio:
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> <circle class="circle" cx="16" cy="16" r="16" fill="#0c3"/> </svg>
Il codice sopra è chiaro e conciso, principalmente disegna un cerchio verde di raggio 16px:
Prima di tutto, implementiamo un semplice effetto animazione, che amplifica il cerchio da invisibile a piena dimensione. Per ottenere questo effetto, dobbiamo fare due cose: 1, dare al cerchio un nome di classe; 2, istanziare un anime.js timeline, utilizzandolo per combinare più effetti animazione. Naturalmente, non è necessario utilizzare timeline per creare effetti animazione, è possibile creare direttamente animazioni utilizzando il costruttore. Tuttavia, l'utilizzo di timeline offre vantaggi come la gestione più facile delle animazioni, come la transizione tra effetti e i ritardi, consentendo un controllo più fine degli effetti animazione. L'effetto di zoom qui è direttamente implementato zoomando l'SVG, come mostrato nel codice seguente:
var checkTimeline = anime.timeline({ autoplay: true, direction: 'alternate', loop: true });
checkTimeline
.add({
targets: '.checkmark',
scale: [
{ value: [0, 1], duration: 600, easing: 'easeOutQuad' }
]
)
Spiegiamo brevemente questo codice, prima di tutto definiamo un'istanza di anime e definiamo l'animazione come autoeseguita e in esecuzione continua alternata grazie a autoplay, direction e loop. Definiamo gli elementi da animare tramite il parametro targets, che è checkmark, e definiamo la scala da 0 a 1, la durata dell'animazione è di 600 millisecondi, e definiamo la curva di movimento dell'animazione.
Nel processo di produzione animata, la scelta del ciclo di tempo dell'esecuzione dell'animazione è anche un punto che richiede molta attenzione. Da una parte, non vogliamo che gli utenti aspettino troppo a lungo, il che ridurrebbe l'esperienza di interazione complessiva, facendo sentire agli utenti che interagiscono con lentezza. Dall'altra parte, non vogliamo che tutte le azioni di interazione dell'utente si verificano immediatamente durante l'operazione, il che apparirebbe anche brusco. In questo esempio, il ciclo di animazione di ingrandimento e riduzione è un po' lungo, naturalmente, durante la fase di sviluppo, prolungarlo un po' è utile per il debug. Tuttavia, nell'ambiente di produzione reale, l'animazione dell'UI dovrebbe essere il più semplice possibile. Pertanto, nello sviluppo dell'animazione, è necessario continuare a debuggare per raggiungere lo stato ideale. In effetti, combinato con strumenti di curve animate, può rendere l'esperienza dell'animazione più confortevole e naturale, è possibile fare riferimento a una guida di curve animate di Google.
使用曲线在动画开发中是一个必不可少的一部分，它可以使动画的体验更加舒服自然。在实际开发中，为不同类型的动画选择不同的动画曲线也是做动画时，必须要注意的一点。曲线选择也受制于具体动画的场景，比如形状与形状之间的动画，抛物线运动等等，总而言之就是要复合物理运动的一个规律。在CSS3中经常使用的运动曲线是ease-in、ease-out和ease-in-out这三个，比如ease-out表示缓出动画，缓出使动画在开头处比线性动画更快，还会在结尾处减速。ease-out缓入动画，缓入动画开头慢结尾快，与缓出动画正好相反。一般在UI界面动画中，适合使用缓出动画即ease-out。所以，在这个复选框的动画实例中，适合使用缓出动画。
L'uso di curve nella sviluppo di animazioni è una parte essenziale, che può rendere l'esperienza dell'animazione più舒服abile e naturale. Nel processo di sviluppo reale, è necessario scegliere diverse curve di animazione per diversi tipi di animazione, che è un punto da notare quando si crea animazioni. La scelta delle curve è anche influenzata dal contesto specifico dell'animazione, come l'animazione tra forme, movimenti parabolici, ecc. In sintesi, devono essere conformi a una legge di movimento fisico. Nella CSS3, le curve di movimento comunemente utilizzate sono ease-in, ease-out e ease-in-out. Ad esempio, ease-out rappresenta un'animazione di uscita lenta, che inizia più velocemente rispetto all'animazione lineare e rallenta alla fine. L'ease-out è un'animazione di entrata lenta, che inizia lentamente e si accelera alla fine, opposto all'ease-out. Di solito, nelle animazioni dell'interfaccia utente, è adatto utilizzare l'ease-out. Pertanto, in questo esempio di animazione del casella di selectione, è adatto utilizzare l'ease-out.Prossimo è l'animazione della croce. Le forme come la croce sono solitamente realizzate utilizzando il percorso (path) di SVG. Per ulteriori dettagli sulla descrizione del percorso, puoi andare aQuesto articolo è da guardare
Un punto da notare è che durante tutto il processo di progettazione, è necessario seguire determinati principi di progettazione. Ad esempio, in questo effetto, la coerenza è un importante principio di progettazione. Se si utilizzano arrotondamenti nei grafici statici, è meglio mantenere questi arrotondamenti anche nell'animazione. Certo, puoi anche usare angoli retti. In sintesi, mantieni la coerenza dell'UI durante tutto il processo.
Ecco il codice esportato:
<path class="check" d="M9 16l5 5 9-9" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round">
Integrato con il cerchio, l'effetto è il seguente:
Sembra piuttosto bene ora, manca solo l'ultimo passo, che è quello di creare un'animazione di disegno per questa croce. Si è parlato molto di effetti di animazione di contorno utilizzando SVG. Implementare un'animazione di disegno in anime.js è molto semplice, poiché fornisce il metodo anime.setDashoffset per calcolare la lunghezza del percorso (path), utilizzando il quale è possibile ottenere un effetto di disegno animato. Ecco il codice:
checkTimeline
.add({ ... }) /* Passaggi precedenti */
.add({
targets: '.check',
strokeDashoffset: {
value: [anime.setDashoffset, 0],
duration: 700,
delay: 200,
easing: 'easeOutQuart'
}
Come sempre, è necessario selezionare l'elemento da animare. Successivamente, è necessario impostare il valore di dashoffset del percorso (path). Il valore iniziale è la lunghezza totale del percorso (path), che è invisibile al di fuori del canvas; impostando il valore a 0 tramite il metodo anime.setDashoffset, è possibile apparire nel canvas e realizzare l'effetto di disegno animato.
Infine, è stato possibile spostare la posizione del cerchio tramite la impostazione del transform della spunta, posizionandolo al centro del cerchio.
OK, una checkbox con effetti animati è stata completata! È possibile notare che utilizzare anime.js per sviluppare effetti animati è molto semplice.
Sommario
Come menzionato sopra, l'autore ha introdotto agli utenti come implementare checkbox con effetti di tracciamento animato utilizzando anime.js (raccomandato) e spera che sia utile a tutti.
Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta agli autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato elaborato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente i contenuti sospetti di copyright.