Skip to content

殷洪（管理员） / raphael

Go to a project
Commit f4ff8147 by Dmitry Baranovskiy
Options

Add animateAlongBack method

parent c4bf67d1
Showing with 109 additions and 11 deletions
raphael.js
......@@ -2617,7 +2617,7 @@ window.Raphael = (function () {
if (this.type != "path") {
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;
for (var i = 0, ii = path.length; i < ii; i++) {
p = path[i];
......@@ -2628,7 +2628,7 @@ window.Raphael = (function () {
l = segmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
if (len + l > length) {
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];
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]();
......@@ -2638,7 +2638,8 @@ window.Raphael = (function () {
continue;
}
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;
......@@ -2648,7 +2649,9 @@ window.Raphael = (function () {
sp += p;
}
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) {
......@@ -2663,7 +2666,7 @@ window.Raphael = (function () {
});
Element[proto].getTotalLength = getLengthFactory(1);
Element[proto].getPointAtLength = getLengthFactory();
Element[proto].getSubpathToLength = getLengthFactory(0, 1);
Element[proto].getSubpathsAtLength = getLengthFactory(0, 1);
// animation easing formulas
R.easing_formulas = {
......@@ -2753,6 +2756,7 @@ window.Raphael = (function () {
switch (availableAnimAttrs[attr]) {
case "along":
now = pos * ms * diff[attr];
to.back && (now = to.len - now);
var point = to[attr].getPointAtLength(now);
that.translate(diff.sx - diff.x || 0, diff.sy - diff.y || 0);
diff.x = point.x;
......@@ -2813,7 +2817,7 @@ window.Raphael = (function () {
that._run && that._run.call(that);
} else {
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);
to.rot && that.rotate(diff.r + point.alpha, point.x, point.y);
}
......@@ -2862,8 +2866,11 @@ window.Raphael = (function () {
animationElements[element.id] && (params.start = animationElements[element.id].start);
return this.animate(params, ms, easing, callback);
};
Element[proto].animateAlong = function (path, ms, rotate, callback) {
var params = {};
Element[proto].animateAlong = along();
Element[proto].animateAlongBack = along(1);
function along(isBack) {
return function (path, ms, rotate, callback) {
var params = {back: isBack};
R.is(rotate, "function") ? (callback = rotate) : (params.rot = rotate);
if (R.is(path, "string") && path.constructor != Element) {
path = r.path(path).attr({stroke: "none"});
......@@ -2875,6 +2882,7 @@ window.Raphael = (function () {
path.constructor == Element && (params.along = path);
return this.animate(params, ms, callback);
};
}
Element[proto].onAnimation = function (f) {
this._run = f || 0;
return this;
......@@ -2893,15 +2901,18 @@ window.Raphael = (function () {
to[attr] = params[attr];
switch (availableAnimAttrs[attr]) {
case "along":
var point = params[attr].getPointAtLength(0),
var len = params[attr].getTotalLength(),
point = params[attr].getPointAtLength(len * !!params.back),
bb = this.getBBox();
diff[attr] = params[attr].getTotalLength() / ms;
diff[attr] = len / ms;
diff.tx = bb.x;
diff.ty = bb.y;
diff.sx = point.x;
diff.sy = point.y;
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;
case "number":
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
<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, "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">
getBBox
</h3>
......@@ -364,6 +407,35 @@ var c = r.clone();</code></pre>
hsb.h = 1;
this.attr({fill: this.paper.raphael.hsb2rgb(hsb).hex});
}</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">
setSize
</h3>
......@@ -686,6 +758,12 @@ paper.circle(100, 100, 20).red();
<a href="#animate"><code>animate</code></a>
</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>
</li>
<li>
......@@ -707,6 +785,15 @@ paper.circle(100, 100, 20).red();
<a href="#raphael"><code>raphael</code></a>
</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>
</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