애니메이션 원형의 속도를 줄이는 방법 js

Question

나는이 애니메이션 원형 경로의 속도를 줄이고 싶습니다 코드를 보려면 아래 URL을 참조하십시오. 감사

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; 

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); 
 
}

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; 
 
}

<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>