-
Notifications
You must be signed in to change notification settings - Fork 2
/
snaptut-animateoffset.html
113 lines (84 loc) · 3.18 KB
/
snaptut-animateoffset.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!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> <a href="/">Contact Me</a>
<article>
<h1 class="heading">Animate dash-offset Test</h1>
<div class="intro">Playing around writing a little animate dashoffset object. Full credit goes to Jake Archibald <a href="http://jakearchibald.com/2013/animated-line-drawing-svg/">here</a> for the method</div>
<pre class="codestuff"><code contenteditable="true">
var s = Snap("#svgout");
<xmp>
var svgString1 = '<path id="s3" d="M 60 0 L 120 0 L 180 60 L 180 120 L 120 180 L 60 180 L 0 120 L 0 60 Z" stroke="blue"/>';
var svgString2 = '<path id="s3" d="M 60 0 L 120 0 L 180 60 L 180 120 L 120 180 L 60 180 L 0 120 L 0 60 Z" stroke="red"/>';
</xmp>
function Drawing( svgString, transformString, timeBetweenDraws ) {
this.fragment = Snap.parse( svgString );
this.pathArray = this.fragment.selectAll('path');
this.group = s.g().transform( transformString ).drag();
this.timeBetweenDraws = timeBetweenDraws;
};
Drawing.prototype.init = function( svgString, transformString ) {
this.group.clear();
this.currentPathIndex = 0;
};
Drawing.prototype.endReached = function() {
if( this.currentPathIndex >= this.pathArray.length ) {
return true;
};
};
Drawing.prototype.callOnFinished = function() {
}
Drawing.prototype.initDraw = function() {
this.init();
this.draw();
};
Drawing.prototype.quickDraw = function() {
this.init();
this.timeBetweenDraws = 0;
this.draw();
};
Drawing.prototype.draw = function() { // this is the main animation bit
if( this.endReached() ) {
if( this.callOnFinished ) {
this.callOnFinished();
return
};
};
var myPath = this.pathArray[ this.currentPathIndex ] ;
this.leng = myPath.getTotalLength();
this.group.append( myPath );
myPath.attr({
fill: 'none',
"stroke-dasharray": this.leng + " " + this.leng,
"stroke-dashoffset": this.leng
});
this.currentPathIndex++;
myPath.animate({"stroke-dashoffset": 0}, this.timeBetweenDraws, mina.easeout, this.draw.bind( this ) );
};
var myDrawing1 = new Drawing( svgString1, 't0, 0, s1.8', 800 );
var myDrawing2 = new Drawing( svgString2, 't69,50 s1.8', 3000 );
var myDrawing3 = new Drawing( svgString2, 't150,150 s1.8', 5000 );
myDrawing1.initDraw();
myDrawing1.callOnFinished = function() { myDrawing2.initDraw() };
myDrawing2.callOnFinished = function() { myDrawing3.initDraw() };
</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>