具有贝塞尔曲线动画的自定义点对点路径

时间:2014-07-08 04:33:45

标签: javascript jquery

我想创建一个移动的汽车对象,它从A点到B点,B点到C点,点C到点D进行动画制作。我正在使用" jQuery.Path.js"具有贝塞尔曲线函数,但它只有2点设置(开始和结束)。我怎样才能在两者之间再添加2个点?请帮忙!

这里是原始的js页面: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>

0 个答案:

没有答案