Благодаря изучению трех предыдущих уроков мы освоили метод создания анимации, хотя получаемая анимация еще очень сырая. Вы все еще помните, что, когда вы изучали основы, вы долгое время работали с одним цветовым блоком? Это не повлияло на текущий уровень производительности каждого. Аналогично, скоро мы начнем делать более детальные анимации. Но прежде чем все это произойдет, каждый должен научиться дизайнерскому мышлению. Так называемое дизайнерское мышление относится к планированию и размышлениям перед созданием анимации. Это планирование включает в себя множество аспектов.
Для начала поговорим об организации слоев. Готовая анимация не содержит информации о слоях. Упомянутые здесь слои относятся только к тем, которые находятся в производстве. Для анимации, созданной с использованием изменения положения слоя, очевидной проблемой является то, что слои должны быть расположены разумно , поскольку наименьшей единицей движения является слой, поэтому, если вам нужно создать несколько объектов с разными траекториями движения, они должны быть распределены по разным слои. Также необходимо заранее продумать расстояние перемещения. Размер и размещение изображения должны оставлять достаточно места для перемещения. Это один из них.
Во-вторых, необходимо учитывать, будет ли он пересекаться с другими слоями и как обрабатывать пересечение, кто кого будет покрывать, то есть иерархическое расположение слоев. На следующем рисунке показаны три способа пересечения. Два крайних слева. Когда оба слоя равны 100%, зеленый цвет закрывает красный. Два других показывают разные эффекты покрытия разных слоев при непрозрачности 50%. Если зеленый покроет красный, то пересечение будет зеленее, и наоборот. Это все в обычном режиме наложения. Если вы выберете другие режимы наложения, например, наложение, вам придется уделять больше внимания слою.
Все вышеперечисленное — технические вопросы, теперь поговорим о сюжетных вопросах. Вообще говоря, если объект на изображении всегда движется, нет необходимости это учитывать. Но если предмет изначально не был на картинке, но вошел в нее позже, или первоначально находился на картине, а затем удалился с картинки, то нужно объяснить появление и исчезновение предмета. Это объяснение является переходом, позволяющим. зритель, чтобы иметь более естественное психологическое изменение. Распространенный метод — постепенное появление объектов (также называемое постепенное появление) или постепенное исчезновение (также называемое постепенное исчезновение). Как показано на рисунке ниже, оно демонстрирует сравнение эффекта появления и исчезновения при одном и том же движении текста.
Вы можете переместить мышь в область воспроизведения, чтобы увидеть реальный эффект анимации, или переместить мышь за пределы области воспроизведения, чтобы остановить воспроизведение. Я считаю, что при сравнении каждый почувствует, что эффект от добавления обработки плавного появления и затухания лучше.
Кроме того, настройка цикла также является проблемой сюжета. Мы уже упоминали об этом раньше, то есть в некоторых ситуациях анимацию бесконечного цикла можно использовать, а в других случаях она не подходит. Например, если анимация постепенного появления текста заголовка столбца повторяется постоянно, вся веб-страница будет выглядеть неряшливо, а зрители будут чувствовать себя некомфортно. На данный момент наиболее подходящий подход — воспроизвести его один раз, чтобы эффект можно было отобразить, не затрагивая всю веб-страницу. Цикл, установленный на 2–3 раза, обычно приемлем, а увеличение количества циклов нежелательно.
Однако анимацию, которая воспроизводится только один раз, лучше всего размещать в верхней части веб-страницы, чтобы ее можно было увидеть сразу после входа на веб-страницу. Если анимация размещена внизу веб-страницы, воспроизведение анимации может закончиться к тому времени, когда зритель достигнет этой точки. В таком случае создавать анимацию бессмысленно, лучше использовать вместо нее статические картинки.
Следует отметить, что анимированное изображение GIF будет воспроизводиться снова каждый раз при его вызове. Если некоторые люди уже имеют знания о создании веб-страниц, они могут использовать это свойство для установки соответствующих действий в программном обеспечении для создания веб-страниц. Например, вот как вы перемещаете мышь сюда, чтобы посмотреть анимацию примера. Анимация всегда начинается с начала после каждого хода. Таким образом, даже если анимация воспроизводится только один раз, на веб-странице ее можно воспроизвести несколько раз. Не волнуйтесь, если у вас нет знаний о создании веб-страниц. Это не повлияет на наше последующее изучение анимации. .
Важная проблема, которую следует учитывать в отношении эффектов затухания, которые выглядят великолепно, заключается в том, что браузеры можно настроить на отключение анимации. В это время анимация будет отображать только первый кадр анимации. Тогда анимация, подобная приведенной выше «тихо приходить и уходить», будет пустой на веб-странице, поскольку первый кадр изначально пуст. Это легко может вызвать недопонимание среди зрителей.
Может быть, вы подумаете, что никто намеренно отключать отображение анимации не будет, но поскольку этот фактор исключать нельзя, нужно рассматривать ситуацию посетителя в самом широком плане. В общем макете веб-страницы избегайте использования анимации затухания в важных частях текста или индикаторов. После размещения анимации на веб-странице лучше всего вручную отключить воспроизведение анимации, чтобы проверить, нет ли каких-либо проблем. Помимо отключения воспроизведения анимации, если посетитель нажмет клавишу ESC во время отображения страницы, воспроизведение анимации также будет прервано, а экран останется в момент прерывания.
Если вы хотите позаботиться о посетителях, которым запрещено воспроизводить анимацию, и о тех, кому разрешено воспроизводить анимацию одновременно, и найти баланс между ними, то вам следует следовать определенному принципу при создании анимации, а именно: основная часть не должна двигаться, а измененные части должны быть анимированы. Как показано на рисунке ниже, сам текст не анимирован, анимированы только края текста. Таким образом, даже если неподвижная анимация воспроизводится или прерывается во время воспроизведения, это не повлияет на понимание контента зрителем.
Однако, если содержимое всегда может быть точно отражено и можно избежать исчезновения текста или чрезмерной деформации, основной текст также можно перемещать.
Содержание, описанное в этом уроке, не связано с технологией производства анимации. Однако, если вы хотите применить анимацию к веб-страницам, вы должны рассмотреть методы производства и выполнения анимации в широкой перспективе. Просто изучать это содержание немного скучно. Просто оставьте впечатление на всех и примените его в будущих постановках.
Это задание — создать анимацию «Тихо приходи и уходи». Кроме того, также создаются следующие две производные анимации.
В следующем разделе мы покажем, как выразить появление и затухание в анимации.