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

전회의 기사 「프런트 엔드 연출 : 푹신푹신 부동하는 움직임을 만드는 방법」로 고맙게 반응을 받았으므로, 부정기로 연출계의 기사를 계속하기로 했습니다

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

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

물체에 탄력을 부여

이번 목표는 여기입니다. 원이 꽉 수축하고 뛰어오르도록 커진다는 느낌입니다.

우선 움직임의 계기를 준다

탄력에 한정하지 않고, 애니메이션하기 전에 움직이는 계기를 붙여 줍니다. 이번에 말하면 「굿과 수축해」라고 하는 부분입니다. 사람이 점프 할 때도 체제를 낮추고 힘껏 날아가는군요? 저것과 같은 감각입니다. 「앞으로 움직이겠습니다~」라고 보고 있는 사람에게 전합니다. 이 움직임을 적용하면 전체 애니메이션의 현실이 증가합니다.

만드는 방법

크기(scale)

이번에는 움직이지 않고 크기 (scale)로 움직입니다. 움직임을 나누는 방법은, 「크게 된다→작게 된다」 「작게 된다→크게 된다」의 움직임이 변화하는 타이밍입니다. 이번 샘플에서는 다음과 같이 나누었습니다(통상의 크기를 100%로서).

100%

50%

130%

80%

110%

95%

102%

100%

한번에 한 에너지는 움직임과 함께 소비되기 때문에 점점 흔들림 폭을 작게합니다. 이것은 나의 개인적인 감각입니다만, 전의 진폭의 절반 정도로 변화하면 자연스럽게 보일까라고 생각합니다 %를 크게 할까 등).

시간

그런 다음 각 크기에 도달하는 데 걸리는 시간을 설정합니다. 전반 정도 흔들림 폭이 크기 때문에 시간을 길고 후반 정도 짧게합니다. 이번에는 다음과 같이 했습니다.

100%→50%로 작아진다:1000밀리초

50%→130%로 커진다:233밀리초

130%→80으로 작아진다:200밀리초

80%→110%로 커진다:150밀리초

110%→95%로 작아진다:117밀리초

95%→102%로 커진다:100밀리초

102%→100%로 작아진다: 83밀리초

이것만으로도 좋은 움직임이되었습니다.

여유

이징을 해설하려고 생각했습니다만, 지정하지 않아도 좋은 움직임이 되어 버렸습니다. 하지만 더 부드러움을 내기 위해 여유를 지정합니다. 이전 기사에서는 이즈 인과 이즈 아웃을 사용했지만 이번에는 이즈 인 아웃을 지정합니다. 점점 빨라지고 중간을 넘은 근처에서 점점 늦어진다는 것입니다.



▲완성

움직임의 속도로 단단함에 변화

현재는 부드러운 것이 부드럽게 바운드하고있는 인상입니다. 이 움직임의 속도를 전체적으로 짧게 하면 단단한 인상이 됩니다.



느긋한 것은 부드럽게 보이고 기장 같은 것은 딱딱하게 보인다.