Question

我想降低这个动画圆形路径的速度请参阅下面的网址以查看代码。谢谢

http://jsfiddle.net/AbdiasSoftware/F8x4p/

var pos = $('#center').position(),
    radiusSat = $('#sat1').width() * 0.5,
    radius = $('#center').width() * 0.5,
    cx = pos.left + radius,
    cy = pos.top + radius,
    x, y, angle = 0, angles = [],
    spc = 360 / 5,
    deg2rad = Math.PI / 180,
    i = 0;

for(;i < 5; i++) {
    angles.push(angle);
    angle += spc;
}

/// space out radius
radius += (radiusSat + 10);

loop();

function loop() {

    for(var i = 0; i < angles.length; i++) {

        angle = angles[i];

        x = cx + radius * Math.cos(angle * deg2rad);
        y = cy + radius * Math.sin(angle * deg2rad);

        $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat});

        angles[i] = angles[i] + 1;
        if (angles[i] > 360) angles[i] = 0;
    }

    requestAnimationFrame(loop);
}

Answer 1

确定每帧绘制的#satN元素移动量的数字是angles[i]值。因此，您只需要减少添加的1值。

将你可以使用的速度减半：

angles[i] += 0.5;

＆＃13;

var pos = $('#center').position(),
  radiusSat = $('#sat1').width() * 0.5,
  radius = $('#center').width() * 0.5,
  cx = pos.left + radius,
  cy = pos.top + radius,
  x, y, angle = 0,
  angles = [],
  spc = 360 / 5,
  deg2rad = Math.PI / 180,
  i = 0;

for (; i < 5; i++) {
  angles.push(angle);
  angle += spc;
}

/// space out radius
radius += (radiusSat + 10);

loop();

function loop() {
  for (var i = 0; i < angles.length; i++) {
    angle = angles[i];
    x = cx + radius * Math.cos(angle * deg2rad);
    y = cy + radius * Math.sin(angle * deg2rad);

    $('#sat' + i).css({
      left: x - radiusSat,
      top: y - radiusSat
    });

    angles[i] += 0.5; // change this value
    if (angles[i] > 360) angles[i] = 0;
  }

  requestAnimationFrame(loop);
}

＆＃13;

div {
  border-radius: 50%;
  border: 2px solid #000;
  position: fixed;
}

#center {
  width: 200px;
  height: 200px;
  left: 100px;
  top: 100px;
}

#sat0,
#sat1,
#sat2,
#sat3,
#sat4 {
  width: 50px;
  height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="center"></div>
<div id="sat0"></div>
<div id="sat1"></div>
<div id="sat2"></div>
<div id="sat3"></div>
<div id="sat4"></div>

＆＃13;

如何降低Animate圈js的速度

1 个答案: