CSS3 Ciągłe obracanie animacji (podobnie jak wczytujący zegar słoneczny)

120

Próbuję odtworzyć wskaźnik aktywności w stylu Apple (ikona ładowania zegara słonecznego) za pomocą animacji PNG i CSS3. Obraz jest obracany i robię to w sposób ciągły, ale po zakończeniu animacji wydaje się, że po zakończeniu animacji następuje opóźnienie, zanim wykona ona następny obrót.

@-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;
    }

Próbowałem zmienić czas trwania animacji, ale nie ma to znaczenia, jeśli zwolnisz ją od razu, powiedz 5 s, po prostu bardziej widoczne jest to, że po pierwszym obrocie jest przerwa, zanim ponownie się obróci. To jest ta przerwa, której chcę się pozbyć.

Każda pomoc jest mile widziana, dzięki.

animation webkit css transform Gcoop
źródło
14
Kod specyficzny dla Webkita nie czyni go mniej CSS3 .. biorąc pod uwagę, że żaden z innych dostawców nie zapewniał wtedy takich samych funkcji :)
19h
4
Czy animacja nie powinna przebiegać od 0 do 359? Gdyby biegał od 0 do 360, to klatka 0 byłaby odtwarzana dwukrotnie, ponieważ klatka 0 i klatka 360 byłyby takie same ...
Brad Parks,
1
@BradParks Z drugiej strony, jeśli przejdziesz od 0 do 359, to animacja, która powinna mieć miejsce przy 359,5, zostanie całkowicie pominięta. W większości przypadków nakładanie się wartości 0 i 360 będzie tak szybkie, że będzie niezauważalne.
Blazemonger,
@Blazemonger niekoniecznie. Możesz wypróbować to samodzielnie w jsfiddle i przekonać się, że w zależności od czasu trwania animacji może nie być tak subtelne.
Ilan Biala
1
ta cała sprawa „359 stopni” jest głupia - nie masz kontroli nad krokiem animacji. zakładając 1-sekundową animację z 60 klatkami na sekundę, czyli 6 stopni na klatkę, więc powinieneś zatrzymać się przy „354 stopniach”. ale jak powiedziałem, nie masz kontroli nad liczbą klatek na sekundę, więc jest to dość daremne. Wyobrażam sobie, że inteligentna implementacja może wykryć 0-360 i odpowiednio dostosować. Po prostu pomnożyłem czas i kąt przez 100 - tj. 0 stopni do 36000 stopni, więc teoretyczna usterka wystąpi tylko co 100 obrotów. ale odkryłem, że będziesz mieć usterki animacji bez względu na to, co i tak zrobisz
Simon_Weaver

Odpowiedzi:

71

Twój problem polega na tym, że podałeś, -webkit-TRANSITION-timing-functionkiedy chcesz -webkit-ANIMATION-timing-function. Twoje wartości od 0 do 360 będą działać poprawnie.

rrahlf
źródło
Typowy błąd kopiuj-wklej. Wielkie dzięki! (Właściwie to otrzymałem mój css z shareaholic iz powodu błędnie nazwanej właściwości użyłem domyślnej easefunkcji pomiaru czasu).
doekman
55

Możesz również zauważyć niewielkie opóźnienie, ponieważ 0 stopni i 360 stopni to to samo miejsce, więc przechodzi z miejsca 1 w kółku z powrotem do punktu 1. To naprawdę nieistotne, ale aby to naprawić, wystarczy zmienić 360 stopni na 359deg

my jsfiddle ilustruje twoją animację: 

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

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

Również to, co bardziej przypomina ikonę ładowania jabłka, to animacja, która zmienia przezroczystość / kolor pasków szarości zamiast obracać ikonę.

Ilan Biala
źródło
3
Twój JS Fiddle zawiera najbardziej zwięzłą implementację prostego obracania obrazu, jaką widziałem - doskonale (i dziękuję za wysłanie).
Philip Murphy,
dzięki, daj mi znać, jeśli potrzebujesz innej pomocy, przy okazji, użyłem prefiksów webkit do animacji, ale powinieneś także dołączyć prefiksy mozilla, ponieważ zamiast tego używają reguły -moz-css.
Ilan Biala
możesz również pomnożyć czas i kąt przez 100 - tj. 0 stopni do 36000 stopni :-)
Simon_Weaver
@Simon_Weaver nadal musiałby mieć wartość 35999 stopni, aby nie widzieć podwójnych ramek.
Ilan Biala
2
@IlanBiala, z wyjątkiem tego, że bardzo wątpię, że twoja karta graficzna działa z prędkością 720 klatek na sekundę ;-) Nie możesz wiedzieć, jaki jest przyrost między klatkami, nie znając szybkości klatek. Jeśli już, możesz równie dobrze ustawić 348 stopni, ponieważ w pół sekundy przy 60 klatkach na sekundę każda klatka przesunie się o 12 stopni. Wolałbym po prostu ustawić 360 i mam nadzieję, że ktoś
sprytnie
27

Możesz użyć takiej animacji:

-webkit-animation: spin 1s infinite linear;

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}
Kinglybird
źródło
2
Niesamowite i łatwe rozwiązanie!
TheLD
1

Twój kod wydaje się poprawny. Przypuszczam, że ma to coś wspólnego z faktem, że używasz pliku .png, a sposób, w jaki przeglądarka przerysowuje obiekt po obróceniu, jest nieefektywny, powodując zawieszenie (pod jaką przeglądarką testujesz?)

Jeśli to możliwe, zastąp plik .png czymś natywnym.

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

Chrome nie daje mi przerw przy użyciu tej metody.

Alex
źródło
Idealnie, jestem prawie pewien, że twoje założenie jest poprawne, ale używam PNG, ponieważ moja ikona ładowania nie jest zegarem słonecznym, to symbol w stylu nuklearnym ... Nie musi tak być, więc mogę zmienić to na metodę, którą ty zaproponuj - dzięki!
Gcoop,
1

Zrobiłem małą bibliotekę, która pozwala łatwo używać pulsatora bez obrazów.

Używa CSS3, ale wraca do JavaScript, jeśli przeglądarka go nie obsługuje.

// 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();

Przykład .

Alex
źródło