-
Notifications
You must be signed in to change notification settings - Fork 2
/
snaptut-animate-status.html
75 lines (56 loc) · 1.76 KB
/
snaptut-animate-status.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
<title>Snap.svg Tutorial</title>
<script src="analytics.js"></script>
</head>
<body>
<link href="/snapstyle.css" rel="stylesheet">
<div id="container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="snap.svg.js"></script>
<a href="http://snapsvg.io/docs/">Snap Docs</a> <a href="/">More SVG Dabbles</a>
<article>
<h1 class="heading">Animate Numbers (provided by Dmitry)</h1>
<div class="intro">Here's an example of animating numbers from Dmitry. Note the 'value' parameter that we can use to influence things inside the function which is based on Snaps timing and the duration we set.</div>
<pre class="codestuff"><code contenteditable="true">
var s = Snap("#svgout");
var r = s.rect(10,10,10,10);
var anim = Snap.animation({ width: 100 }, 2000);
console.log( 'r.inanim()', r.inAnim() );
console.log( 'r', r );
r.animate( anim );
setTimeout( function() {
console.log( 'anim', anim );
console.log( 'r.inanim()', r.inAnim() );
console.log( 'r.anims', r.anims );
}, 500
);
console.log( anim );
var r2 = s.rect( 50,50,50,50 );
var x = Snap.animate(0, 10, function (val) {
console.log( this );
r2.attr({
x: val
});
}, 1000);
console.log( 'x', x );
setTimeout( function() {
x.pause();
}, 250);
setTimeout( function() {
x.resume();
},2000);
</code>
<button class="run">Edit/Run</button>
</pre>
</article>
<div class="intro">SVGout area...</div>
<div class="output">
<svg id="svgout" width="400" height="400"></svg>
</div>
<div class="intro">The actual svg markup looks like this (when you've clicked on run)....</div>
<div id="htmlraw"></div>
<script src="snaptut.js"></script></script>
<script src="hijs.js"></script>
</body>