피그마로 룰렛만들기(롤링배너) - 하나만 알면 해결!

완성본 보기

 

1. 룰렛 만들기

1-1. 4개의 룰렛 만들기

뱅글뱅글 돌아가는 효과를 만들기 위해서

4개의 룰렛을 만들고 4개의 이미지가 반복되면서 노출되게 설정해야한다

(1,2,3,4가 반복되어 나타나는 꼴)

1-2. 룰렛 이미지 만드는 방법

 

원 이미지를 만들고 마우스를 갖다대면 Arc가 생기고, 그것을 위아래로 움직이면 팩맨과 같은 각도가 생긴다.

자세히 보고 싶다면 바로 아래 영상을 확인할 것

 

원하는 룰렛을 만들었다면, 애니메이션을 설정해야한다

애니메이션 값은 다음과 같다

2. 애니메이션 설정하기

★기본 지식이 있다면 이것만 확인하면 됩니다★

 

만들어 둔 네개를 모두 같은 에니메이션 값을 설정하면

뱅글뱅글 돌아가는 룰렛 이미지를 만들어 낼 수 있다.

 

다음과 같이 네개의 이미지에 같은 애니메이션 값을 입력하도록하자.

 

3. 당첨결과를 여러개 보여주고 싶다면

나의 경우에는 2, 3번째 당첨 결과를 확인해야했기 때문에 당첨결과 이후 돌아가는 룰렛이 필요했다.

전체적인 그림은 다음과 같다

 

뱅글 돌아가는 이미지는 재활용하기

뱅글 돌아가는 이미지는 모두 같은 것으로 활용해도 전혀 무방하다

 

4. 당첨결과 보여주기

당첨결과를 갑자기 보며주면 굉장히 어색하게 보이기 때문에

당첨 전의 애니메이션 효과를 주었다

 

뱅글 돌아가는 이미지에서 이미지를 정지시키기 위해서는

어떤 버튼을 눌러야만 한다.

 

룰렛을 정지시켜야 하기 때문에

나의 경우에는 투명 박스를 설치해서 클릭하면 응모완료 화면을 확인할 수 있도록 설정했다

당첨결과 애니메이션 설정값

이때 선택한 애니메이션 값은 다음과 같다.

A 영역을 드래그 하면 값이 변경되는데, 취향에 맞게끔 변경하면 될 것 으로 보인다.

 

 

5. 보고서에 룰렛을 작성하기

룰렛을 페이지에 넣더라도 같은 방식을 활용하면 된다.