Using RaphaelJS, I adapted a couple scripts to create two animations I want to combine:
First, drawing dashed lines to coordinates http://jsfiddle.net/jbirthler/CvhKx/2/
var canvas = Raphael('canvas_container', 322, 273);
var set = canvas.set(canvas.circle(110, 265, 7), canvas.circle(110, 7, 7), canvas.circle(7, 151, 7)).attr({
stroke: "none",
fill: "#666" });
var pathstr = "M 109 255 l 0 -245 l -103 141 l 265 0";
var path = dashline(canvas, pathstr, 4000, {
stroke: '#828282',
'stroke-dasharray': "--",
'stroke-linecap': "butt",
'stroke-width': 1,
'fill-opacity': 0 }, 1000);
function dashline(canvas, pathstr, duration, attr) {
var guide_path = canvas.path(pathstr).attr({
stroke: "none",
fill: "none"
});
var path = canvas.path(guide_path.getSubpath(0, 1)).attr(attr);
var total_length = guide_path.getTotalLength(guide_path);
var start_time = new Date().getTime();
var interval_length = 20;
var interval_id = setInterval(function() {
var elapsed_time = new Date().getTime() - start_time;
var this_length = elapsed_time / duration * total_length;
var subpathstr = guide_path.getSubpath(0, this_length);
attr.path = subpathstr;
path.animate(attr, interval_length);
}, interval_length);
return path;
};
And, easing on the path and animating circles when reaching coordinates http://jsfiddle.net/jbirthler/KqjHh/1/
var canvas = Raphael("holder", 322, 273);
var set = canvas.set(canvas.circle(110, 265, 7),canvas.circle(110, 7, 7), canvas.circle(7, 151, 7)).attr({stroke:"none", fill: "#666"});
var c = canvas.circle(110, 265, 10).attr({stroke: "#ddd", "stroke-width": 4});
var fade = function (id) {
return function () {
set[id].attr({fill: "#fff", r: 12}).animate({fill: "#77bf00", r: 8}, 500);
};
};
var run = animateCirc();
function animateCirc() {
var easex = ">",
easey = ">";
c.stop().animate({
"0%": {cy: 265, easing: easey, callback: fade(0)},
"40%": {cy: 7, easing: easey, callback: fade(1)},
"60%": {cy: 151, easing: easey, callback: fade(2)},
"100%": {cy: 151, easing: easey, callback: fade(3)}
}, 3000).animate({
"0%": {cx: 110, easing: easex},
"40%": {cx: 110, easing: easex},
"60%": {cx: 7, easing: easex},
"100%": {cx: 300, easing: easex}
}, 3000);
return run;
};
I would like to have the circles animate as the dashed path arrives at their coordinates. If I could get the dashed path to use easing, that'd be a plus but mostly, I'm just looking to combine the two into one.
I'm able to read javascript better than I'm able to write my own scripts but if anyone has any insight on how to break down the dashed line script and the steps the code is taking, that would be hugely beneficial for me.
My first post on stack overflow (yeesh, about time) hope I was specific enough!
I've never used Raphael myself, but here's what I found as your solution:
Your first animation runs within 4 (4000 milliseconds) seconds, which you can see in this block:
var path = dashline(canvas, pathstr, 4000, {
stroke: '#828282',
'stroke-dasharray': "--",
'stroke-linecap': "butt",
'stroke-width': 1,
'fill-opacity': 0
}, 1000);
Your next step is to identify your block rendering the circles, here you give it 3 seconds to run in, which can be resolved by changing the last parameter to 4000. Next, you'll notice the percentages. These should involve a conversion calculation to translate the milliseconds (4000) into percentages for each animation point.
I eyeballed the animation points, but the ending code looks something like this:
function animateCirc() {
var easex = ">",
easey = ">";
c.stop().animate({
"0%": {cy: 265, easing: easey, callback: fade(0)},
"35%": {cy: 7, easing: easey, callback: fade(1)},
"60%": {cy: 151, easing: easey, callback: fade(2)},
"100%": {cy: 151, easing: easey, callback: fade(3)}
}, 4000).animate({
"0%": {cx: 110, easing: easex},
"35%": {cx: 110, easing: easex},
"60%": {cx: 7, easing: easex},
"100%": {cx: 300, easing: easex}
}, 4000);
return run;
};
You can see the updated (but not 100% synchronized) version here.
var canvas = Raphael('canvas_container', 322, 273);
var set = canvas.set(canvas.circle(110, 265, 7), canvas.circle(110, 7, 7), canvas.circle(7, 151, 7)).attr({
stroke: "none",
fill: "#666"
});
var c = canvas.circle(110, 265, 10).attr({stroke: "#999", "stroke-width": 0});
var fade = function (id) {
return function () {
set[id].attr({fill: "#fff", r: 12}).animate({fill: "#77bf00", r: 8}, 500);
};
};
var pathstr = "M 109 255 l 0 -245 l -103 141 l 265 0";
var path = dashline(canvas, pathstr, 4000, {
stroke: '#828282',
'stroke-dasharray': "--",
'stroke-linecap': "butt",
'stroke-width': 1,
'fill-opacity': 0
}, 1000);
function dashline(canvas, pathstr, duration, attr) {
var guide_path = canvas.path(pathstr).attr({
stroke: "none",
fill: "none"
});
var path = canvas.path(guide_path.getSubpath(0, 1)).attr(attr);
var total_length = guide_path.getTotalLength(guide_path);
var start_time = new Date().getTime();
var interval_length = 20;
var interval_id = setInterval(function() {
var elapsed_time = new Date().getTime() - start_time;
var this_length = elapsed_time / duration * total_length;
var subpathstr = guide_path.getSubpath(0, this_length);
attr.path = subpathstr;
path.animate(attr, interval_length);
}, interval_length);
return path;
}
var run = animateCirc();
function animateCirc() {
var easex = ">",
easey = ">";
c.stop().animate({
"0%": {cy: 265, easing: easey, callback: fade(0)},
"35%": {cy: 7, easing: easey, callback: fade(1)},
"60%": {cy: 151, easing: easey, callback: fade(2)},
"100%": {cy: 151, easing: easey, callback: fade(3)}
}, 4000).animate({
"0%": {cx: 110, easing: easex},
"35%": {cx: 110, easing: easex},
"60%": {cx: 7, easing: easex},
"100%": {cx: 300, easing: easex}
}, 4000);
return run;
};
Note that you could really use Raphael, Easel, Kinetic, or any type of Canvas/SVG rendering tool.
Hope this helps!