Animazione a rotazione continua CSS3 (proprio come una meridiana in caricamento)

120

Sto cercando di replicare un indicatore di attività in stile Apple (icona di caricamento della meridiana) utilizzando un'animazione PNG e CSS3. L'immagine ruota e lo fa continuamente, ma sembra che ci sia un ritardo dopo che l'animazione è terminata prima che esegua la rotazione successiva.

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}
#loading img
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         0.5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: linear;
    }

Ho provato a cambiare la durata dell'animazione ma non fa differenza, se la rallenti diciamo 5s è solo più evidente che dopo la prima rotazione c'è una pausa prima che ruoti di nuovo. È questa pausa di cui voglio sbarazzarmi.

Qualsiasi aiuto è molto apprezzato, grazie.

— Gcoop
fonte

14

Il codice specifico di Webkit non lo rende meno CSS3 .. considerando che nessuno degli altri provider ha fornito le stesse funzioni in quel momento :)

— 19h

4

L'animazione non dovrebbe andare da 0 a 359? Se fosse compreso tra 0 e 360, avresti riprodotto il frame a 0 due volte, poiché il frame 0 e il frame 360 sarebbero gli stessi ...

— Brad Parks

1

@BradParks D'altra parte, se passi da 0 a 359, l'animazione che dovrebbe aver luogo a 359.5 viene saltata completamente. Nella maggior parte dei casi, la sovrapposizione di 0 e 360 sarà così rapida da essere impercettibile.

— Blazemonger

@Blazemonger non necessariamente. Puoi provarlo tu stesso in un jsfiddle e vedere che a seconda della durata dell'animazione potrebbe non essere così sottile.

— Ilan Biala

1

tutta questa cosa dei "359 gradi" è sciocca: non hai il controllo sul passo dell'animazione. supponendo un'animazione di 1 secondo con 60 fps pari a 6 gradi per fotogramma, quindi dovresti fermarti a "354 gradi". ma come ho detto non hai il controllo del frame rate qui, quindi è piuttosto inutile. Immagino che un'implementazione intelligente possa rilevare 0-360 e adattarsi di conseguenza. Ho solo moltiplicato il tempo e l'angolo per 100, ad es. Da 0 gradi a 36000 gradi, quindi il glitch teorico si verificherà solo ogni 100 rotazioni. ma ho scoperto che avrai problemi di animazione indipendentemente da quello che fai comunque

— Simon_Weaver

71

Il tuo problema qui è che hai fornito un -webkit-TRANSITION-timing-functionquando vuoi un -webkit-ANIMATION-timing-function. I tuoi valori da 0 a 360 funzioneranno correttamente.

— rrahlf
fonte

Un tipico errore di copia-incolla. Molte grazie! (In realtà ho ricevuto il mio css da shareaholic e, a causa della proprietà denominata in modo errato, utilizzava la easefunzione di temporizzazione predefinita ).

— portiere

55

Potresti anche notare un piccolo ritardo perché 0deg e 360deg sono lo stesso punto, quindi va dal punto 1 in un cerchio al punto 1. È davvero insignificante, ma per risolverlo, tutto ciò che devi fare è cambiare 360deg in 359deg

my jsfiddle illustra la tua animazione:

#myImg {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

Inoltre, ciò che potrebbe essere più simile all'icona di caricamento della mela sarebbe un'animazione che transizioni l'opacità / colore delle strisce di grigio invece di ruotare l'icona.

— Ilan Biala
fonte

3

Il tuo JS Fiddle contiene l'implementazione più succinta che ho visto per una semplice rotazione dell'immagine: perfetta (e grazie per la pubblicazione).

— Philip Murphy

grazie fammi sapere se hai bisogno di altro aiuto, a proposito, ho usato i prefissi webkit per l'animazione ma dovresti anche includere i prefissi mozilla perché usano invece la regola -moz-css.

— Ilan Biala

puoi anche moltiplicare il tempo e l'angolo per 100, ad es. Da 0 gradi a 36000 gradi :-)

— Simon_Weaver

@Simon_Weaver dovrebbe ancora essere 35999deg per non vedere nessun doppio frame.

— Ilan Biala

2

@IlanBiala tranne che dubito fortemente che la tua scheda grafica funzioni a 720fps ;-) È impossibile per te sapere quale sia l'incremento tra i fotogrammi senza conoscere il framerate. Semmai potresti anche mettere 348 gradi perché a mezzo secondo a 60 fps ogni fotogramma avanzerebbe di 12 gradi. Preferisco semplicemente mettere 360 e sperare che qualcuno abbia programmato in modo intelligente il browser per regolare automaticamente

— Simon_Weaver

27

Puoi usare un'animazione come questa:

-webkit-animation: spin 1s infinite linear;

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}

— Kinglybird
fonte

2

Soluzione fantastica e facile!

— TheLD

8

Se stai solo cercando una versione del webkit, questa è interessante: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html da http://37signals.com/svn/posts/2577-loading- filatore-animazione-con-css-e-webkit

— Tudor
fonte

9

Molto bello. In realtà colleziono filatori, sia GIFe CSS. La mia collezione . Se ne sai di più, fammelo sapere.

— portiere

1

Il tuo codice sembra corretto. Presumo che sia qualcosa a che fare con il fatto che stai usando un .png e il modo in cui il browser ridisegna l'oggetto durante la rotazione è inefficiente, causando il blocco (con quale browser stai testando?)

Se possibile, sostituire il .png con qualcosa di nativo.

vedere; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/

Chrome non mi dà pause usando questo metodo.

— alex
fonte

Perfetto, sono abbastanza sicuro che la tua ipotesi sia corretta, tuttavia sto usando un PNG perché la mia icona di caricamento non è una meridiana è un simbolo di stile nucleare ... Non deve essere per forza così posso cambiarlo nel metodo che hai tu suggerisci - grazie!

— Gcoop

1

Ho creato una piccola libreria che ti consente di utilizzare facilmente un throbber senza immagini.

Utilizza CSS3 ma ricade su JavaScript se il browser non lo supporta.

// First argument is a reference to a container element in which you
// wish to add a throbber to.
// Second argument is the duration in which you want the throbber to
// complete one full circle.
var throbber = throbbage(document.getElementById("container"), 1000);

// Start the throbber.
throbber.play();

// Pause the throbber.
throbber.pause();

Esempio .

— alex
fonte