2016-06-08 2 views
2

는이 같은 스핀 휠이 있습니다자바 스크립트 스핀 휠 화살표 애니메이션

var img = document.querySelector('img'); 
img.addEventListener('click', onClick, false); 


function onClick() { 
    this.removeAttribute('style'); 
    var deg = Math.floor(Math.random() * ((1440 - 1080) + 1) + 1080); 
    var css = '-webkit-transform: rotate(' + deg + 'deg);'; 
    this.setAttribute('style', css); 
} 

https://jsfiddle.net/imsy041/efum927n/8/

질문입니다 나는 파란색 점/핀에 닿을 때 플립 것이다 화살표/포인터를 어떻게해야합니까 모퉁이 돌면? 달성하고자하는 결과는 https://www.youtube.com/watch?v=Gm9kftOieYI

과 유사합니다. 또한 gamedev 커뮤니티에서 thread을보십시오. 나는 javascript가 좋지 않다 ... 물리 엔진을 사용하는 것보다 쉬운 방법이 있습니까? Strater의의 proyect를 만들기 위해 복잡한

+0

먼저 올바른 항목을 가리키는 포인터가 있어야 할 수 있습니다. 포인터에 초점을두면 핀에서 뒤집기를 시뮬레이트하는 애니메이션을 갖게됩니다. 아니, 당신은 적어도 물리학 엔진이 필요하지 않습니다, 당신은 핀과 휠의 각속도의 위치를 ​​아는하여 포인터를 대칭 적어도 근사 할 수 있습니다. 그것은 정말로 당신이 그것을보고 싶어하는 "좋은"방법에 달려 있습니다. –

+0

@Spencer Wieczorek 답장을 보내 주셔서 감사합니다. 어떻게해야합니까? 보시다시피 휠은 3 차 베 지어 방식으로 다른 속도로 회전합니다. 회전하는 정도가 달라질 때마다 –

+0

이 도움이 될 것입니다. https://codepen.io/zadvorsky/pen/xzhBw – RRR

답변

-1

오, 그건 방법.
degrees을 사용하여 플립을 애니메이션으로 만들 것을 권장합니다.

플립이보다 현실적인 방식으로 상호 작용하도록하려면 파란색 점과 뒤집기가 별도의 요소 여야합니다.