Давайте сначала поговорим о домашнем задании последнего занятия. Все три анимации, которые мы попросили всех сделать, имеют эффекты постепенного появления и исчезновения, но если вы присмотритесь, вы обнаружите различия.
Первая анимация постепенно появляется по мере перемещения текста. Текст наиболее заметен на полпути движения, а затем постепенно исчезает по мере перемещения. Если вы используете для этого переход кадров, вам необходимо сначала определить 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, вы можете знать, что он расположен в дальнем правом углу экрана. Во втором кадре весь текст отображается и его положение немного сместилось влево. Таким образом, переход кадра 12 завершает все изменение непрозрачности и одновременно завершает небольшую часть движения. После этого текст перемещается на определенное расстояние (переход кадра 23), а затем начинает исчезать, приближаясь к левому концу (переход кадра 34), что является противоположностью постепенному появлению.
Интересно, подумали ли вы о еще одной проблеме, с которой придется столкнуться при производстве этой анимации, а именно о том, как обеспечить, чтобы расстояние движения 12-го кадра соответствовало расстоянию 23-го кадра. Соответствие здесь не означает равенство, а означает, что расстояние, пройденное каждым кадром, одинаково. Предположим, что переход кадра 12 составляет 3 кадра (ABC), а переход кадра 23 — 6 кадров (DEFGHI), т. е. , 1ABC2DEFGHI3, всего 12 кадров. Тогда расстояние перемещения текста в каждом из этих 12 кадров должно быть одинаковым, чтобы добиться лучшего эффекта движения. Но люди часто создают эффект быстрого движения спереди и медленного сзади или медленного движения спереди и быстрого сзади, потому что они недостаточно оценивают расстояние движения. Эту задачу сложно решить, если только вы не воспользуетесь линейкой для точного расчета расстояния, вам придется лишь несколько раз пытаться найти наиболее подходящее количество кадров перехода.
В этом уроке вам нужно освоить, как обращаться с появлением и исчезновением в сочетании с движением. Лучший способ — использовать меньшее количество кадров, чтобы завершить плавное появление и исчезновение, продолжая движение, сохраняя при этом расстояние перемещения каждого кадра одинаковым. Эта операция немного громоздкая, но не волнуйтесь, скоро будет решение.
anisample01.rar
Исходные файлы для создания третьей анимации мы предоставляем здесь ( anisample01.rar ), не то чтобы я думаю, что все не смогут это сделать, но чтобы обеспечить единство обучения, нам нужно использовать эту анимацию для продолжения обучения. Вы также можете использовать свою собственную работу. Домашнего задания для этого класса нет, но есть вопрос для размышления: как создать анимацию, как показано ниже, сохранив исходные настройки 20 кадров из anisample01.psd без изменений.
В следующем разделе мы представим ограничения анимации кадров перехода .