책임자가 숨은 것은 aptpod Advent Calendar 2018 5일째다.다음 날Headless Chrome로 JS가 그린 View를 PDF화할 때까지에 이어 두 번째 문장이다.
현재 JS에서는 삐걱삐걱하는 UI 애니메이션을 자주 실현하고 있으며, 작업을 시작할 때 주로 Flash(ActionScript 3.0)를 접한다.한 검색엔진에 실린 현수막을 아저씨처럼 그리워하며 100개를 두드렸다.
언어는 바뀌었지만 인체(사용자의 눈)와 시각, 감각은 변하지 않았기 때문에 현재 UI 애니메이션을 제작할 때 몇 가지 요점을 소개한다.

단추가 딱딱한지 부드러운지 생각해 보세요.

코드상<button>에 불과하지만 디자인에 따라 단추가 딱딱할 때도 있고 부드러울 때도 있다.딱딱하면 scale가 변하지 않고 배경색을 찰칵 바꾸고, 부드러운 것은 그릇과 scalse가 변해 조금 긴 애니메이션을 만든다.나는 그 버튼을 어디에 두는 것이 비교적 좋은지 알아야 한다고 생각한다.

특이한 Easing은 최대한 사용하지 마세요.

여기서 말하는 특수한 Easing은 시작~끝까지의 변화(예를 들어 scale 0.5→1.2→1.0 등, 두 번째 scale는 끝의 scale 등을 초과)를 가리킨다.UI 애니메이션을 설치할 때 항상 사용자 배려를 받습니다일력표.그중Back,Elastic,Bounce는 특수한 Easing이다.

참조 "일력표"
지정만 하면 동작이 있는 애니메이션으로 변할 수 있어 편리하지만, 변화량과 변화의 간격을 조정하기 어려워 사용하는 곳도 조화롭지 못한 느낌이 든다.조화롭지 못하다고 느낄 때 하나하나의 변화를 분리해 애니메이션을 만들면 자연스러운 애니메이션이 된다.사용한 이지는 다르지만, 이 글'전단 공연: 가볍게 떠다니는 동작의 제작 방법에서 분위기가 느껴진다고 생각한다.

짧은 애니메이션에도 linear가 있어요.

linear는 애니메이션 시간의 변화량에 대한 일정한 Easing이다.

참조 "일력표"linear 등속 애니메이션이기 때문에 UI 애니메이션에 사용하기 어려운 인상을 주지만 MouseOut 등 짧은 애니메이션linear에 적합하다.시간이 짧으면 사람의 눈으로 쫓기 힘들고, 모우스아웃 애니메이션을 간단한 것으로 만들면 다음 조작에 방해가 되지 않는다.

베젤 라인으로 Easing을 만들 때가 있어요.

빠지기 힘든 이지...이렇게 생각한다면 대담하게 만들어라!cubic-bezier.com면 GUI로 세밀한 Easing을 만들 수 있다.

하나의 애플리케이션에서 여러 가지 Easing을 자주 사용하지 않음

디자인에 포인트 컬러가 있듯이 Easing을 어느 정도 축소하는 것이 좋습니다.아이싱은 UI에 따라 영락해 통일감 없는 인상을 준다.개인이 많이 쓰는 것은 Expo와linear의 조합이다.인(MouseOver)은 Expo 0.5s, out(MouseOut)은 linear 0.2s를 가리킨다.

리듬

웹 페이지나 애플리케이션의 경우 대부분 스프링클러를 삽입한 다음 UI를 표시합니다.튀긴 후에 가능한 한 빨리 표시되어 사용자가 신속하게 사용할 수 있기를 바랍니다!한꺼번에 뜨면 엉망진창이 될 거예요. 단숨에 그린 부하가 올라가고 카드가 생길 거예요...하지만 하나하나 보여주면 기다리게 돼...이럴 때 어느 정도에 애니메이션을 병행하여 보여주면 애니메이션의 리듬에 방해가 되지 않고 좋은 중점을 찾으면 기분이 상쾌한 표현을 실현할 수 있다.

총결산

현재 앱은 플래시 전성기와 비교해도 성격이 달라 애니메이션 자체가 주인공이 되면 오히려 이용자들에게 혼란을 줄 수 있다.이용자들이 눈치채지 못할 때'어? 이 애니메이션 편하다. 어쩌다 마주쳤다'는 절묘함을 찾아가 조회 수 향상을 목표로 하품을 해도 쓸 수 있는 UI를 목표로 앞으로도 UI 애니메이션을 제작할 예정이다.