CSS dönüşümü 360 derece aşmadan her zaman saat yönünde döndürme

Question

"Eller" için bir saat tasarlama Im düzgün bir animasyon yapmak için JS ve CSS bir arada kullanarak, analog saat içinde karşılık gelen derece ikinci, dakika ve saat dönüştürme :

function clock() { 
    var t = moment(), 
     s = t.seconds() * 6, 
     a = t.minutes() * 6, 
     o = t.hours() % 12/12 * 360 + (a/12); 

    $(".hour").css("transform", "rotate(" + o + "deg)"); 
    $(".minute").css("transform", "rotate(" + a + "deg)"); 
    $(".second").css("transform", "rotate(" + s + "deg)"); 
} 

setInterval(clock, 1000); 

sorun, ben sonsuza artmaya devam değişkeni istemiyoruz 360 dereceye aldıktan sonra, sadece 0'a dönün ve tekrar başlayın, ancak, CSS eller saat yönünün istenmeyen bir etkiye yapma çevirmek yapar .

Example

Ben 0'a 360 gitmek ve tekrar koymak üzere im, bu bir çözüm olabilir zaman JS kullanarak geçiş özelliği kaldırma hakkında düşünüyordum ama bir orada acaba temizleyici yol. Doğal olarak yapılamaz.

Answer 1

356'dan 2 dereceye geçiş her zaman saat yönüne ters yönde ilerler. Görünür kenarı 356'dan 2 dereceye düşürmezseniz, geçişi kaldırmanız yeterlidir. Ama bunu yapmak için bir sebep yok. rotate'un 360 derecenin üzerinde herhangi bir aklı değerini alabileceği gerçeğini kullanmaya çalışın. Yani, 0'a geri dönmek yerine, saatin "sonsuz" değerini artırmaya devam etmesine izin verin (js içindeki en yüksek int değeri 9007199254740991'dir, bu yüzden birkaç milyon yıl sonra tarayıcıyı yenilemeniz gerekir ... :)).

Böyle setInterval callback'inde dışında şimdiye kadar ayrı counter nesnede rotasyonlar takip edebilirsiniz:

var counter = { 
    s: 0, 
    a: 0, 
    o: 0 
}; 

var previous = null; 

Sonra yere önceki yineleme gelen tüm değerleri depolamak ve cari değerleri karşılaştırmak istiyorum öncekiler. Gerekirse, uygun sayacı bir artırın.

if(previous){ 
    if(s < previous.s){ 
    counter.s += 1; 
    } 
    if(a < previous.a){ 
    counter.a += 1; 
    } 
    if(o < previous.o){ 
    counter.o += 1; 
    } 
} 

previous = { 
    s: s, 
    a: a, 
    o: o 
}; 

Ardından, satır içi css'deki çarpım derecesi değerini ayarlayın. Bu şekilde, bir şey için bunlara ihtiyacınız varsa, s vb. Saf değerlere erişebilirsiniz.

$(".second").css("transform", "rotate(" + (s + 360 * counter.s) + "deg)"); 

Çalışma keman: https://jsfiddle.net/dannyjolie/tccroo1q/6/