Clever Geek Handbook

JQuery Animation: How to move along a given arc / beizer curve?

I checked the jQuery Path plugin and tried to animate the DIV along the path. I manage to make the DIV move along the path, but I would like the DIV to follow the direction of the path (turn following the beizer path). How can i do this?

Here is my current code:

$('#car001').click(function() {
    var bezier_params = {
        start: { 
          x: 185, 
          y: 385, 
          angle: 50
        },  
        end: { 
          x:540,
          y:110, 
          angle: -10, 
          length: 0.25
        }
      }
      $("#car001").animate({path : new $.path.bezier(bezier_params)}, 1000);
});

which $('#car001')

contains only 1 image.

+3


source to share


1 answer


It looks like jquery.path should be doing this with its callatan2

.

You might be better off heading to https://github.com/heygrady/curve , which also has a blog post with working jsfiddle demos .



I am sure there are many other alternatives. If you are not tied to the HTML DOM, you can also try one of the many SVG libraries out there .

0


source






More articles:


All Articles