애니메이션
-
Pure CSS + SVG 애니메이션 적용 실패기프로그래밍/Web 2022. 4. 13. 14:58
때는 2022년 2월 21일. 비디오 플레이어 디자인을 고민할 때였다. 기본, 1줄 프로토타입, 2줄 프로토타입 이왕 만드는 것, 재생-일시정지 버튼에 무언가 포인트를 넣고 싶었다. 아이디어 원천은 LG 음악앱. 폰은 구렸지만 음악앱 하나는 기똥차게 좋았던 LG..ㅠ 처음 써봤을때 재생, 리플레이 인터렉션보고 감동받았다. (투박한 유튜브 따위와 비교가 안됨) 대략 이런 느낌 [Dribble: Play -> Pause, Micro Interactions] 먼저 움직이는 SVG를 만들어봤다. 일시정지 사각형 두개가 중앙에서 만나 깔끔하게 옆으로 솟아나는 재생버튼을 만들기란 어지간히 어려운 일이 아니었다. 똥손이라 단순한 크기조정과 이동 정도를 구현하면 몰라도, 자체적으로 그래픽 리소스를 만들 자신은 없었다...