Tengo una segunda aguja que gira en función de los seconds en un ángulo de 360 deg .
Girar es como tic tac tic tic ..... ¿Puede haber una rotación suave en él?
Aquí está el código requerido:
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>¿Puede haber rotación como en el siguiente fragmento:
#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>Tenga en cuenta que en la rotación de fragmentos anterior no se calcula. Pero, ¿es posible tener el mismo efecto?
Gracias por la ayuda de antemano
Por supuesto.
Dado que está modificando la transform cada segundo, la solución mínima para el tictac es agregar una transición lineal para los valores de transform con una duración de 1 segundo:
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>Como señaló @epascarello, el reloj no hace lo correcto cuando se mueve del segundo 59 al 0.
Para evitar ese efecto envolvente, deberá realizar un seguimiento de las revoluciones completas que ha realizado el reloj:
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>