js 控制div在弧線上運(yùn)動(dòng)

圖片描述

點(diǎn)擊左右按鈕實(shí)現(xiàn)小圓點(diǎn) 在弧線上的運(yùn)動(dòng)
求大神指點(diǎn)
arr=[130,1302,1303,1304,1305,1306,1307] // X位置
//Y位置
var arr2=[-12,-32,-44,-56,-44,-32,-10]

回答

編輯回答

維他命

通過(guò) X, Y 數(shù)據(jù)擬合一個(gè)軌跡方程。（或者簡(jiǎn)單點(diǎn)，你直接找一個(gè)“圓”就可以了）。
把軌跡方程轉(zhuǎn)成“參數(shù)方程”，如果用圓，在這一步也簡(jiǎn)單了，現(xiàn)成的。
參數(shù)方程的“參數(shù)”，即“時(shí)間”。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>Animation</title>
<script src="https://s.zys.me/js/jq/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
  #circle { width: 400px; height: 400px; border: 1px solid #ccc; border-radius: 50%; position: absolute; left: 0; top: 0; }
  #point { width: 20px; height: 20px; background-color: red; border-radius: 50%; position: absolute; left: 0; top: 0; }
</style>
</head>
<body>
  <div id="wrapper">
    <div id="circle"></div>
   <div id="point"></div>
  </div>
  <script type="text/javascript">
    $(function(){
      // 運(yùn)動(dòng)的參數(shù)方式
      // 輸入 t ，輸出 x, y
      // 圓的參數(shù)方程是初中內(nèi)容了
      var R = 200;
      var C = [200, 200];
      function position(t){
        var x = C[0] + R * Math.cos(t);
        var y = C[1] + R * Math.sin(t);
        return [x, y];
      }

      var t = 0;
      var step = 0.03;
      var $n = $('#point');
      function animate(){
        t += step;
        var p = position(t);
        $n.css({left: p[0], top: p[1]});
        setTimeout(animate, 30);
      }
      animate();
    });
  </script>
</body>
</html>

2017年9月12日 11:45

編輯回答

孤酒

你是想動(dòng)態(tài)模擬圓點(diǎn)沿弧線移動(dòng)到下一個(gè)位置的效果吧？
如果你有完整的弧線方程（這個(gè)也可以根據(jù)你現(xiàn)在的數(shù)據(jù)擬合出來(lái)的——工程數(shù)學(xué)上有專門(mén)的方法求解，而且你這個(gè)是標(biāo)準(zhǔn)的二次函數(shù)方程，求出來(lái)的結(jié)果比較精確的。其實(shí)就是求一個(gè)圓心。）你可以嚴(yán)格按照方程計(jì)算。

其實(shí)你可以轉(zhuǎn)換一下思維，如果速度快，人眼是看不見(jiàn)那么快的變化的，你可以簡(jiǎn)化定制幾個(gè)點(diǎn)位作為中間位置，很快過(guò)，到下一個(gè)點(diǎn)位就好了。

2017年7月16日 23:25

編輯回答