0

I wanna create a moving car object that animates from point-A to point-B, point-B to point-C, and point-C to point-D. I'm using the "jQuery.Path.js" with bezier curve function but it only has 2 points to setup (start & end). How can I add 2 more points in between?? please help!

here's the original js page: JQUERY PATH BEZIER CURVE GENERATOR

    <script type="text/javascript" src="js/jquery.path.js"></script>
    <script type="text/javascript">
    function animate(){
      var path = {
                start: {
                  x: 1200,
                  y: 445,
                },
                second: {
                  x: 890,
                  y: 520,
                },
                third: {
                  x: 650,
                  y: 600,
                  angle: 20,
                  length: 0.2   
                },
                end: {
                  x: -100,
                  y: 470,
                }
              };
      $('.car').animate(
          {
            path : new $.path.bezier(path)
          },
          20000,
          animate
        );
    }
    animate();
</script>
user3811923
  • 1
  • 1
  • 2
  • Ive checked source, its young lib (version 0.1). This lib is accepting only `start` and `end` point. Last commit have 5 years ago, so im afraid you can't add more points. Find another library – Kasyx Jul 08 '14 at 05:17
  • thanks for the response~ I've found a similar article here: http://stackoverflow.com/questions/13612942/how-to-animate-an-image-along-a-path-with-bezier-curves?rq=1 and I think maybe I should use GSAP to make the animation, but it seems a little difficult to me tho. – user3811923 Jul 08 '14 at 06:29

0 Answers0