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

이전 기사 "프론트 엔드 연출 : 물체에 탄력을 부여"에서 시간이 걸렸습니다.

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

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

판을 반짝반짝 빛나게 한다

이번 목표는 여기입니다. 파란 판이 반짝반짝 빛나는 표현입니다.

여러 연출을 거듭해

반짝반짝 빛나는 연출은 여러가지 연출이 겹쳐 있습니다. 단체의 연출만으로는 단조롭고 풍부하게 보이지 않습니다. 이번에는 다음과 같은 연출을 거듭하고 있습니다.

면 전체의 빛

얼굴의 빛을 표현합니다. 빛이 닿으면 전체가 밝아지고, 빗나가면 어두워진다는 이미지입니다.

광원이 되는 빛

얼굴이 빛나는 것은 광원이 거기에 있다는 것입니다. 광원이 계속 존재하면 변화가 나오지 않으므로 이동시킵니다.



이런 이미지를 이동시켜 마스크를 걸고 있습니다.

킬란

이것은 연출을 풍부하게 보여주는 악센트입니다. 현실 세계에서는 별로 볼 수 없지만, 애니메이션이나 영화에서 자주 보네요. 현실 세계에는 존재하지 않는 오버인 표현을 붙여 주면, 유저에게도 알기 쉬워집니다.

움직임의 계기를 의식하고

판이 반짝반짝 빛나는 흐름을 생각합니다.

광원이 출현 → 면이 밝아지기 시작 → 광원이 끝까지 도달 → 킬란 → 광원이 지나간다 → 면이 어두워진다

이 움직임의 계기를 바탕으로 각 연출의 시작과 끝을 결정합니다.

연출의 시작 위치



광원이 출현 & 면이 밝아지기 시작한다



광원이 끝까지 도달 & 킬란



광원이 지나가고 & 면이 어두워진다



연출 만들기는 각 연출이 영향을 받고 깊이가 나옵니다!
역시 연출 만들기는 즐겁다 ~ 다음 번도 거지 기대!