I have a second needle which is rotating based on seconds in 360 deg angle .
Rotating is like tick tick tick .....
Can there be a smooth rotation in it
Here is the required code :
setInterval(clockRunner, 1000);
function clockRunner() {
let date = new Date()
let currentSecond = date.getSeconds();
let secondRotation = 6 * currentSecond + "deg";
document.getElementById("secondNeedle").style.transform = "rotate(" + secondRotation + ")";
document.getElementById("secondNeedle").style.transformOrigin = "center 91%";
}#secondNeedle {
position: absolute;
height: 46%;
width: 1%;
top: 8%;
left: 49.5%;
background-color: rgba(0, 0, 0);
}<div id="secondNeedle"></div>Can there be rotation like in below snippet:
#secondNeedle {
position: absolute;
height: 46%;
width: 1%;
top: 8%;
left: 49.5%;
background-color: rgba(0, 0, 0);
animation: example 60s linear infinite;
transform-origin: center 91%;
}
@keyframes example {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}<div id="secondNeedle"></div>Know that in above snippet rotation is not calculated . But can it possible to have the same effect
Thanks for help in advance
Sure.
Since you're modifying transform every second, the minimal fix for the ticking is to add a linear transition for transform values with a duration of 1s:
transition: 1s transform linear;
function clockRunner() {
let date = new Date()
let currentSecond = date.getSeconds();
let secondRotation = 6 * currentSecond + "deg";
document.getElementById("secondNeedle").style.transform = "rotate(" + secondRotation + ")";
document.getElementById("secondNeedle").style.transformOrigin = "center 91%";
}
clockRunner();
setInterval(clockRunner, 1000);#secondNeedle {
position: absolute;
height: 46%;
width: 1%;
top: 8%;
left: 49.5%;
background-color: rgba(0, 0, 0);
transition: 1s transform linear;
}<div id="secondNeedle"></div>As @epascarello noted, the clock doesn't quite do the right thing when it's moving from second 59 to 0.
To avoid that wraparound effect, you'll need to keep track of the full revolutions the clock has done:
let revolutions = 0;
let lastAngle = 0;
function clockRunner() {
let date = new Date()
let currentSecond = date.getSeconds();
let angle = 6 * currentSecond;
if(angle < lastAngle) revolutions += 1;
let secondRotation = (revolutions * 360 + angle) + "deg";
lastAngle = angle;
document.getElementById("secondNeedle").style.transform = "rotate(" + secondRotation + ")";
document.getElementById("secondNeedle").style.transformOrigin = "center 91%";
}
clockRunner();
setInterval(clockRunner, 1000);#secondNeedle {
position: absolute;
height: 46%;
width: 1%;
top: 8%;
left: 49.5%;
background-color: rgba(0, 0, 0);
transition: 1s transform linear;
}<div id="secondNeedle"></div>