円形に要素を動かす（アニメーション）

円形に要素を動かす（アニメーション）方法をご紹介します。
ここでは時計の3時を0度の基点として計算しています。

サンプル

サンプルコード

HTML

CSS

JavaScript

以下コードの「開始位置（角度）」を変更することで、円の開始位置を変更できます。

var $circleBox    = $('.circle'),
								$point        = $circleBox.find('.point'),
								startPosition = 0, // 開始位置（角度）
								duration      = 5000, // 1週の時間
								radiusX       = ($circleBox.width() / 2) - ($point.width() / 2),
								radiusY       = ($circleBox.height() / 2) - ($point.height() / 2),
								angle         = 0,
								radian        = 0,
								xPosition     = 0,
								yPosition     = 0;

var start = function() {
								$point.animate(
									{
										count : 2
									},
									{
										duration : duration,
										easing   : 'linear',
										step     : function(now) {
											angle     = now * 180;
											radian    = ((angle + startPosition + 90) / 180) * Math.PI; // +90することで0度の基点を3時の角度に設定
											xPosition = radiusX + (radiusX * Math.sin(radian));
											yPosition = radiusY + (radiusY * Math.cos(radian)) * -1; // -1を乗算して時計回りにする

$point.css({
												left : xPosition,
												top  : yPosition
											});
										},
										complete : function() {
											start();
											this.count = 0;
										}
									}
								);
							};

start();