CSS3 Continuous Rotate Animation (Sama seperti jam matahari yang memuat)

120

Saya mencoba mereplikasi indikator aktivitas gaya Apple (ikon pemuatan matahari) dengan menggunakan animasi PNG dan CSS3. Saya memiliki gambar yang berputar dan melakukannya terus menerus, tetapi tampaknya ada penundaan setelah animasi selesai sebelum melakukan rotasi berikutnya.

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

Saya sudah mencoba mengubah durasi animasi tetapi tidak ada bedanya, jika Anda memperlambatnya katakan 5s hanya lebih jelas bahwa setelah rotasi pertama ada jeda sebelum berputar lagi. Jeda inilah yang ingin saya singkirkan.

Setiap bantuan sangat dihargai, terima kasih.

animation webkit css transform Gcoop
sumber
14
Kode khusus webkit tidak mengurangi CSS3 .. mengingat tidak ada penyedia lain yang menyediakan fungsi yang sama pada saat itu :)
19h
4
Bukankah animasi harus berjalan dari 0 hingga 359? Jika itu berjalan dari 0 hingga 360, maka Anda akan memiliki frame di 0 dimainkan dua kali, karena frame 0 dan frame 360 ​​akan sama ...
Brad Parks
1
@BradParks Di sisi lain, jika Anda beralih dari 0 ke 359, maka animasi yang seharusnya berlangsung di 359,5 akan dilewati sepenuhnya. Dalam kebanyakan kasus, tumpang tindih 0 dan 360 akan berlangsung begitu cepat hingga tidak terlihat.
Blazemonger
@ Blazemonger belum tentu. Anda dapat mencobanya sendiri di jsfiddle dan melihat bahwa tergantung pada durasi animasinya, mungkin tidak terlalu halus.
Ilan Biala
1
keseluruhan '359 derajat' ini konyol - Anda tidak memiliki kendali atas langkah animasi. dengan asumsi animasi 1 detik dengan 60fps itu 6 derajat per frame jadi Anda harus berhenti pada '354 derajat'. tapi seperti yang saya katakan Anda tidak memiliki kendali atas frekuensi gambar di sini jadi itu sangat sia-sia. Saya membayangkan penerapan cerdas dapat mendeteksi 0-360 dan menyesuaikannya. Saya baru saja mengalikan waktu dan sudut dengan 100 - yaitu. 0 derajat hingga 36000 derajat sehingga kesalahan teoretis hanya akan terjadi setiap 100 rotasi. tetapi saya telah menemukan Anda akan mendapatkan gangguan animasi apa pun yang Anda lakukan
Simon_Weaver

Jawaban:

71

Masalah Anda di sini adalah bahwa Anda telah memberikan -webkit-TRANSITION-timing-functionsaat Anda menginginkan file -webkit-ANIMATION-timing-function. Nilai 0 hingga 360 Anda akan berfungsi dengan baik.

rrahlf.dll
sumber
Kesalahan salin-tempel yang khas. Terima kasih banyak! (Saya benar-benar mendapatkan css saya dari shareaholic dan karena properti bernama salah, itu menggunakan easefungsi waktu default ).
doekman
55

Anda juga mungkin melihat sedikit kelambatan karena 0deg dan 360deg adalah tempat yang sama, jadi dari titik 1 dalam lingkaran kembali ke titik 1. Ini benar-benar tidak signifikan, tetapi untuk memperbaikinya, yang harus Anda lakukan adalah mengubah 360deg ke 359 derajat

jsfiddle saya mengilustrasikan animasi Anda: 

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

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

Juga yang mungkin lebih mirip dengan ikon pemuatan apel adalah animasi yang mentransisikan opasitas / warna garis abu-abu alih-alih memutar ikon.

Ilan Biala
sumber
3
JS Fiddle Anda berisi implementasi paling ringkas yang pernah saya lihat untuk rotasi gambar sederhana - sempurna (dan terima kasih telah memposting).
Philip Murphy
terima kasih beri tahu saya jika Anda memerlukan bantuan lain, omong-omong, saya menggunakan awalan webkit untuk animasi tetapi Anda juga harus menyertakan awalan mozilla karena mereka menggunakan aturan -moz-css.
Ilan Biala
Anda juga dapat mengalikan waktu dan sudut dengan 100 - mis. 0 derajat hingga 36000 derajat :-)
Simon_Weaver
@Simon_Weaver masih perlu 35999deg untuk tidak melihat bingkai ganda.
Ilan Biala
2
@IlanBiala kecuali saya sangat meragukan kartu grafis Anda berjalan pada 720fps ;-) Tidak mungkin bagi Anda untuk mengetahui kenaikan antara frame tanpa mengetahui framerate. Jika ada, Anda mungkin juga menempatkan 348 derajat karena pada setengah detik pada 60fps setiap frame akan maju 12 derajat. Saya lebih suka meletakkan 360 dan berharap seseorang yang pintar memprogram browser untuk menyesuaikan secara otomatis
Simon_Weaver
27

Anda bisa menggunakan animasi seperti ini:

-webkit-animation: spin 1s infinite linear;

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}
Kinglybird
sumber
2
Solusi luar biasa dan mudah!
TheLD
1

Kode Anda sepertinya benar. Saya akan menganggap itu ada hubungannya dengan fakta Anda menggunakan .png dan cara browser menggambar ulang objek saat rotasi tidak efisien, menyebabkan hang (browser apa yang sedang Anda uji?)

Jika memungkinkan, ganti .png dengan sesuatu yang asli.

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

Chrome tidak memberi saya jeda menggunakan metode ini.

Alex
sumber
Sempurna, saya cukup yakin asumsi Anda benar, namun saya menggunakan PNG karena ikon pemuatan saya bukanlah jam matahari, melainkan simbol gaya nuklir ... Meskipun demikian, saya tidak harus mengubahnya menjadi metode yang Anda gunakan. menyarankan - terima kasih!
Gcoop
1

Saya membuat perpustakaan kecil yang memungkinkan Anda dengan mudah menggunakan denyut tanpa gambar.

Ia menggunakan CSS3 tetapi kembali ke JavaScript jika browser tidak mendukungnya.

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

Contoh .

alex
sumber