Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
|
361 transition-duration: .25s, .75s, 2s; Порядок перечисления показателей продолжительности должен соответство- вать порядку перечисления свойств. Следовательно, в показанном выше примере .25s относится к свойству color , .75s — к свойству background-color , а 2s — к свой ству border-color . Если поменять свойства местами, их показатели продолжительности переходов изменятся. К сожалению, как и в случае применения многих других свойств CSS3, для работы свойства transition требуется указать префиксы производителей. То есть показанный выше пример .navButton во многих браузерах не будет работать, пока не будут добавлены соответствующие префиксы производителей, поэтому данный стиль нужно переписать следующим образом: .navButton { background-color: orange; -webkit-transition-property: background-color; -moz-transition-property: background-color; -o-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } Префикс производителя -ms- применять не нужно, поскольку Internet Explorer 9 и более ранние версии свойства transition не понимают, а Internet Explorer 10 по- нимает версию этого свойства без указания префикса. ПРИМЕЧАНИЕ В процессе написания книги текущие версии Firefox и Opera перестали нуждаться в указании пре- фиксов производителей для свойства transition. Но чтобы гарантировать работу анимации в более ранних версиях этих браузеров, лучше пока продолжить использование префиксов -moz- и -o-. Распределение скорости выполнения перехода по времени Чтобы анимированный переход заработал, нужно только установить значения для свойств transition-property и transition-duration . Но с помощью свойства transition- timing-function можно также контролировать и скорость хода анимации. В предназна- чении этого свойства нетрудно и запутаться: оно управляет не продолжительностью анимации (для этого есть свойство transition-duration ), а скоростью хода анимации. Например, можно начать анимацию медленно, а затем быстро ее завершить, создавая эффект незаметного в начале и быстрого в конце изменения фонового цвета. Свойство transition-timing-function может получать одно из пяти ключевых слов: linear , ease , ease-in , ease-out и ease-in-out . Если функцию регулирования скорости не задавать, браузер будет использовать метод ease , при котором анима- ция начинается медленно, ускоряется к середине и замедляется к концу, предостав- ляя более естественное изменение. Вариант linear дает равномерное изменение на протяжении всего периода анимации. Ни один из вариантов не имеет заметных 362 Часть 2. Применение CSS преимуществ перед другими, они просто предлагают различную общую картину, и для определения своих предпочтений нужно просмотреть все варианты. Чтобы воспользоваться этим свойством, нужно просто добавить свойство transition-timing-function и метод, который вам хочется использовать: transition-timing-function: ease-in-out; Разумеется, как и в случае со всеми свойствами переходов, нужно также доба- вить префиксы производителей. Поэтому, чтобы заставить эту строку кода рабо- тать на максимально возможном количестве браузеров, ее нужно переписать сле- дующим образом: -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; ПРИМЕЧАНИЕ В случае с различными функциями регулирования скорости перехода лучше один раз увидеть, чем сто раз услышать. Зайдите на сайт www.the-art-of-web.com/css/timing-function/, чтобы увидеть ве- ликолепно преподнесенное сравнение пяти методов регулирования скорости. Для свойства transition-timing можно также применять то, то называется куби- ческой кривой Безье. Эта кривая определяет график хода анимации по времени (рис. 10.8). Если вам приходилось работать с такими программами обработки изо- бражений, как Adobe Illustrator, то вы, наверное, знакомы с кривыми Безье. Кри- визной линии можно управлять путем настройки двух контрольных точек: чем круче линия, тем быстрее анимация, а более пологая линия означает более медлен- ный ход анимации. Например, кривая Безье, нарисованная на рис. 10.8, начинается с крутого участка (анимация начинается в быстром темпе), затем переходит к сере- дине в более пологую фазу (анимация замедляется), а затем кривизна снова возрас- тает (анимация быстро подходит к своей завершающей стадии). Для создания ани- мации такого профиля нужно добавить следующую строку кода: transition-timing-function: cubic-bezier(.20, .96, .74, .07); Вам совершенно не обязательно забивать себе голову кубическими кривыми Безье. Лучше воспользоваться одним из многочисленных интерактивных средств для создания и тестирования различных функций распределения скорости хода анимации. Одним из лучших считается средство Ceasar, разработанное Мэтью Лейном: http://matthewlein.com/ceaser/ . Можно задать очень медленное начало и бы- строе завершение или наоборот. Интерактивное средство Caesar, изображенное на рис. 10.7, превращает создание кубических кривых Безье в сущий пустяк: нуж- но просто для изменения кривизны перетаскивать нижнюю левую и верхнюю правую контрольные точки. Чем круче линия, тем быстрее идет анимация на ее участке. В данном примере линия сначала имеет относительно пологую форму, то есть вначале анимация будет идти медленно, а затем до самого конца линия резко ухо- дит вверх, то есть в конце времени перехода анимация резко ускорится. Так же, как и в случае со свойством transition-duration , к различным свойствам можно применять различные функции распределения хода анимации по времени. Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS 363 Рис. 10.8. Создание кубической кривой Безье позволяет создавать широкий диапазон интересных функций распределения скорости выполнения анимации по времени ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ Использование JavaScript для запуска переходов CSS3переходы являются простыми в использовании средствами анимации, встроенными непосредствен но в веббраузеры (по крайней мере, в большинство веббраузеров). Сложные эффекты можно создавать, просто определяя для этого набор исходных и конечных CSSсвойств и возлагая все остальное на веббраузер. К сожалению, для запуска этих переходов у вас в распо ряжении имеется всего лишь несколько CSSселекторов. 364 Часть 2. Применение CSS Чаще всего для изменения элемента при проходе над ним указателя мыши используется псевдокласс :hover . Для анимации элемента формы при щелчке на нем кнопкой мыши можно также воспользоваться псевдоклассом :focus (например, можно заставить область многострочного ввода при получении фокуса изменять свою высоту, а затем сжиматься до несколь ких строк при щелчке за пределами этой области). Но в CSS нет, например, псевдокласса :click , по этому при желании запустить переход по щелчку на элементе, сделать это средствами CSS не получится. Не удастся также запустить анимацию какогонибудь элемента при проходе указателя мыши над другим элементом, если использовать только CSS. Но пере ходы CSS работают при любом изменении CSSсвой ства, даже если это делается с помощью JavaScript. JavaScript является языком программирования, позволяющим добавлять интерактивность веб страницам, создавать динамические пользователь ские интерфейсы и осуществлять множество других полезных действий. Но JavaScript можно также исполь зовать для простого добавления или удаления клас са элемента или изменения какого угодно свойства CSS. Используя JavaScript, можно добавить класс к изображению, ко гда посетитель щелкает на ссылке «Показать увеличенный вариант изображения». Этот новый класс просто увеличивает масштаб изо бражения (с помощью свойства scale-transform ). Добавляя к изображению переход, вы тут же полу чите анимацию. JavaScript является довольно об ширной темой, заслуживающей отдельной книги. Но если для начала вы захотите освоить простей ший способ использования CSSпереходов, запу скаемых с помощью JavaScript, прочитайте следу ющее краткое руковод ство: www.netmagazine. com/tutorials/get-more-out-your-css-transitions- jquery. Задержка начала перехода И наконец, можно задержать время начала анимации перехода, воспользовавшись свойством transition-delay . Например, если вы хотите подождать полсекунды, пре- жде чем начать анимацию, можно добавить следующий код: transition-delay: .5s; Разумеется, это свойство требует наличия префиксов производителей, поэтому, чтобы заставить его работать в большинстве браузеров, нужно написать следу ющий код: -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; Чаще всего задержка перехода для всех свойств вам не понадобится, поскольку она снижает эффект интерактивности. В конце концов, жестоко заставлять посети- телей ждать целую секунду, пока они увидят изменения в кнопке при наведении на нее указателя мыши. Но если анимируются сразу несколько свойств, может пона- добиться выждать с изменением одного свойства, пока не закончится анимация перехода других свойств. Предположим, например, что у вас есть кнопка, цвет фона и текста которой нужно изменить, а затем неожиданно изменить цвет ее границы после завершения изменения первых двух свойств. Это можно сделать с помощью следующего кода: ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS 365 .navButton { color: black; background-color: #FF6603; border: 5px solid #660034; transition-property: color, background-color, border-color; transition-duration: 1s, 1s, .5s; transition-delay: 0, 0, 1s; } .navButton:hover { color: white; background-color: #660034; border-color: #FF6603; } Как и в случае применения свойства transition-duration , для каждого свойства можно указать свое время задержки. Порядок перечисления показателей времени должен соответствовать порядку перечисления этих свойств для transition-property Например, в предыдущем коде задержки для переходов цвета текста и цвета фона отсутствуют, но зато есть односекундная задержка до начала изменения цвета гра- ницы. СОВЕТ Обычно свойства перехода помещаются в начальный (.navButtonon в предыдущем примере), а не в конечный стиль (.navButton:hover). Но при использовании раскрывающегося меню CSS возникают некоторые сложности. Проблема в том, что при задании раскрывающихся меню с помощью CSS они слишком быстро пропадают при случайном выходе указателя мыши за их пределы. Но с помощью свойства transition-delay можно заставить меню быстро появляться и медленно исчезать. Для этого добавьте в исходный стиль следующий код: transition-delay: 5s; Затем добавьте задержку к стилю :hover: transition-delay: 0; Каким бы странным этот код ни показался, он заставляет переход по :hover происходить немедлен- но, без задержки. А вот возвращение к обычному стилю (при котором меню исчезает) занимает 5 секунд. За это время посетитель успеет вернуть свою непослушную мышь обратно на меню, пока оно не исчезло. Краткая запись свойства transition Запись всех свойств по отдельности — transition-property , transition-duration , transition-timing-function — может просто утомить. Особенно если потребуется создать и версию каждого из них с префиксом производителя. К счастью, есть бо- лее быстрый способ задания переходов — свойство transition Это свойство связывает все другие свойства в одно. Нужно просто перечислить через запятую свойство, продолжительность, функцию распределения скорости по времени и задержку. Например, для анимации всех CSS-свойств на 1 секунду, используя функцию ease-in и полусекундную задержку, нужно написать следую- щий код: transition: all 1s ease-in .5s; 366 Часть 2. Применение CSS Список должен состоять из ключевого слова all или какого-нибудь одного CSS- свойства, а также из продолжительности, а функцию распределения скорости по времени и задержку можно не указывать. По умолчанию в качестве функции рас- пределения задается ease-in , а задержка не используется. То есть, если нужно про- сто анимировать переход всех CSS-свойств на 1 секунду, нужно написать следую- щий код: transition: all 1s; Если нужно анимировать изменение фонового цвета, включите в список имен- но это свойство: transition: background-color 1s; Здесь можно включить в список только одно CSS-свойство, поэтому, если нужно анимировать сразу несколько CSS-свойств (но не все), можно вос- пользоваться их списком с запятой в качестве разделителя, где элементами будут являться разделенные пробелами свойства переходов. Возьмем один из предыду- щих примеров, где свойство border-color анимировалось отдельно от цвета текста и цвета фона. Его код можно переписать следующим образом: transition: color 1s, background-color 1s, border-color .5s 1s; Чтобы код было легче читать, многие веб-разработчики помещают каждый пе- реход на отдельной строке: transition: color 1s, background-color 1s, border-color .5s 1s; Нужно только не забывать разделять переходы запятыми, а всю связку завер- шить точкой с запятой. Разумеется, нужно будет предоставить также и версии с префиксами производителей: -webkit-transition: color 1s, background-color 1s, border-color .5s 1s; -moz-transition: color 1s, background-color 1s, border-color .5s 1s; -o-transition: color 1s, background-color 1s, border-color .5s 1s; transition: color 1s, background-color 1s, border-color .5s 1s; Анимация В CSS3 предоставляется еще один, более богатый свойствами механизм создания анимации. С помощью CSS-переходов можно анимировать только переход от од- ного набора CSS-свойств к другому. Анимация, предусмотренная в CSS3, позво- ляет анимировать переходы от одного набора свойств к другому, затем к третьему Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS 367 и т. д. Кроме того, можно задать повторяющуюся анимацию, приостановить ее вы- полнение при проходе указателя мыши над элементом и даже повернуть ее вспять, когда анимация дойдет до конца. Анимация в CSS3 сложнее перехода, но у нее есть дополнительное преимуще- ство в том, что ей не нужен обязательный инициатор. Наряду с тем, что анимацию можно добавить к состоянию :hover для ее проигрывания при прохождении указа- теля мыши над элементом, запустить анимацию можно также при загрузке стра- ницы. Тем самым можно привлечь внимание к баннеру или логотипу, анимирован- ным на той странице, с которой посетитель заходит на сайт. ПРИМЕЧАНИЕ Анимация в CSS3, как и переходы, не работает в Internet Explorer 9 и более ранних версиях. Но эти эффекты поддерживаются большинством других современных браузеров. При создании анимации первым делом создаются ключевые кадры (keyframes). Ключевой кадр в анимации — это отдельный кадр анимации, определяющий вне- шний вид сцены. Предположим, первый ключевой кадр имеет изображение мяча на одной половине футбольного поля. Добавив второй ключевой кадр, можно задать конечную точку анимации, например мяч в воротах на другой половине поля. По сле этого веб-браузер предоставит анимацию между данными двумя ключевыми кад- рами, прорисовывая все промежуточные фазы, отображающие перемещение мяча по полю на его пути к голу в воротах. Ели вы подумали, что в переходы заложена такая же идея, то так оно и есть. В пе- реходе определяются два стиля, а на браузер возлагается задача анимировать изме- нения от одного стиля к другому. В этом смысле каждый из этих стилей можно пред- ставить в качестве ключевых кадров. Но анимации в CSS3 позволяют определять множество ключевых кадров и создавать более сложные эффекты анимации: напри- мер, футбольный мяч, перемещающийся с одной стороны поля к игроку, к другому игроку, а затем в ворота. Создание анимации проходит в два приема. 1. Определение анимации. Включает определение ключевых кадров со списком анимируемых CSS-свойств. 2. Применение анимации к элементу. После определения анимации ее можно назначить любому количеству элементов страницы. Можно даже задать для каждого элемента разные распределения скорости выполнения, задержки и другие свойства анимации. То есть одну и ту же анимацию на странице можно использовать с немного разными настройками несколько раз. Определение ключевых кадров Первым делом нужно настроить ключевые кадры. Реализующий их синтаксис мо- жет показаться немного странным, но его основная структура имеет следующий вид: @keyframes имяАнимации { from { /* Здесь перечисляются CSS-свойства */ } to { 368 Часть 2. Применение CSS /* Здесь перечисляются CSS-свойства */ } } Сначала идет ключевое слово @keyframes . За ним следует имя, которым вы называете анимацию. Позже это имя будет использоваться при применении ани- мации к элементу страницы, поэтому оно должно быть описательным, например fadeOut или fadeIn ПРИМЕЧАНИЕ Само понятие @keyframes является не CSS-свойством, а так называемым правилом. В CSS есть и другие правила, например инструкция @import для загрузки внешней таблицы стилей из другой таблицы стилей и @media для определения стилей для различных типов аппаратуры представ- ления информации, допустим принтера или экранов различного размера и разрешения. Затем добавляются как минимум два ключевых кадра. В показанном выше при- мере ключевые слова from и to используются для создания начального ключевого кадра ( from ) и конечного ключевого кадра ( to ). Внутри каждого ключевого кадра находится одно или несколько CSS-свойств, как будто создается стиль. Фактиче- ски каждый ключевой кадр можно представить в виде простого CSS-стиля, содер- жащего одно или несколько свойств CSS. Предположим, к примеру, что нужно создать анимацию постепенного появления элемента в поле зрения. Можно начать со значения opacity , равного 0 (невидимый), и закончить значением этого свойства, равным 1 (полностью видимый): @keyframes fadeIn{ from { opacity: 0; } to { opacity: 1; } } Но вы не ограничены использованием только двух ключевых кадров. С помо- щью процентных значений можно определить несколько ключевых кадров. Про- центное значение указывает место на общей продолжительности анимации, где должно произойти изменение. Предположим, к примеру, что нужно создать эф- фект изменения фона элемента с желтого на синий, а потом на красный. Для этого можно написать следующий код: @keyframes backgroundGlow { from { background-color: yellow; } 50% { background-color: blue; } |