Sto sostituendo una vecchia filatrice gif di un'app Ember.js con una nuova filatrice SVG/CSS.Migliora le prestazioni della filatrice SVG/CSS
Questa è la filatrice, il mio progetto viene salvato come .svg:
http://codepen.io/FezVrasta/pen/pJXovM
E io caricarlo con questo CSS:
background: no-repeat center;
background-image: url(../images/spinner.svg);
background-size: 65px 65px;
Il problema è che la mia applicazione Ember.js fa molti calcoli mentre viene mostrato lo spinner e questo fa ritardare lo spinner.
Ho provato a codificare lo svg in base64 usando b64.io ma l'unico guadagno è il tempo di caricamento, le prestazioni sono le stesse.
Come si può vedere, ho già provato a utilizzare la GPU utilizzando rotate3d anziché rotate, ma non ho ottenuto alcun incremento delle prestazioni.
Qualche consiglio per migliorarne la fluidità? Buone pratiche, trucchi e così via sono ben accetti.
Non si è sicuri, ma è possibile passare all'animazione SVG dedicata? (vedi per esempio: https://css-tricks.com/guide-svg-animations-smil/ e https://css-tricks.com/svg-animation-on-css-transforms/) – RobAu
Non ho trovato qualsiasi informazione sulle prestazioni di SMIL vs CSS :( –
@RobAu anche con SMIL le prestazioni non sono abbastanza buone http://codepen.io/FezVrasta/pen/oXrgdR?editors=100 –