Languages

Menu
Sites
Language
move second hand of analog class smoothly problem (Gear S2)

I want to move the seconds hand smoothly as I have watched many watches moving their seconds hand swiftly with out making tick tick movements, I try to make it with transition transform css but something is wrong. i have problem on 59 to 0 sec and page load movement and screen turn on movement.

anyone can help me to fix it ?

code snippet: https://jsfiddle.net/fbmsgmao/

Full Html Code :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="clock">
  <div id="hour"></div>
  <div id="min"></div>
  <div id="sec"></div>
</div>
<style>
  #sec {
    -webkit-transform-origin: center bottom;
    -webkit-transition: -webkit-transform 1s linear;
    z-index: 10;
    width: 2px;
    height: 80px;
    background: red;
    position: absolute;
    right: 0;
    left: 0;
    top: 20px;
    margin: auto;
  }
  body {
    background: #CCC;
  }
  
  #clock {
    width: 200px;
    height: 200px;
    background: #FFF;
    border-radius: 50%;
    position: relative;
  }
  
  #min {
    width: 4px;
    height: 75px;
    background: black;
    position: absolute;
    right: 0;
    left: 0;
    top: 25px;
    margin: auto;
    -webkit-transform-origin: center bottom;
    -webkit-transform: rotate(0deg);
    z-index: 8;
  }
  #hour {
    width: 4px;
    height: 50px;
    background: black;
    position: absolute;
    right: 0;
    left: 0;
    top: 50px;
    margin: auto;
    -webkit-transform-origin: center bottom;
    -webkit-transform: rotate(0deg);
    z-index: 6;
  }

</style>
<script>
  function displayTime() {
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var second = date.getSeconds();
    var rotate0 = hours * 30;
    var rotate1 = minutes * 0.45;
    var horotate = rotate0 + rotate1;
    var minrotate = minutes * 6;
    var secrotate = second * 6;
    $('#hour').css("-webkit-transform", " rotate(" + horotate + "deg)");
    $('#min').css("-webkit-transform", " rotate(" + minrotate + "deg)");
    $('#sec').css("-webkit-transform", " rotate(" + secrotate + "deg)");
  }
  var interval;

  interval = setInterval(displayTime, 500);

</script>

 

Edited by: aMir Sirati on 05 Jul, 2016
View Selected Answer
List

Responses

7 Replies
Mark as answer
Shaswati Saha

Hello,
To avoid the weird behaviour where the hands reverse to get to zero you should change your JS to work in milliseconds. This way the rotation value (degrees) only ever increments. CSS rotation is fine with that.

Please go through the link below, it contains those changes you need to do in your JS code.
http://stackoverflow.com/a/23847746/3978287

 

aMir Sirati

requestAnimFrame is not good for battery and performance, do you have an another way ?

Shaswati Saha

Hi,
In that case, you can go with this one:
http://jsfiddle.net/FHNJf/10/

aMir Sirati

thanks for your answer but in the screen turn on (on watch) or when i change tab for exam 30 sec and back to this page again second hand is move fast :(

Shaswati Saha

So far I could understand, the animation will be kept running when it'll be visible to the user otherwise it won't keep it running if you use requestAnimFrame. Thus it indicates to less CPU, GPU and memory usage leading to much longer battery life than the other methods like setInterval and setTimeout. 
I think you had been misguided somehow. I would like to suggest you to use requestAnimFrame, don't worry it'll not kill your battery.  

aMir Sirati

thank you so much for your time, i will be do it with requestAnimFrame

Alex Schlei

Hi, I know this topic is a few months old, but I still have a related question.

I used the suggested code with requestAnimFrame which works just fine for smooth hands. Also, when the watch wakes up from sleep the hands are positioned right directly. But when coming from AOD mode, the hands flip visibly from their last position to the current time. That looks really ugly. How can I have the hands directly in their position for current time when leaving AOD mode? This can also be seen on the samsung sample watch faces in tizen studio, they also flip to current time after leaving AOD.

 

Please help!