javascript用の円運動クラス
2007年8月4日
Amazonトップページの一番下の方に、たまに出てくるんですが
商品をぐるぐる回して紹介するFlashアプリがあります。
商品をぐるぐる回して紹介するFlashアプリがあります。
たまたま休日出勤してたt-matsudaさんに、「貴様にこれが作れるのか?あああん?」って言われたので(言われてないです)、作るついでに円運動と三角関数の調査をするついでにjavascriptで円運動クラスを作りました。
で、アプリは出来ずに円運動クラスだけ出来ました。
/** * 円運動クラス * * @author kjirou <kjirou.webあっとまーくgmail.com> */ var Circulator = function(){ // 円の中心座標 this._circleTop = 150; this._circleLeft = 300; // 円の半径 this._radiusY = 20; this._radiusX = 200; // 開始角度 this._startAngle = 0; // イベント毎の角度の幅 this._stepAngle = 0.5; // イベント毎の間隔 this._timerPeriod = 10; // タイマーID保持用 this._timerId; }; /** * 角度をラジアン値に変換する * * @param number angle 角度 * @return number ラジアン値 */ Circulator.prototype.toRadian = function(angle){ return angle * 0.017453290; }; /** * 円運動を開始する * * @param function hander タイマーイベントハンドラ用関数 * @return void */ Circulator.prototype.start = function(hander){ var self = this; var angle = this._startAngle; this._timerId = setInterval(function(){ var coords = []; coords[0] = self._circleTop + Math.sin(self.toRadian(angle)) * self._radiusY; coords[1] = self._circleLeft + Math.cos(self.toRadian(angle)) * self._radiusX; hander.call(self, coords, angle); angle += self._stepAngle; if (angle >= 360) angle -= 360; }, this._timerPeriod); }; /** * 円運動を終了する * * @return void */ Circulator.prototype.stop = function(){ clearInterval(this._timerId); };
サンプルはココです。WinXP-IE6とWinXP-FireFox2で動作確認をしています。(若干、IEの方が動きが良い)
一応ですけど、ライセンスはパブリックドメインです。
全くサンプルのレベルなので、実際に使う場合は適当に書き直して使ってくださいまし。
三角関数の参考リンク
ご意見・ご要望・強い口調の批判があれば、コメントください!