Skip to content

殷洪（管理员） / raphael

Go to a project
Commit f4ff8147 by Dmitry Baranovskiy
Options

Add animateAlongBack method

parent c4bf67d1
Showing with 120 additions and 22 deletions
raphael.js
...@@ -2617,7 +2617,7 @@ window.Raphael = (function () { ...@@ -2617,7 +2617,7 @@ window.Raphael = (function () {
if (this.type != "path") { if (this.type != "path") {
return -1; return -1;
} }
var path = path2curve(this.attrs.path), x, y, p, l, sp = "", subpaths = {}, var path = path2curve(this.attrs.path), x, y, p, l, sp = "", subpaths = {}, point,
len = 0; len = 0;
for (var i = 0, ii = path.length; i < ii; i++) { for (var i = 0, ii = path.length; i < ii; i++) {
p = path[i]; p = path[i];
...@@ -2628,7 +2628,7 @@ window.Raphael = (function () { ...@@ -2628,7 +2628,7 @@ window.Raphael = (function () {
l = segmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]); l = segmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
if (len + l > length) { if (len + l > length) {
if (subpath && !subpaths.start) { if (subpath && !subpaths.start) {
var point = R.findDotsAtSegment(x, y, p[1], p[2], p[3], p[4], p[5], p[6], (length - len) / l); point = R.findDotsAtSegment(x, y, p[1], p[2], p[3], p[4], p[5], p[6], (length - len) / l);
sp += ["C", point.start.x, point.start.y, point.m.x, point.m.y, point.x, point.y]; sp += ["C", point.start.x, point.start.y, point.m.x, point.m.y, point.x, point.y];
subpaths.start = sp; subpaths.start = sp;
sp = ["M", point.x, point.y, "C", point.n.x, point.n.y, point.end.x, point.end.y, p[5], p[6]][join](); sp = ["M", point.x, point.y, "C", point.n.x, point.n.y, point.end.x, point.end.y, p[5], p[6]][join]();
...@@ -2638,7 +2638,8 @@ window.Raphael = (function () { ...@@ -2638,7 +2638,8 @@ window.Raphael = (function () {
continue; continue;
} }
if (!istotal && !subpath) { if (!istotal && !subpath) {
return R.findDotsAtSegment(x, y, p[1], p[2], p[3], p[4], p[5], p[6], (length - len) / l); point = R.findDotsAtSegment(x, y, p[1], p[2], p[3], p[4], p[5], p[6], (length - len) / l);
return {x: point.x, y: point.y, alpha: point.alpha};
} }
} }
len += l; len += l;
...@@ -2648,7 +2649,9 @@ window.Raphael = (function () { ...@@ -2648,7 +2649,9 @@ window.Raphael = (function () {
sp += p; sp += p;
} }
subpaths.end = sp; subpaths.end = sp;
return istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[1], p[2], p[3], p[4], p[5], p[6], 1); point = istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[1], p[2], p[3], p[4], p[5], p[6], 1);
point.alpha && (point = {x: point.x, y: point.y, alpha: point.alpha});
return point;
}; };
}, },
segmentLength = cacher(function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) { segmentLength = cacher(function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
...@@ -2663,7 +2666,7 @@ window.Raphael = (function () { ...@@ -2663,7 +2666,7 @@ window.Raphael = (function () {
}); });
Element[proto].getTotalLength = getLengthFactory(1); Element[proto].getTotalLength = getLengthFactory(1);
Element[proto].getPointAtLength = getLengthFactory(); Element[proto].getPointAtLength = getLengthFactory();
Element[proto].getSubpathToLength = getLengthFactory(0, 1); Element[proto].getSubpathsAtLength = getLengthFactory(0, 1);
// animation easing formulas // animation easing formulas
R.easing_formulas = { R.easing_formulas = {
...@@ -2753,6 +2756,7 @@ window.Raphael = (function () { ...@@ -2753,6 +2756,7 @@ window.Raphael = (function () {
switch (availableAnimAttrs[attr]) { switch (availableAnimAttrs[attr]) {
case "along": case "along":
now = pos * ms * diff[attr]; now = pos * ms * diff[attr];
to.back && (now = to.len - now);
var point = to[attr].getPointAtLength(now); var point = to[attr].getPointAtLength(now);
that.translate(diff.sx - diff.x || 0, diff.sy - diff.y || 0); that.translate(diff.sx - diff.x || 0, diff.sy - diff.y || 0);
diff.x = point.x; diff.x = point.x;
...@@ -2813,7 +2817,7 @@ window.Raphael = (function () { ...@@ -2813,7 +2817,7 @@ window.Raphael = (function () {
that._run && that._run.call(that); that._run && that._run.call(that);
} else { } else {
if (to.along) { if (to.along) {
var point = to.along.getPointAtLength(to.along.getTotalLength()); var point = to.along.getPointAtLength(to.len * !to.back);
that.translate(diff.sx - (diff.x || 0) + point.x - diff.sx, diff.sy - (diff.y || 0) + point.y - diff.sy); that.translate(diff.sx - (diff.x || 0) + point.x - diff.sx, diff.sy - (diff.y || 0) + point.y - diff.sy);
to.rot && that.rotate(diff.r + point.alpha, point.x, point.y); to.rot && that.rotate(diff.r + point.alpha, point.x, point.y);
} }
...@@ -2862,19 +2866,23 @@ window.Raphael = (function () { ...@@ -2862,19 +2866,23 @@ window.Raphael = (function () {
animationElements[element.id] && (params.start = animationElements[element.id].start); animationElements[element.id] && (params.start = animationElements[element.id].start);
return this.animate(params, ms, easing, callback); return this.animate(params, ms, easing, callback);
}; };
Element[proto].animateAlong = function (path, ms, rotate, callback) { Element[proto].animateAlong = along();
var params = {}; Element[proto].animateAlongBack = along(1);
R.is(rotate, "function") ? (callback = rotate) : (params.rot = rotate); function along(isBack) {
if (R.is(path, "string") && path.constructor != Element) { return function (path, ms, rotate, callback) {
path = r.path(path).attr({stroke: "none"}); var params = {back: isBack};
var f = function () { R.is(rotate, "function") ? (callback = rotate) : (params.rot = rotate);
path.remove(); if (R.is(path, "string") && path.constructor != Element) {
}; path = r.path(path).attr({stroke: "none"});
callback = R.is(callback, "function") ? function () { f(); callback.call(this); } : f; var f = function () {
} path.remove();
path.constructor == Element && (params.along = path); };
return this.animate(params, ms, callback); callback = R.is(callback, "function") ? function () { f(); callback.call(this); } : f;
}; }
path.constructor == Element && (params.along = path);
return this.animate(params, ms, callback);
};
}
Element[proto].onAnimation = function (f) { Element[proto].onAnimation = function (f) {
this._run = f || 0; this._run = f || 0;
return this; return this;
...@@ -2893,15 +2901,18 @@ window.Raphael = (function () { ...@@ -2893,15 +2901,18 @@ window.Raphael = (function () {
to[attr] = params[attr]; to[attr] = params[attr];
switch (availableAnimAttrs[attr]) { switch (availableAnimAttrs[attr]) {
case "along": case "along":
var point = params[attr].getPointAtLength(0), var len = params[attr].getTotalLength(),
point = params[attr].getPointAtLength(len * !!params.back),
bb = this.getBBox(); bb = this.getBBox();
diff[attr] = params[attr].getTotalLength() / ms; diff[attr] = len / ms;
diff.tx = bb.x; diff.tx = bb.x;
diff.ty = bb.y; diff.ty = bb.y;
diff.sx = point.x; diff.sx = point.x;
diff.sy = point.y; diff.sy = point.y;
to.rot = params.rot; to.rot = params.rot;
params.rot && (diff.r = toFloat(this.rotate())); to.back = params.back;
to.len = len;
params.rot && (diff.r = toFloat(this.rotate()) || 0);
break; break;
case "number": case "number":
diff[attr] = (to[attr] - from[attr]) / ms; diff[attr] = (to[attr] - from[attr]) / ms;
......
reference.html
...@@ -292,6 +292,49 @@ c.attr({fill: "90-#fff-#000", "stroke-dasharray": "-..", "clip-rect": "10, 10, 1 ...@@ -292,6 +292,49 @@ c.attr({fill: "90-#fff-#000", "stroke-dasharray": "-..", "clip-rect": "10, 10, 1
<pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code> <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
<code>c.animate({cx: 20, r: 20}, 2000);</code> <code>c.animate({cx: 20, r: 20}, 2000);</code>
<code>c.animate({cx: 20, r: 20}, 2000, "bounce");</code></pre> <code>c.animate({cx: 20, r: 20}, 2000, "bounce");</code></pre>
<h3 id="animateWith">
animateWith
</h3>
<p>
The same as <a href="#animate"><code>animate</code></a> method, but synchronise animation with another element.
</p>
<h4>Parameters</h4>
<p>The same as for <a href="#animate"><code>animate</code></a> method, but first argument is an element.</p>
<h4>Usage</h4>
<pre class="javascript code"><code>var c = paper.circle(10, 10, 10),
r = paper.rect(10, 10, 10, 10);
c.animate({cx: 20, r: 20}, 2000);
r.animateWith(c, {x: 20}, 2000);</code></pre>
<h3 id="animateAlong">
animateAlong
</h3>
<p>
Animates element along the given path. As an option it could rotate element along the path.
</p>
<h4>Parameters</h4>
<ol>
<li>path <em>object</em> or <em>string</em> path element or path string along which the element will be animated</li>
<li>ms <em>number</em> The duration of the animation, given in milliseconds.</li>
<li>rotate <em>boolean</em> [optional] if true, element will be rotated along the path</li>
<li>callback <em>function</em> [optional]</li>
</ol>
<h4>Usage</h4>
<pre class="javascript code"><code>var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z").attr({stroke: "#ddd"}),
e = r.ellipse(104, 100, 4, 4).attr({stroke: "none", fill: "#f00"}),
b = r.rect(0, 0, 620, 400).attr({stroke: "none", fill: "#000", opacity: 0}).click(function () {
e.attr({rx: 5, ry: 3}).animateAlong(p, 4000, true, function () {
e.attr({rx: 4, ry: 4});
});
});</code></pre>
<h3 id="toFront">
toFront
</h3>
<p>
Moves the element so it is the closest to the viewer’s eyes, on top of other elements.
</p>
<h4>Usage</h4>
<pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
<code>c.toFront();</code></pre>
<h3 id="getBBox"> <h3 id="getBBox">
getBBox getBBox
</h3> </h3>
...@@ -364,6 +407,35 @@ var c = r.clone();</code></pre> ...@@ -364,6 +407,35 @@ var c = r.clone();</code></pre>
hsb.h = 1; hsb.h = 1;
this.attr({fill: this.paper.raphael.hsb2rgb(hsb).hex}); this.attr({fill: this.paper.raphael.hsb2rgb(hsb).hex});
}</code></pre> }</code></pre>
<h3 id="getTotalLength">
getTotalLength
</h3>
<p>
Path specific method. Returns length of the path in pixels.
</p>
<h4>Usage</h4>
<pre class="javascript code"><code>var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z");
alert(p.getTotalLength());</code></pre>
<h3 id="getPointAtLength">
getPointAtLength
</h3>
<p>
Path specific method. Returns point description at given length.
</p>
<h4>Parameters</h4>
<ol>
<li>length <em>number</em> length in pixels from the beginining of the path to the point</li>
</ol>
<h4>Usage</h4>
<pre class="javascript code"><code>var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z");
var point = p.getPointAtLength(30);
r.circle(point.x, point.y, 3);</code></pre>
<p>Returned object format:</p>
<ul>
<li>x – x coordinate of the point</li>
<li>y – y coordinate of the point</li>
<li>alpha – angle of the path at the point</li>
</ul>
<h3 id="setSize"> <h3 id="setSize">
setSize setSize
</h3> </h3>
...@@ -686,6 +758,12 @@ paper.circle(100, 100, 20).red(); ...@@ -686,6 +758,12 @@ paper.circle(100, 100, 20).red();
<a href="#animate"><code>animate</code></a> <a href="#animate"><code>animate</code></a>
</li> </li>
<li> <li>
<a href="#animateWith"><code>animateWith</code></a>
</li>
<li>
<a href="#animateAlong"><code>animateAlong</code></a>
</li>
<li>
<a href="#getBBox"><code>getBBox</code></a> <a href="#getBBox"><code>getBBox</code></a>
</li> </li>
<li> <li>
...@@ -707,6 +785,15 @@ paper.circle(100, 100, 20).red(); ...@@ -707,6 +785,15 @@ paper.circle(100, 100, 20).red();
<a href="#raphael"><code>raphael</code></a> <a href="#raphael"><code>raphael</code></a>
</li> </li>
<li> <li>
<a href="#getTotalLength"><code>getTotalLength</code></a>
</li>
<li>
<a href="#getPointAtLength"><code>getPointAtLength</code></a>
</li>
<li>
<a href="#getSubpathsAtLength"><code>getSubpathsAtLength</code></a>
</li>
<li>
<a href="#setSize"><code>setSize</code></a> <a href="#setSize"><code>setSize</code></a>
</li> </li>
<li> <li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment