이전 세 수업의 연구를 통해 우리는 애니메이션 제작 방법을 익혔습니다. 비록 제작된 애니메이션이 아직 매우 조잡하지만 말입니다. 기본을 배우면서 오랫동안 단일 컬러 블록에 노출되었던 것을 아직도 기억하십니까? 이것이 모든 사람의 현재 성과 수준에 영향을 미치지는 않았습니다. 마찬가지로, 곧 더 자세한 애니메이션 제작을 시작할 예정입니다. 하지만 이 모든 것이 오기 전에 모든 사람은 필요한 디자인 사고를 배워야 합니다. 소위 디자인 싱킹은 애니메이션을 만들기 전의 계획과 고려 사항을 말합니다. 이 계획에는 여러 측면이 포함됩니다.
먼저 레이어 구성에 대해 말씀드리겠습니다. 최종 완성된 애니메이션에는 레이어 정보가 포함되어 있지 않습니다. 여기에 언급된 레이어는 생산 중인 레이어만을 의미합니다. 레이어 위치 변경을 사용하여 제작된 애니메이션의 경우 분명한 문제는 레이어를 합리적으로 배열해야 한다는 것입니다. 왜냐하면 이동의 최소 단위가 레이어이기 때문에 서로 다른 모션 궤적을 가진 여러 객체를 만들어야 하는 경우 레이어를 서로 다른 방식으로 분산해야 한다는 것입니다. 레이어. 또한 이동 거리를 미리 고려해야 합니다. 이미지의 크기와 배치도 이동할 수 있는 충분한 공간을 확보해야 합니다.
두 번째는 다른 레이어와 교차할지, 교차를 어떻게 처리할지, 누가 누구를 덮을지, 즉 레이어의 계층적 배열을 고려하는 것입니다. 다음 그림은 교차하는 세 가지 방법을 나열한 것입니다. 두 레이어가 모두 100%이면 녹색이 빨간색을 덮습니다. 나머지 두 개는 불투명도 50%에서 서로 다른 레이어의 서로 다른 적용 범위 효과를 보여줍니다. 녹색이 빨간색을 덮으면 교차로는 더 녹색이 되며 그 반대도 마찬가지입니다. 이는 모두 일반 블렌딩 모드에서의 내용입니다. 오버레이 등 다른 블렌딩 모드를 선택할 경우에는 레이어에 더욱 주의를 기울여야 합니다.
위에서 언급한 내용은 모두 기술적인 문제입니다. 이제 플롯 문제에 대해 이야기해 보겠습니다. 일반적으로 말해서, 이미지에서 객체가 항상 움직이는 경우 이를 고려할 필요가 없습니다. 그러나 물체가 원래 그림 속에 없었다가 나중에 그림 속으로 들어가거나, 원래 그림 속에 있었다가 나중에 그림 밖으로 옮겨진 경우에는 물체의 출현과 사라짐을 설명해야 합니다. 시청자는 더욱 자연스러운 심리 변화를 경험하게 됩니다. 일반적인 기술은 객체를 점진적으로 나타나게 하거나(페이드 인이라고도 함) 점차 사라지게 하는 것(페이드 아웃이라고도 함)입니다. 아래 그림과 같이 동일한 텍스트 이동에서 페이드 인과 페이드 아웃 효과를 비교한 것입니다.
실제 애니메이션 효과를 보려면 재생 영역으로 마우스를 이동하고, 재생 영역 밖으로 마우스를 이동하면 재생을 중지할 수 있습니다. 비교해보면 페이드인과 페이드아웃 처리를 추가한 효과가 더 좋다고 다들 느끼실 거라 믿습니다.
게다가 루프 설정도 플롯 문제입니다. 실제로 앞서 언급한 바 있는데, 어떤 상황에서는 무한 루프 애니메이션을 사용할 수 있지만 다른 상황에서는 적합하지 않습니다. 예를 들어, 칼럼 제목 텍스트가 페이드 인되는 애니메이션이 계속 반복되면 웹 페이지 전체가 지저분해 보이고 보는 사람이 불편함을 느끼게 됩니다. 이때 가장 적합한 접근 방식은 한 번만 재생하여 웹 페이지 전체에 영향을 주지 않고 효과를 표시할 수 있도록 하는 것입니다. 2~3회 정도로 설정된 주기는 일반적으로 허용되며, 그 이상은 좋지 않습니다.
그러나 한 번만 재생되는 애니메이션은 웹 페이지에 들어가자마자 볼 수 있도록 웹 페이지 상단에 배치하는 것이 가장 좋습니다. 웹 페이지 하단에 배치하는 경우 시청자가 해당 지점에 도달할 때 애니메이션 재생이 완료될 수 있습니다. 그렇다면 애니메이션을 만드는 것은 의미가 없고, 대신 정적인 그림을 사용하는 것이 더 나을 것입니다.
애니메이션 GIF 이미지는 호출될 때마다 다시 재생된다는 점에 유의하세요. 일부 사람들이 이미 웹 페이지 제작에 대한 지식을 가지고 있다면 이 속성을 사용하여 웹 페이지 제작 소프트웨어에서 해당 작업을 설정할 수 있습니다. 예를 들어, 여기에서 마우스를 움직여 예제의 애니메이션을 보는 방법은 다음과 같습니다. 애니메이션은 항상 움직일 때마다 처음부터 시작됩니다. 이렇게 하면 애니메이션이 한 번만 재생되더라도 웹 페이지에서는 여러 번 재생할 수 있습니다. 웹페이지 제작에 대한 지식이 없어도 걱정하지 마세요. 이후의 애니메이션 학습에는 영향을 미치지 않습니다. .
멋지게 보이는 페이드 효과와 관련하여 고려해야 할 중요한 문제는 브라우저가 애니메이션을 비활성화하도록 설정할 수 있다는 것입니다. 이때 애니메이션은 애니메이션의 첫 번째 프레임만 표시합니다. 그러면 위의 "조용히 왔다 갔다"와 유사한 애니메이션이 웹 페이지에서 공백이 됩니다. 첫 번째 프레임이 원래 비어 있기 때문입니다. 이는 시청자들 사이에서 오해를 불러일으킬 수 있다.
어쩌면 누구도 의도적으로 애니메이션 디스플레이를 끄지 않을 것이라고 생각할 수도 있지만, 이 요인도 배제할 수 없기 때문에 우리는 가장 넓은 차원에서 방문객의 상황을 고려해야 합니다. 웹 페이지 전체 레이아웃에서 중요한 텍스트나 표시 부분에는 페이드 애니메이션을 사용하지 마세요. 애니메이션을 웹페이지에 배치한 후 애니메이션 재생을 수동으로 꺼서 문제가 있는지 확인하는 것이 가장 좋습니다. 애니메이션 재생을 끄는 것 외에도 페이지가 표시된 상태에서 방문자가 ESC 키를 누르면 애니메이션 재생도 중단되며 중단된 순간의 화면이 유지됩니다.
애니메이션 재생이 금지된 방문객과 애니메이션 재생이 허용된 방문객을 동시에 관리하고, 둘 사이의 균형을 유지하려면 애니메이션 제작에 있어서 다음과 같은 원칙을 따라야 합니다. 주요 부분은 움직이면 안 되며 수정된 부분은 애니메이션으로 표시되어야 합니다. 아래 그림과 같이 텍스트 자체에는 애니메이션이 적용되지 않고, 텍스트 가장자리에만 애니메이션이 적용됩니다. 이렇게 하면 스틸 애니메이션이 재생되거나 재생 중에 중단되더라도 시청자의 콘텐츠 이해에 영향을 미치지 않습니다.
다만, 내용이 항상 정확하게 반영될 수 있고, 본문이 사라지거나 과도한 변형을 피하는 한, 본문의 이동도 가능합니다.
본 강의에서 설명하는 내용은 애니메이션 제작 기술과 관련이 없습니다. 그러나 웹페이지에 애니메이션을 적용하고자 할 때에는 애니메이션의 제작 및 공연 방식을 폭넓은 관점에서 고려해야 합니다. 단순히 이러한 내용을 배우는 것은 약간 지루합니다. 모든 사람에게 인상을 남기고 향후 제작에 적용하십시오.
이번 과제 는 "조용히 왔다가" 애니메이션을 제작하는 것입니다. 또한 다음 두 가지 파생 애니메이션도 제작됩니다.
다음편에서는 애니메이션에서 페이드인과 페이드아웃을 표현하는 방법을 소개합니다.