Photoshop Question posted in
The official user guide can be found here.

So close… what is the code change needed to make a sweep second hand? – Photoshop

I’m trying to get the second hand on this clock to sweep smoothly instead of ticking. Also, It would be nice to have a better starting effect, rather than having the image jump to the current time. Finally, any suggestions you have on more efficiently coding this would be appreciated.

I can get the smooth animation by using css only, but didn’t know how to use that method and also have a real-time clock. I’ve also tried to use get.milliSeconds() to increase the resolution of the ticks, but that was a flop.

Also you’ll see some weird math where I define hp, mp and sp. I had to do that to turn the hands to 12:00 to start because I didn’t think to do that when I was in Photoshop.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ClockTester</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js">           
</script>
<script>
function everySecond() {
var currentTime = new Date();

var s = currentTime.getSeconds();
var m = currentTime.getMinutes();
m = m + (s/60);
var h = currentTime.getHours();
h = h + (m/60);
if(h == 24){
h = 0;
}
if(h > 12){
h = h - 12;
}
var hp = ((h+1.75) * 360 / 12);
var mp = ((m+50.5) * 360 / 60) ;
var sp = ((s+23) * 360 /60)  ;
$("#seconds").css({
'transform': 'rotate(' + sp + 'deg)'
});
$("#minutes").css({
'transform': 'rotate(' + mp + 'deg)'
});
$("#hours").css({
'transform': 'rotate(' + hp + 'deg)'
});
}
setInterval(everySecond, 1000);
</script>
<style>
.image {
position: absolute;
top: 50%;
left: 50%; 
margin:-200px 0 0 -200px;
}
</style>
</head>
<body> 
<div>
<img class="image"     src="https://66.media.tumblr.com/15b5e223866f9a2d5a592dd1dd31f493/tumblr_ptrh01lYI01v4sne9_540.gif">
<img id="hours" class="image"  src="https://66.media.tumblr.com/d315a9c84d38858205671a2d2a5b3126/tumblr_ptrh011jss1v4sne9_540.gif">
<img id="minutes" class="image"  src="https://66.media.tumblr.com/8e0cd8682849af842dda19c82c10af9d/tumblr_ptrh01LfWM1v4sne9_540.gif">
<img id="seconds" class="image"  src="https://66.media.tumblr.com/9773fc5b2345f553ad49985611c0a916/tumblr_ptrh01TQoo1v4sne9_540.gif">
</div>
</body>  
</html>
Tags:

2

Answers


  1. 0

    You could get milliseconds and decrease the interval.

    var s = currentTime.getSeconds() + currentTime.getMilliseconds() / 1000;

    For starting, you could set the <div> to hidden and activate after setting the first interval.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>ClockTester</title>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js">
  </script>
  <script>
    function everySecond() {
      var currentTime = new Date();

      var s = currentTime.getSeconds() + currentTime.getMilliseconds() / 1000;
      var m = currentTime.getMinutes();
      m = m + (s / 60);
      var h = currentTime.getHours();
      h = h + (m / 60);
      if (h == 24) {
        h = 0;
      }
      if (h > 12) {
        h = h - 12;
      }
      var hp = ((h + 1.75) * 360 / 12);
      var mp = ((m + 50.5) * 360 / 60);
      var sp = ((s + 23) * 360 / 60);
      $("#seconds").css({
        'transform': 'rotate(' + sp + 'deg)'
      });
      $("#minutes").css({
        'transform': 'rotate(' + mp + 'deg)'
      });
      $("#hours").css({
        'transform': 'rotate(' + hp + 'deg)'
      });
    }
    setInterval(everySecond, 20);
  </script>
  <style>
    .image {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -200px 0 0 -200px;
    }
  </style>
</head>

<body>
  <div>
    <img class="image" src="https://66.media.tumblr.com/15b5e223866f9a2d5a592dd1dd31f493/tumblr_ptrh01lYI01v4sne9_540.gif">
    <img id="hours" class="image" src="https://66.media.tumblr.com/d315a9c84d38858205671a2d2a5b3126/tumblr_ptrh011jss1v4sne9_540.gif">
    <img id="minutes" class="image" src="https://66.media.tumblr.com/8e0cd8682849af842dda19c82c10af9d/tumblr_ptrh01LfWM1v4sne9_540.gif">
    <img id="seconds" class="image" src="https://66.media.tumblr.com/9773fc5b2345f553ad49985611c0a916/tumblr_ptrh01TQoo1v4sne9_540.gif">
  </div>
</body>

</html>
    Login or Signup to reply.
  2. 0

    You can use transition-timing in css:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ClockTester</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js">           
</script>
<script>
function everySecond() {
var currentTime = new Date();

var s = currentTime.getSeconds();
var m = currentTime.getMinutes();
m = m + (s/60);
var h = currentTime.getHours();
h = h + (m/60);
if(h == 24){
h = 0;
}
if(h > 12){
h = h - 12;
}
var hp = ((h+1.75) * 360 / 12);
var mp = ((m+50.5) * 360 / 60) ;
var sp = ((s+23) * 360 /60)  ;
$("#seconds").css({
'transform': 'rotate(' + sp + 'deg)',
'transition': 'all 0.5s'
});
$("#minutes").css({
'transform': 'rotate(' + mp + 'deg)'
});
$("#hours").css({
'transform': 'rotate(' + hp + 'deg)'
});
}
setInterval(everySecond, 1000);
</script>
<style>
.image {
position: absolute;
top: 50%;
left: 50%; 
margin:-200px 0 0 -200px;
}
</style>
</head>
<body> 
<div>
<img class="image"     src="https://66.media.tumblr.com/15b5e223866f9a2d5a592dd1dd31f493/tumblr_ptrh01lYI01v4sne9_540.gif">
<img id="hours" class="image"  src="https://66.media.tumblr.com/d315a9c84d38858205671a2d2a5b3126/tumblr_ptrh011jss1v4sne9_540.gif">
<img id="minutes" class="image"  src="https://66.media.tumblr.com/8e0cd8682849af842dda19c82c10af9d/tumblr_ptrh01LfWM1v4sne9_540.gif">
<img id="seconds" class="image"  src="https://66.media.tumblr.com/9773fc5b2345f553ad49985611c0a916/tumblr_ptrh01TQoo1v4sne9_540.gif">
</div>
</body>  
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search