console
class Turntable {
constructor() {
this.mount();
}
mount() {
this.el = document.querySelector('.test');
const pointer = document.querySelector('.pointer');
this.centerPoint = {
x: this.el.offsetLeft + (this.el.offsetWidth/2),
y: this.el.offsetTop + (this.el.offsetHeight/2)
};
console.log('centerPoint', JSON.stringify(this.centerPoint));
const t = new MouseOrTouch('.test');
t.start((e)=>{
pointer.setAttribute('style','animation:none;');
this.radian(e, true);
}).move((e)=>this.radian(e)).end(() => {
pointer.setAttribute('style','');
});
}
radian(list, transition) {
const x0 = this.centerPoint.x;
const y0 = this.centerPoint.y;
const x1 = list[0].clientX;
const y1 = list[0].clientY;
console.log(x1+ '/' + y1);
const r = Math.sqrt(Math.pow((x0-x1), 2)+Math.pow(y0-y1,2));
console.log(Math.abs(y1-y0));
const radian = Math.acos(Math.abs(y1-y0)/r);
console.log('radian', radian);
let angle = Math.floor(180/(Math.PI/radian));
console.log('angle', angle);
if(x1>x0&&y1<y0){
console.log(1);
} else if (x1>x0&&y1>y0) {
angle = 180 - angle;
console.log(2);
} else if (x1<x0&&y1>y0) {
angle = 180 + angle;
console.log(3);
} else if (x1<x0&&y1<y0) {
angle = 360 - angle;
console.log(4);
}
console.log('angle2', angle);
this.angle = angle;
this.pointer(transition);
}
pointer() {
const pointer = document.querySelector('.pointer');
pointer.style.transform = 'translate(-50%, -50%) rotate('+this.angle+'deg)';
}
}
new Turntable();
<div class="test">
<div class="pointer"></div>
</div>
.test {
background:#ccc;
width:300px;
height:300px;
border-radius:150px;
position:relative;
}
.pointer {
width: 50px;
height: 50px;
background:#4cb4e7;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%) rotate(0deg);
animation: pointer 5s infinite;
}
@keyframes pointer {
0% {
transform:translate(-50%, -50%) rotate(0deg);
}
50% {
transform:translate(-50%, -50%) rotate(180deg);
}
100% {
transform:translate(-50%, -50%) rotate(360deg);
}
}