Векторная графика для начинающих: теория и практика технического дизайна — страница 31 из 31

  opacity: 1;
  cursor:pointer;
 }
}
@keyframes scaleIn {
 0% {
  opacity: 0;
  background-size:0 0;
  cursor:none;
 }
 80% {
  opacity: 0;
  background-size:56px 56px;
  cursor:none;
 }
 100% {
  opacity: 1;
  background-size:60px 60px;
  cursor:pointer;
 }
}

Из кода CSS очевидны следующие ключевые факторы для исполнения анимации в веб-странице.

• Используем фиксированное позиционирование с расчетом положения от углов страницы.

• Анимация fadeIn задает проявление слоя.

• Анимации rotateOne и rotateTwo задают вращение объектов на заданные углы в период воспроизведения анимаций по сценариям.

• Сущность transition-delay:10s; задает задержку запуска анимации для последовательного воспроизведения.

• Анимация scaleIn задает увеличение объекта (изображения в фоне) от исходного до заданного размера.

• Сущность animation: scaleIn 7s steps(1000, end) 1; задает настройку вывода анимации в слое на странице HTML: длительность – 7 с, 1000 шагов до завершения, воспроизведение – 1 раз и т. д.

3. Исполнение скрипта обработки действия по событию (по клику)

Рассмотрим детально исходный код функции JQuery для обработки действия по клику.

В этой функции описано, что при наступлении события click по объекту с классом .animation.fadeIn следует выполнить функцию добавления класса .hidden (точнее, .toggleClass('hidden')) для объекта с классом (идентификации в коде HTML) .intro. Так выполняет добавления класса hidden для скрытия блока анимации и перехода к загруженному контенту в период N секунд воспроизведения анимации.

В результате исполнение исходного кода HTML с привязкой стилей CSS и скрипта JavaScript (с функцией JQuery.toggleClass) и подготовленными графическими файлами дает воспроизведение комплексной анимации для рекламной заставки и возможность перехода к контенту страницы после воспроизведения анимации по клику на блок анимации.

Вопросы преподавателя

Вопрос № 1

Какие функции выполняет анимация в веб-странице?

Ответ: привлечение внимания к объекту(ам) воспроизведения для направления действия пользователя по заданному разработчиком сценарию исполнения логики в данной веб-странице.

Вопрос № 2

Сколько секунд должна длиться рекламная анимация в данном случае?

Ответ: вариативно. В зависимости от размера страницы в контенте, включая высококачественные фото, длительность анимации можно рассчитать эмпирически и выставить равной времени загрузки контента в секундах, чтобы исключить ожидание моделирования контента (rendering) пользователем без отвлекающей внимание заставки.

Вопрос № 3

В чем отличие способов воспроизведения текста в анимации через HTML-код и через подгрузку SVG-источника в кривых?

Ответ: первый вариант проще, но требует подгрузки источника фирменного шрифта, которого может не оказаться в открытом доступе.

Второй вариант позволяет без потерь воспроизвести краткий текст при любом масштабе, но требует подключения источника текста в SVG (в кривых).

Результат: архив с папкой проекта и отчет с ответами на вопросы преподавателя.

Оценка качества исполнения практикума

1. Общее время на выполнение задачи не должно превышать 1,5 ч.

2. Исходный код верстки должен быть проверен на валидаторах HTML и CSS.

3. В результате анимация должна соответствовать представленной в практикуме визуализации (рис. 20.1).

Заключение к практикумам

В завершение курса основ технического дизайна предоставим несколько рекомендаций.

Студентам рекомендуется систематизировать полученные знания и умения:

• в виде сохраненных кейсов решения типовых задач, представленных в лекциях и практикумах;

• в виде карточек-напоминаний с ключевыми правилами и подходами к исполнению задач.

Это позволит эффективно ориентироваться в практической работе и минимизировать ошибки в исполнении ТЗ, содержащих типовые задачи, связанные с моделированием графики, иллюстрированием и композицией.

Особое внимание в курсе уделено работе с веб-иллюстрациями и форматами SVG и WebP, т. к. это одно из наиболее перспективных комплексных решений визуализации графики высокой четкости с учетом вложенной логики использования веб-интерфейса для коммерческих целей. Понятно, что курс не может охватить все возможные задачи, но уже сейчас, после прохождения курса, у студентов формируется теоретический и практический базис для начала работы по специальностям Технический дизайн, Веб-дизайн и Проектирование веб-интерфейсов.

Для дистанционного обучения, для повышения квалификации курс представлен в веб-ресурсе: http://highcourses.ru.

В заключение остается пожелать студентам успехов в освоении выбранной профессии и эффективно применять на практике полученные знания и умения по техническому дизайну.