Merge branch 'master' of git://github.com/basoko/html5demos into basoko-master
This commit is contained in:
Remy Sharp
commit
84c9db369d
11
demos.json
11
demos.json
|
|
@ -283,5 +283,14 @@
|
|||
"live": "safari chrome firefox opera"
|
||||
},
|
||||
"test": "Modernizr.webworkers"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "SVG clock animation",
|
||||
"url": "svg-clock",
|
||||
"tags": "svg",
|
||||
"note": "SVG inline clock with animation.",
|
||||
"support": {
|
||||
"live": "ie firefox opera safari chrome"
|
||||
}
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue