먼저 지난 수업의 숙제부터 이야기해보자. 우리가 모두에게 만들어 달라고 부탁한 세 가지 애니메이션은 모두 페이드 인과 페이드 아웃 효과가 있지만, 자세히 살펴보면 차이점을 발견할 수 있다.
첫 번째 애니메이션은 텍스트가 움직일 때 점차적으로 나타납니다. 텍스트는 움직임의 중간쯤에 가장 분명하게 나타나고, 그 다음에는 움직일 때 점차 사라집니다. 프레임 전환을 사용하여 만드는 경우 먼저 3개의 키 프레임을 결정해야 합니다. 첫 번째 프레임의 텍스트는 불투명도가 0%인 오른쪽 끝에 있어야 합니다(또는 두 번째 프레임의 텍스트는 숨겨야 합니다). 투명도가 100%인 중앙에 있어야 합니다. 프레임 3의 텍스트는 맨 왼쪽에 있고 불투명도는 0%로 돌아갑니다(또는 레이어를 숨깁니다). 대략 아래와 같습니다.
그런 다음 각각 프레임 12와 프레임 23 사이를 전환하여 각각 약 5개의 프레임을 추가합니다. 프레임 지연 시간은 직접 설정할 수 있습니다. 이 애니메이션에서는 텍스트가 움직임과 동시에 페이드 인 및 페이드 아웃됩니다. 이동 중에 투명성이 변경됩니다.
두 번째 애니메이션에서는 텍스트가 맨 오른쪽 끝에서 페이드 인될 때 가만히 있다가 완전히 표시된 후 움직이기 시작합니다. 맨 왼쪽으로 이동한 후 정지된 상태에서 페이드 아웃됩니다. 그러면 키 프레임은 대략 아래 왼쪽 그림과 같이 4개 프레임이 되어야 합니다. 이 4개 프레임 사이의 전환을 각각 설정하면 됩니다.
특정 전환 프레임 수는 임의로 설정할 수 있지만 설계 관점에서 볼 때 프레임 12와 프레임 34 사이의 전환은 약 3~4 프레임으로 작아야 합니다. 프레임 23 사이에는 상대적으로 더 많은 전환(약 6~7개 프레임)이 있어야 합니다. 같은 거리를 이동할 경우 프레임 수가 적을수록 프레임당 이동 속도가 빨라지고, 프레임 수가 많을수록 이동 속도가 느려지기 때문입니다. 아래 오른쪽 그림과 같이 3프레임, 4프레임, 7프레임의 각 프레임의 이동거리입니다. 이론적으로 프레임 수가 많을수록 애니메이션이 더 풍부하고 세밀해집니다.
우리 애니메이션은 시청자가 명확하게 볼 수 있도록 주로 텍스트 콘텐츠를 표시합니다. 페이드 인 및 페이드 아웃 프레임 수를 매우 크게 설정하고 움직이는 프레임 수를 매우 작게 설정하면 텍스트가 매우 섬세하게 페이드 인되었다가 빠르게 이동했다가 페이드 아웃되는 상황이 발생합니다. 아주 섬세하게. 아마도 시청자는 여전히 텍스트의 내용을 이해할 수 있지만 이러한 표현 방법은 부적절합니다. 때로는 이것이 파격적인 표현 기법이 될 수도 있습니다.
이제 우리는 동일한 주제에 대해 페이드 효과와 이동 효과를 사용하여 두 개의 애니메이션을 만들었습니다. 하지만 둘 다 표현력이 부족합니다. 첫 번째 애니메이션의 단점은 불투명도 전환이 너무 길다는 것입니다. 전체 애니메이션 중 한 프레임에서만 텍스트가 완전히 표시됩니다. 전후는 반투명했습니다. 이는 텍스트의 중요성을 강조하지 않으며 보는 사람이 읽기 어렵게 만들 수 있습니다.
첫 번째 애니메이션의 텍스트가 매우 명확해 보이기 때문에 이 문제가 존재하지 않는다고 생각할 수도 있습니다. 그러나 우리는 최종 표시 상태로 100% 불투명도를 사용합니다. 이렇게 5프레임 전환에 따라 각 프레임은 20%씩 증가하게 됩니다. 즉, 첫 번째 프레임은 0%이지만 두 번째 프레임은 20%에 도달하므로 기본적으로 판독에는 문제가 없습니다. 또 다른 상황에서 최종 불투명도가 100%가 아니고 30% 이하일 경우 각 프레임의 불투명도 증가는 매우 작아지므로 최종 불투명도 30%면 충분하지만 읽기에는 필요하지만 페이드- 진행 중인 내용은 명확하게 보기 어렵고 읽기에 영향을 미칩니다. 최종 불투명도를 30%, 10% 등으로 설정하고 다시 시도할 수 있습니다.
대조적으로, 두 번째 애니메이션은 페이드 인과 페이드 아웃을 별도로 수행하여 페이드 인이 완료된 후에만 이동을 시작합니다(텍스트가 최종 모양 상태에 도달함). 100%든 30%든 최종 발현 상태는 이동하는 동안 원래의 모양을 유지합니다. 그러나 또 다른 단점도 있는데, 텍스트가 시작점과 끝점에서 고정되어 있어 이동의 연속성을 파괴한다는 점이다.
이제 두 가지를 결합하여 페이드 인 및 페이드 아웃 효과가 있고 텍스트를 더 잘 표시할 수 있는 애니메이션을 만들고 싶습니다. 아이디어는 전체 과정에서 첫 번째 애니메이션의 텍스트를 계속 움직이게 하면서 시작과 끝 부분에서 페이드 인과 페이드 아웃을 몇 개의 프레임으로 압축하여 텍스트가 대부분의 과정에서 최종 모양을 유지하도록 하는 것입니다. 운동의. 아래 왼쪽 그림과 같이 양방향 화살표는 페이드 인 및 페이드 아웃 과정을 나타냅니다. 위쪽 절반은 페이드 인과 페이드 아웃의 합이 전체와 동일함을 알 수 있습니다. 애니메이션 과정. 아래에는 페이드 인과 페이드 아웃이 전체 시퀀스의 절반 이하를 차지하는 현재 아이디어가 나와 있습니다. 이렇게 하면 텍스트가 최종 모양에서 대부분의 움직임을 완료할 수 있습니다.
키 프레임 설정은 아래 오른쪽 그림과 같이 인접한 두 프레임의 시점에서 전환을 설정하면 됩니다. 프레임 1에서는 텍스트가 보이지 않지만, 프레임 2에서는 텍스트가 모두 표시되고 위치가 약간 왼쪽으로 이동한 것을 알 수 있습니다. 이러한 방식으로 프레임 12의 전환은 불투명도의 전체 변경을 완료하는 동시에 움직임의 작은 부분을 완료합니다. 그 후 텍스트가 일정 거리만큼 이동한 후(프레임 23 전환), 페이드 인과 반대되는 왼쪽 끝으로 이동하면서 페이드 아웃되기 시작합니다(프레임 34 전환).
이 애니메이션을 제작하면서 직면하게 될 또 다른 문제, 즉 프레임 12의 이동 거리가 프레임 23의 거리와 일치하도록 하는 방법에 대해 생각해 보셨는지 궁금합니다. 여기서 대응은 동일하다는 의미가 아니라, 프레임 12의 전환이 3프레임(ABC)이고, 프레임 23의 전환이 6프레임(DEFGHI)이라고 가정하면, 각 프레임별로 이동한 거리가 동일하다는 의미입니다. , 1ABC2DEFGHI3, 총 12프레임. 그런 다음 더 나은 이동 효과를 얻으려면 이 12개 프레임 각각에 있는 텍스트의 이동 거리가 동일해야 합니다. 그러나 사람들은 앞에서 빨리 가고 뒤에서 느리게 가는 효과를 내는 경우가 많다. 또는 앞에서 천천히 가고 뒤에서 빨리 가는 효과를 내는 경우가 많다. 이동 거리를 충분히 판단하지 않기 때문이다. 이 문제는 해결하기 어렵습니다. 거리를 정확하게 계산하기 위해 눈금자를 사용하지 않으면 가장 적절한 전환 프레임 수를 찾기 위해 여러 번 시도해야 합니다.
이번 단원에서 마스터해야 할 것은 움직임과 결합하여 페이드인 및 페이드아웃을 처리하는 방법입니다. 가장 좋은 방법은 각 프레임의 이동 거리를 비슷하게 유지하면서 더 짧은 수의 프레임을 사용하여 계속 이동하면서 페이드 인 및 페이드 아웃을 완료하는 것입니다. 이 작업은 다소 번거롭지만 곧 해결책이 나올 것이므로 걱정하지 마십시오.
anisample01.rar
여기서는 세 번째 애니메이션 제작을 위한 소스 파일을 제공합니다( anisample01.rar ), 누구나 할 수 없다고 생각하는 것은 아니지만 교육의 통일성을 보장하기 위해서는 이 애니메이션을 사용하여 계속 학습해야 합니다. 자신의 작품을 사용할 수도 있습니다. 이 수업에는 숙제는 없지만, anisample01.psd의 원래 20개 프레임 설정을 변경하지 않고 어떻게 하면 아래와 같은 애니메이션을 만들 수 있을지 고민하는 질문이 있습니다.
다음 섹션에서는 전환 프레임 애니메이션의 제한 사항을 소개합니다.