class smoothMove {
/**
*
* @param target {Object}
* @param speed {Number}
* @param wrapWidth {Number}
* @param wrapHeight {Number}
*/
constructor(target, speed = 2, wrapWidth = window.innerWidth, wrapHeight = window.innerHeight) {
this.target = target;
// 角度
this.angle = 0;
// スピード
this.speed = speed;
// 中心の座標
this.center = {
x: wrapWidth / 2 - this.target.width() / 2,
y: wrapHeight / 2 - this.target.height() / 2
};
// 動く範囲を円の半径で表現
// この倍の値(直径)が移動範囲になる
this.radius = window.innerHeight / 2;
return this;
}
/**
* ラジアンに変換する
* @param angle
* @returns {number}
*/
getRadian(angle) {
return angle * Math.PI / 180;
}
/**
* アニメーションを始める
*/
play() {
let radian = this.getRadian(this.angle);
// Math.sin(radian)は-1から1までを正弦波で返す
// radiusをかけることでそれを半径とする円の範囲でアニメーション
let offsetX = Math.sin(radian) * this.radius;
let offsetZ = Math.cos(radian) * this.radius;
TweenMax.set(this.target, {
x: this.center.x + offsetX,
y: this.center.y,
z: offsetZ * 1.5,
});
// アニメーションで使用する角度を進める量
// つまり、速度
this.angle += this.speed;
requestAnimationFrame(() => {
this.play();
});
}
}
let anim = new smoothMove($('.target'));
anim.play();