jquery实现曲线运动

今天给大家带来网页实现的曲线运动

这个曲线是基于jquery实现的，具体请看：

首先你要给一个点，定义个样式，如

<style>
    .ds {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: blue;
      position: absolute;
      top: 200px;
      left: 600px;
    }
</style>

然后是对页面盒子的简单布局

  <div class="ds"></div>
  <div class="sdf" onclick="run()">
    点击我执行代码
  </div>

最后是对jQuery等的依赖包的引入和调用

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src='./jquery.path.js'></script>
<script type="text/javascript">
    function run() {
      //定义贝塞尔曲线(曲线运动)
      var bezier_params = {
        start: {
          x: 185,
          y: 185,
          angle: -50
        },
        end: {
          x: 540,
          y: 310,
          angle: 50,
          length: 0.85
        }
      }
      //animation时候开始执行
      $(".ds").stop().animate({ path: new $.path.bezier(bezier_params) }, 800, function () { })

      /*圆周运动动画，需要的话可以解开*/
      // var arc_params = {
      //   center: [285, 185],
      //   radius: 200,
      //   start: 0,
      //   end: 1,
      //   dir: -1
      // }

      // $(".ds").animate({ path: new $.path.arc(arc_params) }, 2000, function () { run() });
    }
  </script>