1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | import { getRawPath, cacheRawPathMeasurements, getPositionOnPath, pointsToSegment, flatPointsToSegment, sliceRawPath, stringToRawPath, rawPathToString, transformRawPath, convertToPath } from "./utils/paths.js";
|
13 | import { getGlobalMatrix } from "./utils/matrix.js";
|
14 |
|
15 | let _xProps = "x,translateX,left,marginLeft,xPercent".split(","),
|
16 | _yProps = "y,translateY,top,marginTop,yPercent".split(","),
|
17 | _DEG2RAD = Math.PI / 180,
|
18 | gsap, PropTween, _getUnit, _toArray,
|
19 | _getGSAP = () => gsap || (typeof(window) !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap),
|
20 | _populateSegmentFromArray = (segment, values, property, mode) => {
|
21 | let l = values.length,
|
22 | si = mode === 2 ? 0 : mode,
|
23 | i = 0,
|
24 | v;
|
25 | for (; i < l; i++) {
|
26 | segment[si] = v = parseFloat(values[i][property]);
|
27 | mode === 2 && (segment[si+1] = 0);
|
28 | si += 2;
|
29 | }
|
30 | return segment;
|
31 | },
|
32 | _getPropNum = (target, prop, unit) => parseFloat(target._gsap.get(target, prop, unit || "px")) || 0,
|
33 | _relativize = segment => {
|
34 | let x = segment[0],
|
35 | y = segment[1],
|
36 | i;
|
37 | for (i = 2; i < segment.length; i+=2) {
|
38 | x = (segment[i] += x);
|
39 | y = (segment[i+1] += y);
|
40 | }
|
41 | },
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 |
|
57 | _segmentToRawPath = (plugin, segment, target, x, y, slicer, vars, unitX, unitY) => {
|
58 | if (vars.type === "cubic") {
|
59 | segment = [segment];
|
60 | } else {
|
61 | vars.fromCurrent !== false && segment.unshift(_getPropNum(target, x, unitX), y ? _getPropNum(target, y, unitY) : 0);
|
62 | vars.relative && _relativize(segment);
|
63 | let pointFunc = y ? pointsToSegment : flatPointsToSegment;
|
64 | segment = [pointFunc(segment, vars.curviness)];
|
65 | }
|
66 | segment = slicer(_align(segment, target, vars));
|
67 | _addDimensionalPropTween(plugin, target, x, segment, "x", unitX);
|
68 | y && _addDimensionalPropTween(plugin, target, y, segment, "y", unitY);
|
69 | return cacheRawPathMeasurements(segment, vars.resolution || (vars.curviness === 0 ? 20 : 12));
|
70 | },
|
71 | _emptyFunc = v => v,
|
72 | _numExp = /[-+\.]*\d+\.?(?:e-|e\+)?\d*/g,
|
73 | _originToPoint = (element, origin, parentMatrix) => {
|
74 | let m = getGlobalMatrix(element),
|
75 | x = 0,
|
76 | y = 0,
|
77 | svg;
|
78 | if ((element.tagName + "").toLowerCase() === "svg") {
|
79 | svg = element.viewBox.baseVal;
|
80 | svg.width || (svg = {width: +element.getAttribute("width"), height: +element.getAttribute("height")});
|
81 | } else {
|
82 | svg = origin && element.getBBox && element.getBBox();
|
83 | }
|
84 | if (origin && origin !== "auto") {
|
85 | x = origin.push ? origin[0] * (svg ? svg.width : element.offsetWidth || 0) : origin.x;
|
86 | y = origin.push ? origin[1] * (svg ? svg.height : element.offsetHeight || 0) : origin.y;
|
87 | }
|
88 | return parentMatrix.apply( x || y ? m.apply({x: x, y: y}) : {x: m.e, y: m.f} );
|
89 | },
|
90 | _getAlignMatrix = (fromElement, toElement, fromOrigin, toOrigin) => {
|
91 | let parentMatrix = getGlobalMatrix(fromElement.parentNode, true, true),
|
92 | m = parentMatrix.clone().multiply(getGlobalMatrix(toElement)),
|
93 | fromPoint = _originToPoint(fromElement, fromOrigin, parentMatrix),
|
94 | {x, y} = _originToPoint(toElement, toOrigin, parentMatrix),
|
95 | p;
|
96 | m.e = m.f = 0;
|
97 | if (toOrigin === "auto" && toElement.getTotalLength && toElement.tagName.toLowerCase() === "path") {
|
98 | p = toElement.getAttribute("d").match(_numExp) || [];
|
99 | p = m.apply({x:+p[0], y:+p[1]});
|
100 | x += p.x;
|
101 | y += p.y;
|
102 | }
|
103 | if (p || (toElement.getBBox && fromElement.getBBox && toElement.ownerSVGElement === fromElement.ownerSVGElement)) {
|
104 | p = m.apply(toElement.getBBox());
|
105 | x -= p.x;
|
106 | y -= p.y;
|
107 | }
|
108 | m.e = x - fromPoint.x;
|
109 | m.f = y - fromPoint.y;
|
110 | return m;
|
111 | },
|
112 | _align = (rawPath, target, {align, matrix, offsetX, offsetY, alignOrigin}) => {
|
113 | let x = rawPath[0][0],
|
114 | y = rawPath[0][1],
|
115 | curX = _getPropNum(target, "x"),
|
116 | curY = _getPropNum(target, "y"),
|
117 | alignTarget, m, p;
|
118 | if (!rawPath || !rawPath.length) {
|
119 | return getRawPath("M0,0L0,0");
|
120 | }
|
121 | if (align) {
|
122 | if (align === "self" || ((alignTarget = _toArray(align)[0] || target) === target)) {
|
123 | transformRawPath(rawPath, 1, 0, 0, 1, curX - x, curY - y);
|
124 | } else {
|
125 | if (alignOrigin && alignOrigin[2] !== false) {
|
126 | gsap.set(target, {transformOrigin:(alignOrigin[0] * 100) + "% " + (alignOrigin[1] * 100) + "%"});
|
127 | } else {
|
128 | alignOrigin = [_getPropNum(target, "xPercent") / -100, _getPropNum(target, "yPercent") / -100];
|
129 | }
|
130 | m = _getAlignMatrix(target, alignTarget, alignOrigin, "auto");
|
131 | p = m.apply({x: x, y: y});
|
132 | transformRawPath(rawPath, m.a, m.b, m.c, m.d, curX + m.e - (p.x - m.e), curY + m.f - (p.y - m.f));
|
133 | }
|
134 | }
|
135 | if (matrix) {
|
136 | transformRawPath(rawPath, matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
|
137 | } else if (offsetX || offsetY) {
|
138 | transformRawPath(rawPath, 1, 0, 0, 1, offsetX || 0, offsetY || 0);
|
139 | }
|
140 | return rawPath;
|
141 | },
|
142 | _addDimensionalPropTween = (plugin, target, property, rawPath, pathProperty, forceUnit) => {
|
143 | let cache = target._gsap,
|
144 | harness = cache.harness,
|
145 | alias = (harness && harness.aliases && harness.aliases[property]),
|
146 | prop = alias && alias.indexOf(",") < 0 ? alias : property,
|
147 | pt = plugin._pt = new PropTween(plugin._pt, target, prop, 0, 0, _emptyFunc, 0, cache.set(target, prop, plugin));
|
148 | pt.u = _getUnit(cache.get(target, prop, forceUnit)) || 0;
|
149 | pt.path = rawPath;
|
150 | pt.pp = pathProperty;
|
151 | plugin._props.push(prop);
|
152 | },
|
153 | _sliceModifier = (start, end) => rawPath => (start || end !== 1) ? sliceRawPath(rawPath, start, end) : rawPath;
|
154 |
|
155 |
|
156 | export const MotionPathPlugin = {
|
157 | version: "3.10.3",
|
158 | name: "motionPath",
|
159 | register(core, Plugin, propTween) {
|
160 | gsap = core;
|
161 | _getUnit = gsap.utils.getUnit;
|
162 | _toArray = gsap.utils.toArray;
|
163 | PropTween = propTween;
|
164 | },
|
165 | init(target, vars) {
|
166 | if (!gsap) {
|
167 | console.warn("Please gsap.registerPlugin(MotionPathPlugin)");
|
168 | return false;
|
169 | }
|
170 | if (!(typeof(vars) === "object" && !vars.style) || !vars.path) {
|
171 | vars = {path:vars};
|
172 | }
|
173 | let rawPaths = [],
|
174 | {path, autoRotate, unitX, unitY, x, y} = vars,
|
175 | firstObj = path[0],
|
176 | slicer = _sliceModifier(vars.start, ("end" in vars) ? vars.end : 1),
|
177 | rawPath, p;
|
178 | this.rawPaths = rawPaths;
|
179 | this.target = target;
|
180 | if ((this.rotate = (autoRotate || autoRotate === 0))) {
|
181 | this.rOffset = parseFloat(autoRotate) || 0;
|
182 | this.radians = !!vars.useRadians;
|
183 | this.rProp = vars.rotation || "rotation";
|
184 | this.rSet = target._gsap.set(target, this.rProp, this);
|
185 | this.ru = _getUnit(target._gsap.get(target, this.rProp)) || 0;
|
186 | }
|
187 | if (Array.isArray(path) && !("closed" in path) && typeof(firstObj) !== "number") {
|
188 | for (p in firstObj) {
|
189 | if (!x && ~_xProps.indexOf(p)) {
|
190 | x = p;
|
191 | } else if (!y && ~_yProps.indexOf(p)) {
|
192 | y = p;
|
193 | }
|
194 | }
|
195 | if (x && y) {
|
196 | rawPaths.push(_segmentToRawPath(this, _populateSegmentFromArray(_populateSegmentFromArray([], path, x, 0), path, y, 1), target, x, y, slicer, vars, unitX || _getUnit(path[0][x]), unitY || _getUnit(path[0][y])));
|
197 | } else {
|
198 | x = y = 0;
|
199 | }
|
200 | for (p in firstObj) {
|
201 | p !== x && p !== y && rawPaths.push(_segmentToRawPath(this, _populateSegmentFromArray([], path, p, 2), target, p, 0, slicer, vars, _getUnit(path[0][p])));
|
202 | }
|
203 | } else {
|
204 | rawPath = slicer(_align(getRawPath(vars.path), target, vars));
|
205 | cacheRawPathMeasurements(rawPath, vars.resolution);
|
206 | rawPaths.push(rawPath);
|
207 | _addDimensionalPropTween(this, target, vars.x || "x", rawPath, "x", vars.unitX || "px");
|
208 | _addDimensionalPropTween(this, target, vars.y || "y", rawPath, "y", vars.unitY || "px");
|
209 | }
|
210 | },
|
211 | render(ratio, data) {
|
212 | let rawPaths = data.rawPaths,
|
213 | i = rawPaths.length,
|
214 | pt = data._pt;
|
215 | if (ratio > 1) {
|
216 | ratio = 1;
|
217 | } else if (ratio < 0) {
|
218 | ratio = 0;
|
219 | }
|
220 | while (i--) {
|
221 | getPositionOnPath(rawPaths[i], ratio, !i && data.rotate, rawPaths[i]);
|
222 | }
|
223 | while (pt) {
|
224 | pt.set(pt.t, pt.p, pt.path[pt.pp] + pt.u, pt.d, ratio);
|
225 | pt = pt._next;
|
226 | }
|
227 | data.rotate && data.rSet(data.target, data.rProp, rawPaths[0].angle * (data.radians ? _DEG2RAD : 1) + data.rOffset + data.ru, data, ratio);
|
228 | },
|
229 | getLength(path) {
|
230 | return cacheRawPathMeasurements(getRawPath(path)).totalLength;
|
231 | },
|
232 | sliceRawPath,
|
233 | getRawPath,
|
234 | pointsToSegment,
|
235 | stringToRawPath,
|
236 | rawPathToString,
|
237 | transformRawPath,
|
238 | getGlobalMatrix,
|
239 | getPositionOnPath,
|
240 | cacheRawPathMeasurements,
|
241 | convertToPath: (targets, swap) => _toArray(targets).map(target => convertToPath(target, swap !== false)),
|
242 | convertCoordinates(fromElement, toElement, point) {
|
243 | let m = getGlobalMatrix(toElement, true, true).multiply(getGlobalMatrix(fromElement));
|
244 | return point ? m.apply(point) : m;
|
245 | },
|
246 | getAlignMatrix: _getAlignMatrix,
|
247 | getRelativePosition(fromElement, toElement, fromOrigin, toOrigin) {
|
248 | let m =_getAlignMatrix(fromElement, toElement, fromOrigin, toOrigin);
|
249 | return {x: m.e, y: m.f};
|
250 | },
|
251 | arrayToRawPath(value, vars) {
|
252 | vars = vars || {};
|
253 | let segment = _populateSegmentFromArray(_populateSegmentFromArray([], value, vars.x || "x", 0), value, vars.y || "y", 1);
|
254 | vars.relative && _relativize(segment);
|
255 | return [(vars.type === "cubic") ? segment : pointsToSegment(segment, vars.curviness)];
|
256 | }
|
257 | };
|
258 |
|
259 | _getGSAP() && gsap.registerPlugin(MotionPathPlugin);
|
260 |
|
261 | export { MotionPathPlugin as default }; |
\ | No newline at end of file |