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

по заданию предполагаются эффекты анимации поворота и проявления.

Для создания динамического эффекта анимации нарастания (приближения) в ходе загрузки используется увеличение размера прелоадера, поэтому при повороте нельзя допустить выхода за границы маски, как это отражено ниже на рис. 20.15.

Вариант A.

Неправильно

Вариант B.

Правильно

Рисунок 20.15 – Сравнение эффекта приближения объекта в анимации

Рисунок 20.16 – Настройки экспорта векторной маски в формате SVG с точностью 1:1000 для качественного воспроизведения при любом масштабе

1.3. Подготовка логотипа для анимации

По заданию для выполнения анимации следует использовать горизонтальный логотип из Практикума № 7 logotype.svg с размерами [32 × 78] px с аналогичной точностью воспроизведения: 1:1000 единиц.

При сборке анимации возможна ситуация некорректного воспроизведения логотипа (см. рис. 20.17) из-за непропорциональных размеров логотипа относительно слоев анимации.

По идее, анимация имеет квадратную пропорцию, чтобы при увеличении размера в ходе анимации не было выхода за границы блока [320 × 320] px. Поэтому используем исключительно квадрат как пропорцию для слоев анимации прелоадера. Это позволит выполнить задание без визуальной ошибки воспроизведения при любом масштабе на экране ПК, планшета или мобильного устройства.

Рисунок 20.17 – Горизонтальный логотип Tour Avia в векторном формате готов к выгрузке

При экспорте важно учесть:

• палитра RGB или HEX вместо CMYK для корректного воспроизведения цветопередачи в веб-браузере;

• точность 1:1000 единиц для качественного моделирования объекта при любом масштабе.

Результирующий логотип необходимо сохранить с названием logotype.svg в директории /img по адресу: «../img/logotype.svg».

Рисунок 20.18 – Некорректное воспроизведение логотипа в анимации

Рисунок 20.19 – Квадратный макет символа из логотипа компании

Рисунок 20.20 – Корректное воспроизведение анимации

1.4. Подготовка надписи слогана

Технически существуют два варианта реализации надписи слогана:

• текстом в коде HTML с оформлением стилями CSS;

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

Рассмотрим вариант с подгрузкой слогана в виде векторного файла.

При экспорте важно учесть:

• палитра RGB или HEX вместо CMYK для корректного воспроизведения цветопередачи в веб-браузере;

• точность 1:1000 единиц для качественного моделирования объекта при любом масштабе.

Рисунок 20.21 – Слоган в виде кривой в горизонтальном дизайн-макете размерами [516 × 100] px

Слоган экспортировать из Corel Draw в файл slogan.svg в директорию ../img/ по адресу: ../img/slogan.svg.

Рисунок 20.22 – Слоган в веб- браузере при воспроизведении анимации

2. Верстка и оформление анимации

Для исполнения анимации в веб-странице необходимо сформировать исходный код HTML и оформление стилями CSS согласно заданным классам в привязке к слоям анимации.

Исходный код HTML

Практикум №10. Проектирование визуальных динамических эффектов анимации для рекламной веб-страницы 
Перейти в блог
</code></pre></p><p><pre><code>    jQuery('.animation.fadeIn').click(function(){</code></pre></p><p><pre><code>      jQuery('.intro').toggleClass('hidden');</code></pre></p><p><pre><code>    });</code></pre></p><p><pre><code>
Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.

The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Вопрос студентам

Зачем необходимо подключение библиотеки JQuery для выполнения анимации?

Ответ: для выполнения функции, описанной в скрипте обработки события по клику. Аналогично другим примерам из предыдущих практикумов с применением JavaScript и JQuery.

Исходный код CSS

body {
 width:100%;
 min-height:100vh;
 margin:0;
 padding:0;
 overflow-x:hidden;
 overflow-y:scroll;
}
section.intro {
 position: fixed;
 top:0;
 left:0;
 z-index:2;
 width:100%;
 height:100vh;
 background: rgb(255,255,255); /* Old browsers */
 background: -moz-radial-gradient(center, ellipse cover,
 rgba(255,255,255,1) 320px, rgba(196,196,196,1) 100%); `/* FF3.6-15 */
 background: -webkit-radial-gradient(center, ellipse cover,
 rgba(255,255,255,1) 320px,rgba(196,196,196,1) 100%);
 /* Chrome10-25,Safari5.1-6 */
 background: radial-gradient(ellipse at center,
 rgba(255,255,255,1) 320px,rgba(196,196,196,1) 100%);
 /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.animation {
 position: fixed;
 top: calc(50% – 160px);
 left: calc(50% – 160px);
 display: block;
 width: 320px;
 height: 320px;
 margin: 0 auto;
 padding: 0;
 border-radius: 0;
 border: none;
 box-shadow: inset 20px 100px #fff;
 overflow: hidden;
 cursor: none;
}
i.multiGradient {
 position: relative;
 z-index: 1;
 top:0;
 left:0;
 display: block;
 width: 100%;
 height: 100%;
 border-radius: 200px;
 box-shadow: inset 20px 100px #fff;
 border: none;
 overflow: hidden;
 cursor:none;
}
i.multiGradient:before {
 position: relative;
 z-index: 1;