연출의 분위기를 소개하는 기사입니다.

나는 원래 Flash 사용으로, 자주 배너나 풀 Flash 사이트의 제작을 하고 있었습니다. 최근에는 시대의 흐름으로 JS에서 UI의 연출과 그 밖의 다양한 이펙트를 만들고 있습니다.

옛날에 비해 「프런트 엔드」라고 하는 영역도 넓어져, 너무 연출의 제작을 담당하지 않는 분도 있다고 생각합니다. 그 중에는 움직임을 만드는 것은 서투른 분도 계실지도 모릅니다.

별로 Qiita 방향이 아닐지도 모릅니다만, 지금까지 온 연출 만들기의 요령? 같은 것을 조금씩 공개하고 싶다고 생각합니다

특히 소스 코드 등은 소개하지 않습니다. JS에서도 CSS에서도 사용할 수 있도록 분위기를 전할 수 있으면 좋겠습니다. 연출 만들기는 그 분위기로 만들어 가는 것이므로(여기는 비비빗과 나와서 살짝 사라지는 느낌 등).

덧붙여서, 이번 게재하는 소재는 Animate CC 로 작성했습니다.

푹신 푹신한 움직임

이 기사의 목표는 다음과 같은 움직임입니다. 푹신푹신 부유하고 있는 느낌입니다.

중요한 것은 이징

이징은 애니메이션의 시작부터 골까지를 어느 정도의 변화량·스피드감(점점 빨라지는, 점점 늦어지는 등)입니다. 여유에는 다양한 패턴이 있으므로 Easing Function 조견표이 도움이됩니다.

이징을 설정하지 않으면 (등속으로 변화한다) 움직임에 걸려 버립니다.

만드는 방법

이 푹신푹신한 움직임을 만드는 방법입니다. 먼저 이 움직임을 네 가지로 나눕니다.

중심에서 위로 이동

위에서 중심으로 이동

중심에서 아래로 이동

아래에서 중심으로 이동

각각에 여유를 설정합니다. 이징은 기본적으로 이즈인(점점 빨리)과 이즈아웃(점점 늦게)의 2패턴입니다. 위의 네 단계에 각각 여유를 설정합니다.

중심에서 위로 이동 : 점점 늦게 (이즈 아웃)

위에서 중심으로 이동 : 점점 빠르다 (이즈 인)

중심에서 아래로 이동 : 점점 늦게 (이즈 아웃)

아래에서 중심으로 이동 : 점점 빠르다 (이즈 인)

다음과 같이 설정합니다 (해설을 위해 슬로우 모션으로 설정).

연출 만들기는 이징의 사용 방법에 익숙해지는 것

저는 「연출 만들기는 이징의 사용 방법에 익숙해지는 것」이라고 생각하고 있습니다. 이 기사의 반응이 좋으면 다른 패턴도 소개할 수 있으면 좋겠습니다