Clock with and without animation
Last active
February 6, 2017 09:11
-
-
Save arpitnarechania/c6e0dcc1956bd06d36f580dc664b4be8 to your computer and use it in GitHub Desktop.
Clock - With and Without Animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Clock using only Animation</title> | |
<!-- JavaScript Libraries //--> | |
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<!-- CSS Style //--> | |
<link href="style.css" rel="stylesheet" type="text/css"> | |
</head> | |
<body> | |
<div class="container"> | |
<center><h3>With Animation</h3></center> | |
<div id="clock_animation"> | |
</div> | |
</div> | |
<div class="container"> | |
<center><h3>Without Animation</h3></center> | |
<div id="clock_no_animation"> | |
</div> | |
</div> | |
</body> | |
<script type="text/javascript" src="main.js"></script> | |
<script> | |
var today = new Date(); | |
var h = today.getHours(); | |
var m = today.getMinutes(); | |
var s = today.getSeconds(); | |
var config_animation = { | |
animation: true, | |
margin : {top: 0, right: 50, bottom: 0, left: 50}, | |
radius : 100, | |
height: 300, | |
width: 300, | |
clock_stroke_color : "black", | |
clock_stroke_width : 2, | |
clock_fill_color : "#efefef", | |
x : 150, | |
y : 150, | |
mh_x : 150, | |
mh_y : 75, | |
sh_x : 150, | |
sh_y : 75, | |
hh_x : 150, | |
hh_y : 90, | |
hh_interval : 1000*60*60*12, | |
mh_interval : 1000*60*60, | |
sh_interval : 1000*60, | |
sh_start_angle : s*6, | |
mh_start_angle : m*6, | |
hh_start_angle : (h*60 + m)/2, | |
sh_stroke_color : "black", | |
sh_stroke_width : 1, | |
mh_stroke_color : "black", | |
mh_stroke_width : 2, | |
hh_stroke_color : "black", | |
hh_stroke_width : 2, | |
dom_element : "#clock_animation" | |
}; | |
var config_no_animation = { | |
animation: false, | |
margin : {top: 0, right: 50, bottom: 0, left: 50}, | |
radius : 100, | |
height: 300, | |
width: 300, | |
clock_stroke_color : "black", | |
clock_stroke_width : 2, | |
clock_fill_color : "#efefef", | |
x : 150, | |
y : 150, | |
mh_x : 150, | |
mh_y : 75, | |
sh_x : 150, | |
sh_y : 75, | |
hh_x : 150, | |
hh_y : 90, | |
hh_interval : 1000*60*60*12, | |
mh_interval : 1000*60*60, | |
sh_interval : 1000*60, | |
sh_start_angle : s*6, | |
mh_start_angle : m*6, | |
hh_start_angle : (h*60 + m)/2, | |
sh_stroke_color : "black", | |
sh_stroke_width : 1, | |
mh_stroke_color : "black", | |
mh_stroke_width : 2, | |
hh_stroke_color : "black", | |
hh_stroke_width : 2, | |
dom_element : "#clock_no_animation" | |
}; | |
drawClock(config_animation); | |
drawClock(config_no_animation); | |
</script> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function drawClock(config){ | |
var svg = d3.select(config.dom_element).append("svg") | |
.style("width", config.width + config.margin.left + config.margin.right) | |
.style("height", config.height + config.margin.top + config.margin.bottom); | |
var clock = svg | |
.append("circle") | |
.attr("cx",config.x) | |
.attr("cy",config.y) | |
.attr("r",config.radius) | |
.style("fill",config.clock_fill_color) | |
.style("stroke",config.clock_stroke_color) | |
.style("stroke-width",config.clock_stroke_width); | |
var digits = svg.selectAll("digits") | |
.data(["01","02","03","04","05","06","07","08","09","10","11","12"]) | |
.enter(); | |
digits | |
.append("text") | |
.attr("x",config.x-5) | |
.attr("y",config.y+5) | |
.attr("transform",function(d,i){ | |
var radius = config.radius-20; | |
return "translate(" + radius*Math.sin(toRadians(30)*(d)) + "," + radius*Math.cos(toRadians(180) + toRadians(30)*(d)) + ")" | |
}) | |
.text(function(d){return d;}); | |
seconds_hand = svg | |
.append("line") | |
.attr("x1",config.x) | |
.attr("y1",config.y) | |
.attr("x2",config.sh_x) | |
.attr("y2",config.sh_y) | |
.style("stroke",config.sh_stroke_color) | |
.style("stroke-width",config.sh_stroke_width); | |
minute_hand = svg | |
.append("line") | |
.attr("x1",config.x) | |
.attr("y1",config.y) | |
.attr("x2",config.mh_x) | |
.attr("y2",config.mh_y) | |
.style("stroke",config.mh_stroke_color) | |
.style("stroke-width",config.mh_stroke_width); | |
hour_hand = svg | |
.append("line") | |
.attr("x1",config.x) | |
.attr("y1",config.y) | |
.attr("x2",config.hh_x) | |
.attr("y2",config.hh_y) | |
.style("stroke",config.hh_stroke_color) | |
.style("stroke-width",config.hh_stroke_width); | |
if(config.animation){ | |
hour_hand_transition(hour_hand,config); | |
minute_hand_transition(minute_hand,config); | |
seconds_hand_transition(seconds_hand,config); | |
}else{ | |
moveSecondHand(seconds_hand,config,updateData()); | |
moveMinuteHand(minute_hand,config,updateData()); | |
moveHourHand(hour_hand,config,updateData()); | |
} | |
} | |
function moveSecondHand(seconds_hand,config,time_dict){ | |
var startAngle = time_dict["s"] * 6 - 6; | |
var endAngle = time_dict["s"] * 6; | |
seconds_hand | |
.transition() | |
.duration(0) | |
.ease("linear") | |
.attrTween("transform", function(d){return d3.interpolateString( | |
"rotate(" + startAngle + " " + config.x + " " + config.y +")", | |
"rotate(" + endAngle + " " + config.x + " " + config.y +")" | |
)}) | |
setTimeout(function() { | |
time_dict = updateData(); | |
moveSecondHand(seconds_hand,config,time_dict); // repeat | |
}, 1000); | |
} | |
function moveMinuteHand(minute_hand,config,time_dict){ | |
var startAngle = time_dict["m"] * 6 - 6; | |
var endAngle = time_dict["m"] * 6; | |
minute_hand | |
.transition() | |
.duration(0) | |
.ease("linear") | |
.attrTween("transform", function(d){return d3.interpolateString( | |
"rotate(" + startAngle + " " + config.x + " " + config.y +")", | |
"rotate(" + endAngle + " " + config.x + " " + config.y +")" | |
)}) | |
setTimeout(function() { | |
time_dict = updateData(); | |
moveMinuteHand(minute_hand,config,time_dict); // repeat | |
}, 1000); | |
} | |
function moveHourHand(hour_hand,config,time_dict){ | |
var startAngle = (time_dict["h"] * 60 + time_dict["m"])/2 - 6; | |
var endAngle = (time_dict["h"] * 60 + time_dict["m"])/2; | |
hour_hand | |
.transition() | |
.duration(0) | |
.ease("linear") | |
.attrTween("transform", function(d){return d3.interpolateString( | |
"rotate(" + startAngle + " " + config.x + " " + config.y +")", | |
"rotate(" + endAngle + " " + config.x + " " + config.y +")" | |
)}) | |
setTimeout(function() { | |
time_dict = updateData(); | |
moveHourHand(hour_hand,config,time_dict); // repeat | |
}, 1000); | |
} | |
function updateData(){ | |
var t = new Date(); | |
hours = (t.getHours() % 12); | |
minutes = t.getMinutes(); | |
seconds = t.getSeconds(); | |
time_dict = {h:hours,m:minutes,s:seconds} | |
return time_dict; | |
} | |
function toRadians(degs){ | |
return Math.PI*degs/180; | |
} | |
function sHandAnim(config) { | |
var startAngle = config.sh_start_angle; | |
var endAngle = 360 + startAngle; | |
return d3.interpolateString( | |
"rotate("+startAngle+" "+ config.x +" "+ config.y +")", | |
"rotate("+endAngle+" "+ config.x +" "+ config.y +")" | |
); | |
} | |
function mHandAnim(config) { | |
var startAngle = config.mh_start_angle; | |
var endAngle = 360 + startAngle; | |
return d3.interpolateString( | |
"rotate("+startAngle+" "+ config.x +" "+ config.y +")", | |
"rotate("+endAngle+" "+ config.x +" "+ config.y +")" | |
); | |
} | |
function hHandAnim(config) { | |
var startAngle = config.hh_start_angle; | |
var endAngle = 360 + startAngle; | |
return d3.interpolateString( | |
"rotate("+startAngle+" "+ config.x +" "+ config.y +")", | |
"rotate("+endAngle+" "+ config.x +" "+ config.y +")" | |
); | |
} | |
function hour_hand_transition(hour_hand,config){ | |
hour_hand | |
.transition() | |
.duration(config.hh_interval) | |
.ease("linear") | |
.attrTween("transform", function(d){return hHandAnim(config);}) | |
setTimeout(function() { | |
hour_hand_transition(hour_hand,config); // repeat | |
}, config.hh_interval); | |
} | |
function seconds_hand_transition(seconds_hand,config){ | |
seconds_hand | |
.transition() | |
.duration(config.sh_interval) | |
.ease("linear") | |
.attrTween("transform", function(d){return sHandAnim(config);}) | |
setTimeout(function() { | |
seconds_hand_transition(seconds_hand,config); // repeat | |
}, config.sh_interval); | |
} | |
function minute_hand_transition(minute_hand,config){ | |
minute_hand | |
.transition() | |
.duration(config.mh_interval) | |
.ease("linear") | |
.attrTween("transform", function(d){return mHandAnim(config);}) | |
setTimeout(function() { | |
minute_hand_transition(minute_hand,config); // repeat | |
}, config.mh_interval); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.container{ | |
display:inline-block; | |
float:left; | |
width: 300px; | |
border:1px solid black; | |
margin:2px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment