diff --git a/clock.js b/clock.js index 8b13789..0c746ac 100644 --- a/clock.js +++ b/clock.js @@ -1 +1,66 @@ +/* +Outer Orbit = Hours +Middle Orbit = Minutes +Inner Orbit = Seconds +*/ + + +let dt = new Date(); +let hours = 0; +let mintues = 0; +let seconds = 0; +let maxHours = 12; +let maxSeconds = 60; +let maxMinutes = 60; +let deg = 360; + +setTime(); + +function setTime(){ + let calcDeg = 0; + dt = new Date(); + hours = dt.getHours(); + minutes = dt.getMinutes(); + seconds = dt.getSeconds(); + + // Work out initial position of Hours Hand + let hoursPerc = (hours / maxHours) * 100; + calcDeg = Math.round((((hoursPerc * deg) / 100))); + $('.hours.arm').css({transform:'rotate('+calcDeg+'deg)'}); + + // Work out initial position of Minutes Hand + let minutesPerc = (minutes / maxMinutes) * 100; + calcDeg = Math.round((((minutesPerc * deg) / 100))); + $('.minutes.arm').css({transform:'rotate('+calcDeg+'deg)'}); + + // Work out initial position of Seconds Hand + let secondsPerc = (seconds / maxSeconds) * 100; + calcDeg = Math.round((((secondsPerc * deg) / 100))); + $('.seconds.arm').css({transform:'rotate('+calcDeg+'deg)'}); + + animateArms(); +} + +function animateArms() { + // Animate Seconds Arm + TweenMax.to( + $('.seconds.arm'), + 60, + {ease: Power0.easeNone, rotation:'+=360', repeat: -1}, + ); + + // Animate Minutes Arm + TweenMax.to( + $('.minutes.arm'), + 3600, + {ease: Power0.easeNone, rotation:'+=360', repeat: -1}, + ); + + // Animate Hours Arm + TweenMax.to( + $('.hours.arm'), + 43200, + {ease: Power0.easeNone, rotation:'+=360', repeat: -1}, + ); +}