프로토타이핑

Light 인터렉션 (2) - 피튜를 찾아라!

뜨이2023. 8. 4.

질문사항

세진님의 아이디어로 마우스를 따라 다양한 애니메이션이 일어나는 페이지를 만들어 봤습니다.

어제 올라온 3D light 인터렉션을 보고 세진님이 주신 아이디어 + 피튜캐릭터를 섞어 마우스를 따라 빛이 따라 움직이고 피튜님 캐릭터를 찾는 웹페이지를 만들어 봤습니다!

몇가지만 만들면 간단하게 재밌는 애니메이션 페이지를 만들 수 있습니다!

먼저 빛의 움직임을 극대화하기 위해 밤을 배경으로 한 어두운 페이지를 만들어주세요! (저는 밤의 도시를 만들고 건물을 배치했습니다!)

마우스가 호버되거나 엔터되었을 때 움직일 애니메이션을 만들어주세요! 취향껏 캐릭터가 움직이거나 도형이 움직이는 등 자유롭게 만들어주세요! (애니메이션은 각 동작마다 컴포넌트로 만들어 준 후에 배리언츠로 묶어서 chane to를 after delay로 걸어주세요!)

여기서 팁은 빛이 닿았을 때 잘보이는 느낌을 주기 위해 첫번째 컴포넌트의 투명도를 10~20% 정도로 주고 배경의 원하는 위치에 적절하게 배치합니다!

마우스가 움직일 빛 영역을 만듭니다! 우선 호버영역과 빛 영역의 프레임을 각각 1개씩 만들고 빛 영역 프레임에 꽉차는 노란 사각형을 만들어주세요! 노란 사각형의 레이어 블러와 투명도를 적절하게 넣어 빛이 번진 것처럼 만들어주세요!

두개의 영역 프레임을 각각 컴포넌트화하고 배리언츠로 묶은 후 인터랙션을 걸어주세요! (while hovering / smart animation)

호버영역의 인스턴스 여러개를 상하좌우 간격이 0인 배경 크기만한 오토레이아웃으로 묶어 배경에 덮어주세요!

이제 프로토타이핑에서 결과물을 확인해보세요 :)

아래 예제 파일에서 더 자세하게 확인해보세요!

**예제파일에 사용된 ‘피그마튜터 캐릭터’는 예제 안에서만 확인해주세요. 타 파일에 무단 복제 및 사용을 엄중히 금합니다. 적발시 법적으로 문제가 될 수 있음을 명심해주세요! **