Raphael Animation Along a Path

In earlier versions of Raphael you could use the animateAlong() function to move something along a path. This method no longer exists in Raphael 2.0, instead a different technique is used. Here is the demo from raphaeljs.com: http://raphaeljs.com/gear.html. After tweaking this a little, I was able to create two custom attributes for use with Raphael’s animate() and attr() functions… “along” and “guide” where along is a percentage value (between 0 – 1) of how far along a given path you would like to move and guide is a reference to the path you want to move along. Here is an example:

Here are the custom attributes, “guide” and “along” wrapped in a function called addGuides().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
;(function() {
  Raphael.fn.addGuides = function() {
    this.ca.guide = function(g) {
      return {
        guide: g
      };
    };
    this.ca.along = function(percent) {
      var g = this.attr("guide");
      var len = g.getTotalLength();
      var point = g.getPointAtLength(percent * len);
      var t = {
        transform: "t" + point.x + " " + point.y
      };
      return t;
    };
  };
})();

This is the code for the demo:

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="raphael-min.js"></script>
    <script src="raphael-guides.js"></script>
    <script>
      $(function(){
 
        var p = new Raphael(0,0,"100%","100%");
 
        // give raphael guide and along custom attributes
        p.addGuides();
 
        var white = {stroke : "white"};
        var path;
 
        var path1 = p.path("M 100 100 Q 200 500 300 100").attr(white);
 
        var path2 = p.path("M 300 100 \
                           R 350 150 \
                           400 50 \
                           450 100 \
                           500 40 \
                           550 100").attr(white);
 
        var circ1 = p.circle(0, 0, 10).attr(white);
 
        var circ2 = p.circle(0, 0, 10).attr(white);
 
        $(document).on("click", function(){
          // animate along a path
          circ1.attr({guide : path1, along : 0})
            .animate({along : 1}, 3000, "ease-out");
 
          circ2.attr({guide : path2, along : 1})
            .animate({along : 0}, 3000, "ease-out");
        });
 
      });
    </script>
    <style>
      body,html{
        background-color : #333;
        color : white; 
        font-family : sans-serif;
      }
    </style>
  </head>
  <body>
    click me to see animation
  </body>
</html>


 
 
 

7 Responses to “Raphael Animation Along a Path”

  1. BrianMB
    15. March 2012 um 10:26

    Check this out on Github: an animateAlong method that uses Raphaël’s built-in extension methods.

    https://github.com/brianblakely/raphael-animate-along

  2. Jimmy Tidey
    22. March 2012 um 10:25

    This only works if the item you are moving along a path starts at the origin.

    Otherwise it it applies the offset from the origin to the whole movement, much to my confusion.

    Jimmy

  3. Zevan
    22. March 2012 um 10:51

    I think I understand what you mean. Can you make a jsfiddle of the issue? http://www.jsfiddle.com

  4. Chandrakanth
    18. July 2012 um 05:30

    Hi All,

    I am trying to create balloons and animate to random positions of x-axis, i have posted my code in ‘stackoverflow’ site but i haven’t get any suggestions, so cloud you please help on this

    This is the link:

    http://stackoverflow.com/questions/11356570/create-balloons-based-on-my-click-and-animate-to-top-of-the-screen-random-posi

  5. Chandrakanth
    18. July 2012 um 22:48

    Using Raphael.js how to create and animate multicolor curved lines based on my mouse move? could you please help me to achieve this functionality.

  6. Abhishek Kanitkar
    25. July 2012 um 23:22

    I was playing with this demo & saw comment by Jimmy. If we subtract the offset from x & y coordinates on this line

    var t = {
    transform: “t” + point.x + ” ” + point.y
    };

    in raphael-guide.js, then the circle follows the path perfectly.

    Thanks a ton to Zevan !!!

  7. Ben
    7. November 2012 um 15:51

    Hi Zevan,

    Here’s that fiddle you asked for :^)

    http://jsfiddle.net/hKGLG/1/

    I hope this is clear. The third circle should animate along the red arc. Instead, it’s moved over, displaced from the red arc by the amount equal to the third circle’s original coordinates.

    I suppose one could perhaps work around this by setting the circle to 0,0 just before the animation?

    I’m not sure, but I think the answer somehow lies in animating using absolute (capital “T” in Raphael) and not relative (lowercase “t”) transformations. I tried the obvious substitution in your “addGuides” function but I couldn’t get it going.

    If you could possibly figure this out I would be very grateful. I’m a couple days deep into an animation that I absolutely need this for. I’ve tried a few different “solutions” to this problem and they’re all broken in some way. Raphael 2’s lack of support for animation on a curved path is such a painful limitation. And Dmitri’s demos don’t really help a noob like me too much. For example, on line 15 of the “gears” demo you linked to, there is a call to “onAnimation”, which R2 removes from the API! What’s going on there?

Leave a Reply

Spam protection by WP Captcha-Free