const random = (min, max) => Math.random() * (max - min) + min;
/**
* 新しい範囲における現在の値を、現在の範囲を元に変換して返す
* @param value {Number}
* @param fromMin {Number} 変換前の最小
* @param fromMax {Number} 変換前の最大
* @param toMin {Number} 変換後の最小
* @param toMax {Number} 変換後の最大
*/
const map = (value, fromMin, fromMax, toMin, toMax) => {
let result = 0;
result = (value <= fromMin)
? toMin : (value >= fromMax)
? toMax : (() => {
let ratio = (toMax - toMin) / (fromMax - fromMin);
return (value - fromMin) * ratio + toMin;
})();
return result;
};
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 / 4;
return this;
}
/**
* ラジアンに変換する
* @param angle
* @returns {number}
*/
getRadian(angle) {
return angle * Math.PI / 180;
}
/**
* アニメーションを始める
*/
play() {
/**
* 円周上に配置するための値
* @type {number}
* @private
*/
let _angle = 0;
this.target.each((i, el) => {
_angle = this.angle + (360 / this.target.length) * i;
let x = this.center.x + Math.sin(this.getRadian(_angle)) * this.radius;
let y = this.center.y + Math.cos(this.getRadian(_angle)) * this.radius;
TweenMax.set(el, {
x: x,
y: y,
z: Math.sin(this.getRadian(this.angle)) * this.radius * 2,
scale: map(Math.sin(this.getRadian(this.angle + i * this.radius)), -1, 1, 1, 1.5),
rotationY: map(Math.cos(this.getRadian(this.angle + i * this.radius)), -1, 1, 1, 360),
rotationZ: map(Math.sin(this.getRadian(this.angle + i * this.radius)), -1, 1, 1, 360),
backgroundColor: `hsla(${this.angle + (360 / this.target.length) * i}, 80%, 70%, 1)`
});
});
// アニメーションで使用する角度を進める量
// つまり速度ー
this.angle += this.speed;
requestAnimationFrame(() => this.play() );
}
}
let anim = new smoothMove($('.target'));
anim.play();