jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2013.8.15

円弧移動を実装する

Category:

jQueryにはanimate()があるので簡単にアニメを実装できますが、円弧移動となると話は別で、用意されたメソッドを単純に使用するだけでは実現できないようでした。そこで今回は三角関数とタイマーを利用して、要素の円弧移動を再現してみました。

まず円弧移動させる要素自体を用意します。htmlは以下です。
移動させる要素 #pointと、それを配置する受け皿の #baseのみです。

<div id="base">
<div id="point"></div>
</div>

次にcss、移動させる要素は絶対配置させます。またjavascriptで座標を指定する際に余計な計算をさせないため、ネガティブマージンを使って要素のtop値、left値を見た目上の要素の中心に来るようにあらかじめ調整しておきます。

#base {
	width: 800px;
	height: 800px;
	position: relative;
	margin: 0 auto;
}
#point {
	width: 60px;
	height: 60px;
	position: absolute;
	top: 0;
	left: 0;
	margin: -30px 0 0 -30px;
	border-radius: 30px;
	background: #333;
}

最後にjs、今回は円弧移動を左右に繰り返す、振り子運動のようなものを再現してみました。そのため、円弧移動のためのコード以外にも、イージングや行き帰りの判別用フラグなどを指定しています。

var	r = 400,
	angl = 126,
	angl_min = 126,
	angl_max = 234,
	spd_dly = 4,
	spd_dly_rng = 10,
	spd = spd_dly * spd_dly_rng,
	base = $('#base'),
	pnt = $('#point'),
	return_flg = false;

var move_pnt = function(){
	setTimeout(function(){
		pnt.css({
			left : r * Math.sin(angl / 180 * Math.PI) + r,
			top : r * Math.cos(angl / 180 * Math.PI) * -1
		});

		if( return_flg === false ){
			if( angl >= angl_max - spd_dly_rng ){
				spd = spd + spd_dly;
			}
			if( angl < angl_min + spd_dly_rng ){
				spd = spd - spd_dly;
			}
			angl = angl + 1;
			if( angl == angl_max ){
				return_flg = true;
			}
		} else {
			if( angl <= angl_min + spd_dly_rng ){
				spd = spd + spd_dly;
			}
			if( angl > angl_max - spd_dly_rng ){
				spd = spd - spd_dly;
			}
			angl = angl - 1;
			if( angl == angl_min ){
				return_flg = false;
			}
		}

		move_pnt();
	}, spd);
};

move_pnt();

動作のサンプルはこちら
振り子運動のようなもの - js do it

三角関数の計算はjavascriptがやってくれるので、円の半径と、移動させる位置の円の中心からの角度さえ設定できてしまえば、円運動はそれほど難しくないのかなという印象でした。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.