inflearn logo
강의

Course

Instructor

Interactive Development Practice End [Capacity Enhancement]

Event wheel - random, rotate property, transition

화살표 회전 질문

261

yoonsoo0e8427

4 asked

0

실제로 프로젝트에서 룰렛을 쓰는 경우가 있는데요, 룰렛버튼을 누를때 화살표가 돌아가는 모션을 시계방향으로만 돌아가게 하는 방법이 있을까요?  현재 예제는 360deg -> 27deg 로 가게 될 경우 시계 반대방향으로 돌아가게 되어서요..

그리고 진짜 룰렛처럼 여러번 돌아가다가 서서히 마지막 deg로 가게끔 하고 싶은데 현재는 27deg이면 바로 가르켜서요. 앞에 계속돌아가는 모션을 따로 주어야 하나요? 

인터랙티브-웹 javascript

Answer 1

1

coding11

안녕하세요

제작 아이디어 스타일로 최대한 간단한 코드로 표현을 해서 아쉬운 부분이 있으셨던 것 같습니다 ^^

우선 여러번 돌아가게 하려면 랜덤 deg에 360 (한 바퀴) 을 더해주면 됩니다. 720을 더해주면 2바퀴가 더 돌겠죠

대략 아래와 같은 코드입니다.

const rotateValue = 720 + Math.ceil( Math.random() * 320 );

 

참고하시라고 추가로 개발해서 링크 첨부드립니다.

https://codepen.io/yahao2512/pen/MWbVPjE

 

 

0

yoonsoo0e8427

답변 감사합니다!! 더 열심히 해보겠습니다

모바일 스와이프 구현 마지막 숙제

0

402

2

레퍼런스 사이트

0

339

1

스크롤위치에 따른 페이지 변화에서

0

267

1

배열을 이용한 bg컬러 변경 강의에서 tagname body에 [0]이 왜 붙나요?

0

380

1

스크롤 위치에 따른 페이지 변화 - scroll 이벤트 에 대한 질문

0

675

1

페이징.페이지고정2 질문드립니다.

0

459

1

scrollTo 완성본

0

603

2

모바일 3D 입체 카드 제작 아이폰에서 에러

0

386

1

css 질문 드립니다

0

623

1

css 질문

0

284

1

pointBtn.addEventListner("click")

0

305

2

if문의 첫번째 조건 질문 있습니다~

0

285

1

offsetTop, offsetHeight

0

785

2

기존의 축 회전값에 더해서 rotate

0

320

1

모바일 드래그 강의 질문드립니다!

0

256

1

질문입니다.

0

215

1

GSAP(트윈맥스) 라이센스 관련 질문 드립니다.

0

1657

1

wrap 안에 click 이벤트

0

225

1

greensock을 사용하려면

0

701

1

TweenMax 효과 리셋

0

524

1

max 이상으로 입력했을 때 질문입니다.

0

192

1

dom에서 직접i nput의 value 값을 갖고 나오는 것에 대해

0

370

1

질문이용~

0

217

1

파일명 한글시 live Server 작동안함

1

213

1