im designing clock, "hands" im using combination of js , css make smooth animation, converting second, minutes , hours corresponding degree in analog clock:
function clock() { var t = moment(), s = t.seconds() * 6, = t.minutes() * 6, o = t.hours() % 12 / 12 * 360 + (a / 12); $(".hour").css("transform", "rotate(" + o + "deg)"); $(".minute").css("transform", "rotate(" + + "deg)"); $(".second").css("transform", "rotate(" + s + "deg)"); } setinterval(clock, 1000); the problem is, after getting 360 degrees don't want variable keep increasing forever, return 0 , start again, but, css makes hands turn anticlockwise making undesired effect.
i thinking removing transition property using js when im go 360 0 , put in again, may solution, wonder if there cleaner way.
it can't done natively. transition 356 2 degrees go counter clockwise. if don't mind visible tick 356 2 degrees, remove transition. there's no reason that. try exploit fact rotate can take sane value, above 360 degrees. instead of returning 0, let clock continue increase value "endlessly" (the highest int value in js 9007199254740991, you'll have refresh browser after few million years... :)).
you can keep track of rotations far in separate counter object outside setinterval callback this:
var counter = { s: 0, a: 0, o: 0 }; var previous = null; then want store values previous iteration somewhere, , compare current values previous ones. if necessary, increase appropriate counter one.
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 }; then set multiplied degree value in inline css. way still have access pure values of s etc in case need something.
$(".second").css("transform", "rotate(" + (s + 360 * counter.s) + "deg)"); working fiddle: https://jsfiddle.net/dannyjolie/tccroo1q/6/
Comments
Post a Comment