Creating a sleek animated analog clock using CSS and jQuery

Question

Creating a sleek animated analog clock using CSS and jQuery

I am facing a small issue with my CSS3/jQuery analog clock.

Currently, the movement of the clock hands is a bit abrupt. I would like the animation to be smooth. I attempted using transition: all .1s, but it gets messy when the clock hands reach the top position.

The hands of the clock are being rotated using transform: rotate(). Each movement rotates them by 6 degrees.

A potential solution could involve changing the rotation angles to make the animation smoother. Instead of rotating each hand by 6 degrees every second, minute, or hour, consider rotating by 1 degree for every 1/6th of a second for the second-hand, every 10 seconds for the minute-hand, and every 10 minutes for the hour-hand. This adjustment might create a more seamless animation effect, although the implementation details are not clear to me.

This is the JavaScript code snippet:

$(function() {

      setInterval( function() {
      var seconds = new Date().getSeconds();
      var sdegree = seconds * 6;
      var srotate = "rotate(" + sdegree + "deg)";

      $("#sec").css({ "transform": srotate });

      }, 1000 );

      setInterval( function() {
      var hours = new Date().getHours();
      var mins = new Date().getMinutes();
      var hdegree = hours * 30 + (mins / 2);
      var hrotate = "rotate(" + hdegree + "deg)";

      $("#hour").css({ "transform": hrotate});

      }, 1000 );

      setInterval( function() {
      var mins = new Date().getMinutes();
      var mdegree = mins * 6;
      var mrotate = "rotate(" + mdegree + "deg)";

      $("#min").css({"transform" : mrotate });

      }, 1000 );

});

Check out the jsFiddle Demo here

If you understand the problem and have any insights, I would greatly appreciate your help :)

javascript jquery css

Answer 1

Answer №1

Establish a linear transition for the clock hands:

#clock div {
    -moz-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

To prevent the abnormal occurrence where the hands reverse to reach zero, it is recommended to adjust your JavaScript code to operate in milliseconds. This way, the rotation value (in degrees) will only increase. CSS rotation can smoothly accommodate this change:

$(function() { 
     var i=0;
    setInterval( function() {
        //obtain time elapsed since midnight in milliseconds
         var now = new Date(),
        then = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate(),
        0,0,0),
        mil = now.getTime() - then.getTime(); // difference in milliseconds

          var h = (mil/(1000*60*60));
          var m = (h*60);
          var s = (m*60);
          //console.log(h+":"+m+":"+s);   

      var sdegree = (s * 6);
      var srotate = "rotate(" + sdegree + "deg)";  
      $("#sec").css({ "transform": srotate });

      var hdegree = h * 30 + (h / 2);
      var hrotate = "rotate(" + hdegree + "deg)";
      $("#hour").css({ "transform": hrotate});

      var mdegree = m * 6;
      var mrotate = "rotate(" + mdegree + "deg)";      
      $("#min").css({ "transform" : mrotate });

         if(i>0){
             $("#clock").addClass("transform");       
         }
         i++;

      }, 1000 );

});

http://jsfiddle.net/FHNJf/10/

UPDATE:

A pure JS method for achieving smooth sweeping hands has been provided here. It utilizes requestAnimationFrame to regulate the loop timings. As it does not rely on CSS transitions, it avoids the odd behavior of hands 'catching up' when returning focus to the browser tab.

//use requestAnimationFrame for smoothness (shimmed with setTimeout fallback)
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
              window.setTimeout(callback, 1000 / 60);
          };
})();

//initialize the clock in a self-invoking function
(function clock(){ 
    var hour = document.getElementById("hour"),
        min = document.getElementById("min"),
        sec = document.getElementById("sec");
    //set up a loop
    (function loop(){
        requestAnimFrame(loop);
        draw();
    })();
    //position the hands
    function draw(){
        var now = new Date(),//now
            then = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0),//midnight
            diffInMil = (now.getTime() - then.getTime()),// difference in milliseconds
            h = (diffInMil/(1000*60*60)),//hours
            m = (h*60),//minutes
            s = (m*60);//seconds
        //rotate the hands accordingly
        sec.style.webkitTransform = "rotate(" + (s * 6) + "deg)";
        hour.style.webkitTransform = "rotate(" + (h * 30 + (h / 2)) + "deg)";
        min.style.webkitTransform = "rotate(" + (m * 6) + "deg)";
    } 
})();

http://jsfiddle.net/FHNJf/13/

Answer 2

Establish a linear transition for the clock hands:

#clock div {
    -moz-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

To prevent the abnormal occurrence where the hands reverse to reach zero, it is recommended to adjust your JavaScript code to operate in milliseconds. This way, the rotation value (in degrees) will only increase. CSS rotation can smoothly accommodate this change:

