Skip to content

Instantly share code, notes, and snippets.

@arpitnarechania

arpitnarechania/README.md

Last active February 6, 2017 09:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arpitnarechania/c6e0dcc1956bd06d36f580dc664b4be8 to your computer and use it in GitHub Desktop.
Save arpitnarechania/c6e0dcc1956bd06d36f580dc664b4be8 to your computer and use it in GitHub Desktop.
Download ZIP
Clock - With and Without Animation
Raw
README.md

Clock with and without animation

Raw
index.html
<!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>
Raw
main.js
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);
}
Raw
style.css
.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