问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js 控制div在弧线上运动

头像
麻油叶先生
    19612

    图片描述

    点击左右按钮 实现小圆点 在弧线上的 运动
    求大神指点
    arr=[130,1302,1303,1304,1305,1306,1307] // X位置
    //Y位置
    var arr2=[-12,-32,-44,-56,-44,-32,-10]

    javascripthtml5css
    阅读 6.3k
    4 个回答
    得票最新
    头像
    hfhan
      29k72241

      先得到这个弧线的方程式，比如是个圆，计算不同角度下(弧上一点到圆心画的直线 与 竖直方向的夹角)弧线上的坐标点，这就是下一步需要移动到的位置

      利用定时器不断移动div的位置，比如移动20次，每次移动0.5度

      头像
      xdsnet
        7.6k3527

        你是想动态模拟圆点沿弧线移动到下一个位置的效果吧？
        如果你有完整的弧线方程（这个也可以根据你现在的数据拟合出来的——工程数学上有专门的方法求解，而且你这个是标准的二次函数方程，求出来的结果比较精确的。其实就是求一个圆心。）你可以严格按照方程计算。

        其实你可以转换一下思维，如果速度快，人眼是看不见那么快的变化的，你可以简化定制几个点位作为中间位置，很快过，到下一个点位就好了。

        头像
        yszou
          4.9k2718
          1. 通过 X, Y 数据拟合一个轨迹方程。（或者简单点，你直接找一个“圆”就可以了）。
          2. 把轨迹方程转成“参数方程”，如果用圆，在这一步也简单了，现成的。
          3. 参数方程的“参数”，即“时间”。
          <!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(){
      // 运动的参数方式
      // 输入 t ，输出 x, y
      // 圆的参数方程是初中内容了
      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>
          头像
          阿潇
            12315
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题