#6_hover 인터렉션 만들기<스킬업 챌린지>

오늘은 인터렉티브 컴포넌트를 활용한 애니메이션 작업을 했다
 
hover했을 때 상품 이미지가 확대되는 인터렉션인데
실무에서 유용하게 사용할 수 있을 것 같다
 
이제 말로만 설명하는 건 그만 ㅋㅋ!!
 
 

 
1. state on/off 버전 두개를 만들어준다
2. Create componet set 클릭해서 하나의 컴포넌트로 묶어준다
3. 컴포넌트 안에 있느 개체에 프로토타입을 설정
4. off컴포넌트 선택 후 +버튼 핫스팟을 on컴포넌트로 연결
 
(Clip Content 체크 하냐 안하냐에 따라서 결과물이 달라짐)
 

 
Trigger를 While hovering으로 변경
 
Trigger가 다양해서
다른 인터렉션에 활용하면 재밌을 것 같다
 

smart animate에서 원하는 애니메이션을
속도나 스프링 등 커스텀해서 설정할 수 있다
 

 
 
간단한 애니메이션 완성 ~~
 
생각해보니까 모바일 할 때는 호버 애니메이션이 필요없네
웹디자인 할 때는 유용하게 사용할 것 같다
 
다음엔 모바일 인터렉션 만들어봐야지ㅎㅎ