Clock demo

2014-05-06 10:18:46 +10:00 · 2014-05-06 10:18:46 +10:00 · 58fd1f9b52
parent c55f03745d
commit 58fd1f9b52
1 changed files with 80 additions and 0 deletions
--- a/demos/clock/index.html
+++ b/demos/clock/index.html
@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="copyright" content="Copyright © 2013 Adobe Systems Incorporated. All rights reserved.
+ 
+ Licensed under the Apache License, Version 2.0 (the “License”);
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ 
+ http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an “AS IS” BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.">
+        <title>Snap</title>
+        <style media="screen">
+        body {
+            background: #fff;
+        }
+        </style>
+        <script src="../../dist/snap.svg-min.js"></script>
+        <script>
+        window.onload = function () {
+            var s = Snap(600, 600);
+            var path = "",
+                nums = s.text(300, 300, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]).attr({
+                    font: "300 40px Helvetica Neue",
+                    textAnchor: "middle"
+                });
+            for (var i = 0; i < 72; i++) {
+                var r = i % 6 ? i % 3 ? 247 : 240 : 230,
+                    sin = Math.sin(Snap.rad(5 * i)),
+                    cos = Math.cos(Snap.rad(5 * i));
+                path += "M" + [300 + 250 * cos, 300 + 250 * sin] + "L" + [300 + r * cos, 300 + r * sin];
+                if (!(i % 6)) {
+                    nums.select("tspan:nth-child(" + (i / 6 + 1) + ")").attr({
+                        x: 300 + 200 * Math.cos(Snap.rad(5 * i - 60)),
+                        y: 300 + 200 * Math.sin(Snap.rad(5 * i - 60)) + 15,
+                    });
+                }
+            }
+            var table = s.g(nums, s.path(path).attr({
+                fill: "none",
+                stroke: "#000",
+                strokeWidth: 2
+            })).attr({
+                transform: "t0,210"
+            });
+            s.g(table).attr({
+                clip: s.circle(300, 300, 100)
+            });
+            var hand = s.line(300, 200, 300, 400).attr({
+                fill: "none",
+                stroke: "#f63",
+                strokeWidth: 2
+            });
+            s.circle(300, 300, 100).attr({
+                stroke: "#000",
+                strokeWidth: 10,
+                fillOpacity: 0
+            }).click(function () {
+                Snap.animate(0, 360, function (val) {
+                    table.transform("t" +
+                    [
+                        210 * Math.cos(Snap.rad(val + 90)), 
+                        210 * Math.sin(Snap.rad(val + 90))
+                    ]);
+                    hand.transform("r" + [val, 300, 300]);
+                }, 12000);
+            });
+            
+        };
+        </script>
+    </head>
+    <body>
+    </body>
+</html>