path.js
4.63 KB
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
// Lower level API to animate any kind of svg path
var Tweenable = require('shifty');
var utils = require('./utils');
var EASING_ALIASES = {
easeIn: 'easeInCubic',
easeOut: 'easeOutCubic',
easeInOut: 'easeInOutCubic'
};
var Path = function Path(path, opts) {
// Default parameters for animation
opts = utils.extend({
duration: 800,
easing: 'linear',
from: {},
to: {},
step: function() {}
}, opts);
this._path = path;
this._opts = opts;
this._tweenable = null;
// Set up the starting positions
var length = this._path.getTotalLength();
this._path.style.strokeDasharray = length + ' ' + length;
this._path.style.strokeDashoffset = length;
};
Path.prototype.value = function value() {
var offset = this._getComputedDashOffset();
var length = this._path.getTotalLength();
var progress = 1 - offset / length;
// Round number to prevent returning very small number like 1e-30, which
// is practically 0
return parseFloat(progress.toFixed(6), 10);
};
Path.prototype.set = function set(progress) {
this.stop();
this._path.style.strokeDashoffset = this._progressToOffset(progress);
var step = this._opts.step;
if (utils.isFunction(step)) {
var values = this._calculateTo(progress, 'linear');
step(values, this._opts.attachment || this);
}
};
Path.prototype.stop = function stop() {
this._stopTween();
this._path.style.strokeDashoffset = this._getComputedDashOffset();
};
// Method introduced here:
// http://jakearchibald.com/2013/animated-line-drawing-svg/
Path.prototype.animate = function animate(progress, opts, cb) {
opts = opts || {};
if (utils.isFunction(opts)) {
cb = opts;
opts = {};
}
var passedOpts = utils.extend({}, opts);
// Copy default opts to new object so defaults are not modified
var defaultOpts = utils.extend({}, this._opts);
opts = utils.extend(defaultOpts, opts);
var shiftyEasing = this._easing(opts.easing);
var values = this._resolveFromAndTo(progress, shiftyEasing, passedOpts);
this.stop();
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
this._path.getBoundingClientRect();
var offset = this._getComputedDashOffset();
var newOffset = this._progressToOffset(progress);
var self = this;
this._tweenable = new Tweenable();
this._tweenable.tween({
from: utils.extend({ offset: offset }, values.from),
to: utils.extend({ offset: newOffset }, values.to),
duration: opts.duration,
easing: shiftyEasing,
step: function(state) {
self._path.style.strokeDashoffset = state.offset;
opts.step(state, opts.attachment);
},
finish: function(state) {
// step function is not called on the last step of animation
self._path.style.strokeDashoffset = state.offset;
opts.step(state, opts.attachment);
if (utils.isFunction(cb)) {
cb();
}
}
});
};
Path.prototype._getComputedDashOffset = function _getComputedDashOffset() {
var computedStyle = window.getComputedStyle(this._path, null);
return parseFloat(computedStyle.getPropertyValue('stroke-dashoffset'), 10);
};
Path.prototype._progressToOffset = function _progressToOffset(progress) {
var length = this._path.getTotalLength();
return length - progress * length;
};
// Resolves from and to values for animation.
Path.prototype._resolveFromAndTo = function _resolveFromAndTo(progress, easing, opts) {
if (opts.from && opts.to) {
return {
from: opts.from,
to: opts.to
};
}
return {
from: this._calculateFrom(easing),
to: this._calculateTo(progress, easing)
};
};
// Calculate `from` values from options passed at initialization
Path.prototype._calculateFrom = function _calculateFrom(easing) {
return Tweenable.interpolate(this._opts.from, this._opts.to, this.value(), easing);
};
// Calculate `to` values from options passed at initialization
Path.prototype._calculateTo = function _calculateTo(progress, easing) {
return Tweenable.interpolate(this._opts.from, this._opts.to, progress, easing);
};
Path.prototype._stopTween = function _stopTween() {
if (this._tweenable !== null) {
this._tweenable.stop();
this._tweenable.dispose();
this._tweenable = null;
}
};
Path.prototype._easing = function _easing(easing) {
if (EASING_ALIASES.hasOwnProperty(easing)) {
return EASING_ALIASES[easing];
}
return easing;
};
module.exports = Path;