Permalink
Browse files

Added a SVG clock animation demo.

  • Loading branch information...
basoko committed Nov 18, 2012
1 parent cc93513 commit 62e6551757c22fe285a804d7988b883933f4eaa6
Showing with 161 additions and 0 deletions.
  1. +161 −0 demos/svg-clock.html
View
@@ -0,0 +1,161 @@
+<title>SVG clock animation</title>
+<style>
+ /* any custom styles live here */
+ line {
+ stroke-width: 3px;
+ stroke: black;
+ }
+</style>
+<article>
+ <p>SVG clock animation by <a href="http://twitter.com/davidbasoko">David Basoko</a>.</p>
+ <div>
+ <label for="zoominput">Zoom</label>
+ <select id="rangeinput" onchange="CLOCK.zoom();">
+ <option value="1" selected="selected">1x</option>
+ <option value="2">2x</option>
+ <option value="3">3x</option>
+ <option value="4">4x</option>
+ <option value="5">5x</option>
+ </select>
+ </div>
+ <div>
+ <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" >
+ <g>
+ <circle id="circle" style="stroke: black; fill: #f8f8f8;" cx="100" cy="100" r="100"/>
+ <line id="hour0" x1="100" y1="10" x2="100" y2="0"/>
+ <line id="hour1" x1="150" y1="13" x2="145" y2="22"/>
+ <line id="hour2" x1="187" y1="50" x2="178" y2="55"/>
+ <line id="hour3" x1="190" y1="100" x2="200" y2="100"/>
+ <line id="hour4" x1="187" y1="150" x2="178" y2="145"/>
+ <line id="hour5" x1="150" y1="187" x2="145" y2="178"/>
+ <line id="hour6" x1="100" y1="190" x2="100" y2="200"/>
+ <line id="hour7" x1="50" y1="187" x2="55" y2="178"/>
+ <line id="hour8" x1="13" y1="150" x2="22" y2="145"/>
+ <line id="hour9" x1="0" y1="100" x2="10" y2="100"/>
+ <line id="hour10" x1="13" y1="50" x2="22" y2="55" />
+ <line id="hour11" x1="50" y1="13" x2="55" y2="22" />
+ </g>
+ <g>
+ <line x1="100" y1="100" x2="100" y2="45" style="stroke-width: 6px; stroke: green;" id="hourhand"/>
+ <line x1="100" y1="100" x2="100" y2="15" style="stroke-width: 4px; stroke: blue;" id="minutehand"/>
+ <line x1="100" y1="100" x2="100" y2="5" style="stroke-width: 2px; stroke: red;" id="secondhand"/>
+ </g>
+ </svg>
+ </div>
+
+</article>
+<script>
+var CLOCK = (function() {
+ var drawClock = function() {
+ var INITIAL_R = 100;
+
+ var zoom = document.getElementById("rangeinput").value;
+
+ var r = INITIAL_R * zoom;
+
+ // Draw Circle
+ var circle = document.getElementById("circle");
+ circle.setAttribute('r', r);
+ circle.setAttribute('cx', r);
+ circle.setAttribute('cy', r);
+
+ // Draw Hours
+ for(var i = 0; i < 12; i++) {
+ var hour = document.getElementById("hour"+i);
+ var degrees = i * 30;
+ hour.setAttribute('x1', getX(degrees, r, 0.9)); // 90% of radio's length.
+ hour.setAttribute('y1', getY(degrees, r, 0.9)); // 90% of radio's length.
+ hour.setAttribute('x2', getX(degrees, r));
+ hour.setAttribute('y2', getY(degrees, r));
+ }
+
+ // Draw hands
+ drawHands();
+ };
+
+ var drawHands = function() {
+ // Constants for hand's sizes.
+ var SECONDS_HAND_SIZE = 0.95,
+ MINUTES_HAND_SIZE = 0.85,
+ HOURS_HAND_SIZE = 0.55;
+
+ var circle = document.getElementById("circle");
+
+ // Clock Circle's Properties
+ var r = circle.getAttribute('r'),
+ cx = parseInt(circle.getAttribute('cx')),
+ cy = parseInt(circle.getAttribute('cy'));
+
+ // Current time.
+ var currentTime = new Date();
+
+ // Draw Hands
+ drawHand(document.getElementById("secondhand"),
+ currentTime.getSeconds(),
+ SECONDS_HAND_SIZE,
+ 6);
+ drawHand(document.getElementById("minutehand"),
+ currentTime.getMinutes(),
+ MINUTES_HAND_SIZE,
+ 6);
+ drawHand(document.getElementById("hourhand"),
+ currentTime.getHours(),
+ HOURS_HAND_SIZE,
+ 30);
+
+ function drawHand(hand, value, size, degrees) {
+ var deg = degrees * value;
+ x2 = getX(deg, r, size, cx),
+ y2 = getY(deg, r, size, cy);
+
+ hand.setAttribute('x1', cx);
+ hand.setAttribute('y1', cy);
+ hand.setAttribute('x2', x2);
+ hand.setAttribute('y2', y2);
+ }
+ };
+
+ /*
+ * Get a Point X value.
+ * degress. Angle's degrees.
+ * r. Circle's radio.
+ * adjust. Percent of length.
+ * x. Start of X point.
+ */
+ function getX(degrees, r, adjust, x) {
+ var x = x || r,
+ adj = adjust || 1;
+ return x + r * adj * Math.cos(getRad(degrees));
+ }
+
+ /*
+ * Get a Point Y value.
+ * degress. Angle's degrees.
+ * r. Circle's radio.
+ * adjust. Percent of length.
+ * x. Start of Y point.
+ */
+ function getY(degrees, r, adjust, y) {
+ var y = y || r,
+ adj = adjust || 1;
+ return y + r * adj * Math.sin(getRad(degrees));
+ }
+
+ // Convert from degrees to radians.
+ function getRad(degrees) {
+ var adjust = Math.PI / 2;
+ return (degrees * Math.PI / 180) - adjust;
+ }
+
+ return {
+ init: function() {
+ drawClock();
+ setInterval(drawHands, 1000);
+ },
+ zoom: function() {
+ drawClock();
+ }
+ };
+})();
+CLOCK.init();
+</script>

0 comments on commit 62e6551

Please sign in to comment.