Vai al contenuto
jQuery Italia
jQuery Italia

La community italiana di jQuery

  • IMPARA
    • Tutorials jQuery Italia
    • Tutorials dal web
    • Supporto ed Aiuto
  • CONTRIBUISCI
    • Nuovo Articolo
    • Nuovo Tutorial
  • SVILUPPA
    • Snippets
    • Tools
    • Download
    • Plugins
    • Links
  • FORUM
    • Reception
    • Supporto ed Aiuto
    • jQuery News
    • Non solo jQuery
  • NOTIZIE
    • jQuery
    • jQuery UI
    • Projects
  • CONTATTI
  • LOGIN

Accelerare le animazioni javascript con Velocity.js

Pubblicato il 12 Giugno 20141 Luglio 2020 Categoria:
  • Plugins

Velocity.js è un plugin jQuery che reimplementa la funzione $.animate() di jQuery per produrre prestazioni significativamente maggiori e nuove funzionalità che consentono di migliorare il flusso dell’animazione.
Le prestazioni sono talmente elevate che Velocity.js è addirittura molto più veloce delle librerie di animazione CSS!

Velocity,js funziona su qualsiasi browser (da IE8 ad Android 2.3.) ed il suo motore utilizza la funzione $.queue di jQuery e quindi interagisce perfettamente con le funzioni $.animate(), $.fade(), e $.delay().
Dal momento che la sintassi di Velocity.js è identica alla funzione $.animate(), non è richiesto alcun cambiamento del codice già scritto.
E sufficiente quindi scaricare Velocity.js, includerlo nelle vostre pagine e sostituire tutte le istanze di $.animate() con $.velocity() per avere immediatamente un netto incremento delle prestazioni in tutti i browser ed in particolare in quelli dei dispositivi mobile.

Velocity.js

In appena 8 Kb avrete a disposizione animazioni di colore, trasformazioni, loop, easings, sequenze e scrolling. Velocity.js è migliore della combinazione tra jQuery, jQuery UI e delle transazioni CSS!!!

Guardate come in soli 10 minuti sia possibile a dare vita ad una animazione 3D con Velocity.js.

Accetta i cookies di YouTube per visualizzare questo video.
Accettando potrai accedere ai contenuti su YouTube.
Puoi visualizzare la Privacy Policy di YouTube cliccando sul link sottostante.

YouTube Privacy Policy

Se accetti, la tua scelta sarà salvata e la pagina verrà ricaricata.

Il segreto di Velocity.js è la sua progettazione: nonostante sia un plugin jQuery, utilizza un proprio stack di animazione che offre prestazioni elevate grazie a due principi di fondo:

  1. la sincronizzazione del DOM con il tween stack per ridurre al minimo il “layout trashing”
  2. eseguire una cache dei valori per ridurre al minimo necessario le interrogazioni del DOM

Per capire meglio tutto ciò che riguarda Velocity.js vi congliamo di leggere:

  • l’ottimo articolo di David Walsh che spiega tecnicamente l’incremento di prestazioni di Velocity.js rispetto alle librerie di animazione CSS e jQuery
  • l’articolo di CSS-Tricks.com che da una panoramica sui vantaggi dell’utilizzo di Velocity.js per la UI Animation e spiega una delle più significative funzionalità aggiuntive della libreria: le sequenze

Le quattro caratteristiche principali relative alle prestazioni dell’interfaccia utente sono:

  • Nessun ritardo tra il triggering di una animazione e la sua partenza.
  • Nessuna perdita di frame all’inizio di un’animazione o all’intersezione di animazioni in coda.
  • Un frame rate costantemente elevato.
  • Stress gestito senza jank o bande.

L’unico suggerimento da tenere bene a mente quando si utilizza Velocity.js è quello di non utilizzare mai le funzioni $.animate() e/o $.fade() ed utilizzare sempre le soluzioni ottimizzate di Velocity.js senza utilizzare codice proprio o relativo a jQuery (lloping, reversing, delay, show/hide od altro).

Potete scaricare Velocity.js su GitHub, mentre la documentazione è consultabile direttamente sul sito dell’autore.

0 Condivisioni
Share
Tweet
Share
Pin

Login

Accedi con Facebook
Accedi con Google
Accedi con Twitter
  • Registrati
  • Password dimenticata?

SOSTIENI jQuery Italia

Aiuta la Community di jQuery Italia a rimanere in vita per contribuire a diffondere le conoscenze di base ed avanzate di jQuery.

Download in evidenza

  • gmap104.html (2816 download)
  • jquery-1.4.1.min.js (2611 download)
  • tinytips11.html (2490 download)
  • jquery-ui-1.8rc1.zip (2483 download)
  • jqueryformwizard-201.html (2452 download)
  • 1.0.0.zip (2431 download)
  • calendarPicker.html (2352 download)
  • jquery-1.4.2.min.js (2349 download)
  • jquerytools120.html (2319 download)
  • move-background.html (2318 download)

jQuery Links

  • jQuery Howto
  • jQuery Official Site
  • jQuery UI Official Site
  • Learning jQuery
  • Use jQuery

SITO SEGNALATO SU

Sito segnalato da Freeonline.it - La guida alle risorse gratuite Mooseek.com - Web Directory, Download Software, Giochi Online, Video Tecnologici, Siti d'Affari

TAG

aggiornamento (3) ajax (5) Android (5) animazione (49) api (10) BlackBerry (4) calendario (3) canvas (4) css3 (9) form (12) framework (41) gallery (8) google (5) grafici (2) html5 (11) immagini (38) javascript (29) jQuery (160) jQuery UI (15) Linux Day (3) maps (3) menu (6) mobile (10) news (2) open source (4) overlay (3) plugin (93) Plugins (17) presentation cycle (4) projects (11) responsive (5) slider (7) slideshow (18) Smartphones (5) Tablets (4) template (5) testo (2) tooltip (6) tutorial (12) upload (3) utility (18) VELug (3) video (3) widget (3) zoom (3)
jQuery Italia

La community italiana di jQuery

  • Facebook
  • Twitter
  • Linkedin
  • Youtube
Tutti i loghi ed i marchi contenuti e citati in questo sito sono dei rispettivi propietari.
Privacy Policy
Cookies Policy
COPYRIGHT © 2010 - 2021 jQuery Italia
Designed By ZeeTheme
Utilizziamo i cookie per garantire la migliore esperienza sul nostro sito. Se continui a utilizzare questo sito, acconsenti al loro utilizzo.OKPrivacy policy