円周上に沿って要素を移動させる処理を実装してみます。
サンプルコード
HTML
#roundが移動する円周、#circleが実際に移動する要素になります。
<div id="area"> <div id="round"></div> <div id="circle"></div> </div>
CSS
円周上のx座標とy座標を計算して、#circleのleftとtopを変更して移動させます。
#area {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
}
#round {
width: 300px;
height: 300px;
box-sizing: border-box;
border: #000000 2px solid;
border-radius: 150px;
}
#circle {
position: absolute;
top: 140px;
left: 140px;
width: 20px;
height: 20px;
border-radius: 10px;
background: #E74C3C;
}
JavaScript
移動する要素(#circle)の軸になる座標が中心ではなく左上になるので、円の中心座標は実際の中心座標から移動する要素のサイズの半分を引いています。
// 演習場を移動する要素
var moveElement = document.getElementById('circle');
// 円の半径
var radius = 150;
// 円の中心座標
var centerX = 150 - 10;
var centerY = 150 - 10;
// 円の角度
var angle = 0;
// アニメーションの実行
setInterval(function() {
circumference();
}, 20);
// アニメーションの処理
function circumference() {
// 角度毎の円周上の座標を取得
var moveX = Math.cos(Math.PI / 180 * angle) * radius + centerX;
var moveY = Math.sin(Math.PI / 180 * angle) * radius + centerY;
// 座標位置に移動
moveElement.style.left = moveX + 'px';
moveElement.style.top = moveY + 'px';
if(angle < 360) {
// 角度を1度増やす
angle++;
} else {
// 角度を0に戻す
angle = 0;
}
}
【参考サイト】
コメントが承認されるまで時間がかかります。