$(function() { 
     var i=0;
    setInterval( function() {
        //obtain time elapsed since midnight in milliseconds
         var now = new Date(),
        then = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate(),
        0,0,0),
        mil = now.getTime() - then.getTime(); // difference in milliseconds

          var h = (mil/(1000*60*60));
          var m = (h*60);
          var s = (m*60);
          //console.log(h+":"+m+":"+s);   

      var sdegree = (s * 6);
      var srotate = "rotate(" + sdegree + "deg)";  
      $("#sec").css({ "transform": srotate });

      var hdegree = h * 30 + (h / 2);
      var hrotate = "rotate(" + hdegree + "deg)";
      $("#hour").css({ "transform": hrotate});

      var mdegree = m * 6;
      var mrotate = "rotate(" + mdegree + "deg)";      
      $("#min").css({ "transform" : mrotate });

         if(i>0){
             $("#clock").addClass("transform");       
         }
         i++;

      }, 1000 );

});

http://jsfiddle.net/FHNJf/10/

UPDATE:

A pure JS method for achieving smooth sweeping hands has been provided here. It utilizes requestAnimationFrame to regulate the loop timings. As it does not rely on CSS transitions, it avoids the odd behavior of hands 'catching up' when returning focus to the browser tab.

//use requestAnimationFrame for smoothness (shimmed with setTimeout fallback)
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
              window.setTimeout(callback, 1000 / 60);
          };
})();

//initialize the clock in a self-invoking function
(function clock(){ 
    var hour = document.getElementById("hour"),
        min = document.getElementById("min"),
        sec = document.getElementById("sec");
    //set up a loop
    (function loop(){
        requestAnimFrame(loop);
        draw();
    })();
    //position the hands
    function draw(){
        var now = new Date(),//now
            then = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0),//midnight
            diffInMil = (now.getTime() - then.getTime()),// difference in milliseconds
            h = (diffInMil/(1000*60*60)),//hours
            m = (h*60),//minutes
            s = (m*60);//seconds
        //rotate the hands accordingly
        sec.style.webkitTransform = "rotate(" + (s * 6) + "deg)";
        hour.style.webkitTransform = "rotate(" + (h * 30 + (h / 2)) + "deg)";
        min.style.webkitTransform = "rotate(" + (m * 6) + "deg)";
    } 
})();

http://jsfiddle.net/FHNJf/13/

Answer 3

Answer №2

To make the transition smoother for hand elements, you can set the transition duration. Here's an example of how to do it:

#clock div {
    -webkit-transition-duration: 1.0s;
    -moz-transition-duration: 1.0s;
    -o-transition-duration: 1.0s;
    transition-duration: 1.0s;
}

Check out the updated fiddle here

Answer 4

To make the transition smoother for hand elements, you can set the transition duration. Here's an example of how to do it:

#clock div {
    -webkit-transition-duration: 1.0s;
    -moz-transition-duration: 1.0s;
    -o-transition-duration: 1.0s;
    transition-duration: 1.0s;
}

Check out the updated fiddle here

Answer 5

Answer №3

If you want the movement of the second hand (and all other hands) to be seamless, consider applying the following CSS to the #sec div:

[prefix-]transition: all 1.00s linear 0.0s;

However, this solution may only solve part of the problem. You will need to carefully handle the transform for rotation to avoid any issues near the 12 o'clock position.

Alternatively, you could use a single setInterval(...) function that creates a new Date() object and updates the clock hands accordingly.

Answer 6

If you want the movement of the second hand (and all other hands) to be seamless, consider applying the following CSS to the #sec div:

[prefix-]transition: all 1.00s linear 0.0s;

However, this solution may only solve part of the problem. You will need to carefully handle the transform for rotation to avoid any issues near the 12 o'clock position.

Alternatively, you could use a single setInterval(...) function that creates a new Date() object and updates the clock hands accordingly.

Creating a sleek animated analog clock using CSS and jQuery

This is the JavaScript code snippet:

Answer №1

Answer №2

Answer №3

Similar questions

How to toggle between displaying divs using JavaScript and Jquery

"In strict mode, the object is subjected to specific rules

How can you retrieve the index of the outer repeater item within nested ng-repeaters in AngularJS?

Creating a series of promises in a structured chain

Utilizing long polling technique with jQuery/AJAX on the server end

Can WikiData be accessed by providing a random pageId?

Positioning the bottom of a two-column layout using CSS

"Viewed By" aspect of Facebook communities

Creating a universal representation of the global object in JavaScript that is not tied to any specific implementation

Sending a collection of items to a web API endpoint

Traverse an array containing nested objects using Javascript

The problem of undefined icons in Material UI's Stepper StepLabel

What is the most effective method for customizing non-MUI elements within an MUI framework?

What is the process for adding an image to a scene using menu options?

The MessageError: expressjs is unable to read the property "image" because it is null

Efficiently managing modules with requirejs and Backbone.Marionette

Adjust the text to fit neatly within a circular-shaped column container

When using Node.js, Express.js, and MongoDB, ensure that the route.post() function is provided with proper callback functions instead of

Why is npm attempting to compile a previous version of my code?

Using identical class names in different components was not possible as the CSS was not being contained within the styled component's scope