![]() ![]() ![]() ![]() Управляемая анимацияПримеры управляемой анимацииНа этой странице показываю интересные примеры управляемой анимации, сделанные с помощью HTML+CSS и всего одной функции скрипта JavaScript. регулятор анимации *Пример управляемой анимации* Сдвигая ползунок регулятора вправо, частота анимации будет уменьшаться, а возвращая его обратно, т.е. влево, скорость снова увеличится. *Prim. Занимаясь созданием данного примера управляемой анимации, дал абзацу с этим примером идентификатор id="blink" (*англ. - мерцать, моргать, мигать). Присвоив используемый идентификатор любому блоку с текстом, он станет мигать, как прописано в коде регулятора анимации. ОДНАКО, есть и ОГРАНИЧЕНИЯ! Мигающие текстовые абзацыПочти все примеры текстовых абзацев упомянутого идентификатора НЕ ИМЕЮТ! Зато, он дан блоку из тэгов <div>...</div>, в котором они находятся. Таким образом, я испытывал возможности кода. * * * Пример "чистого" текстового абзаца без идентификатора. Для наглядного сравнения - ещё один, но с тэгом <font> внутри себя. У этого же текстового абзаца сделал три слова жирными, и всё работает. Этот пример НЕ работает! Стиль он берёт из главной таблицы CSS. А этот работает! Стиль CSS ему прописал через атрибут style, НО! ... ... *ссылки в следующих двух примерах будут открываться в новом окне* В этом текстовом примере с вставленной ссылкой срабатывает только "чистый" текст. А этот текстовой пример с вставленной ссылкой срабатывает, НО! ... ... * * * Но вот в саму ссылку последнего примера пришлось всё-таки вставить идентификатор, указанный в начале этого подраздела. И ещё одно "НО"! Пример, в котором я прописал стиль через атрибут style, работает, НО только если не задавать в стилях цвета. Почему такое происходит?! Да и вообще! Чем, собственно говоря, особо отличается изменение цвета через стиль от изменения, скажем, размера через тот же стиль?! Однако же, подобная странность присутствует. Ну ... ... остаётся лишь учитывать эту особенность кода управляемой анимации. Учитывать(!), что далеко не все тэги подчиняются написанному коду такой анимации. Хватает и "своевольных".
Хорошо хоть, что самые простые и часто используемые форматирующие тэги: размер, жирность, курсив, и особенно тэг переноса <br> - его "слушаются".
Короче говоря, подобный тип анимации вполне можно использовать для создания не обычных, а управляемых, подвижных веб-элементов на страницах сайтов. Использование управляемой анимацииТочно так же, как и текстовой абзац, будет мигать любой амперсанд, или даже целая группа амперсандов, вставленная внутрь тэгов <span id="blink">...</span>. ✯ В показанном примере мигающего элемента - амперсанда ✯ я добавил в тэг <span> ещё и
стиль (размер и цвет) с помощью атрибута style. Получилось очень интересно. Элемент не только мигает, как ему "велит" регулятор, но и, хоть и на на короткое время, меняет свой цвет. Подробно о разных амперсандах здесь: "Амперсанды" (откроется в новом окне). * * * А ниже ещё один интересный пример совместного использования обычного текста и амперсанда. Это текст и амперсанд - ❃ Никаких дополнительных стилей в показанном примере я не добавлял. Достаточно было прописать в тэге абзаца требуемый идентификатор id="blink". * * * А вот если присвоить такой идентификатор, рисунку, то он мигать НЕ станет, согласно прописанному коду регулятора, т.к. этот код "заточен" под строковые объекты. Зато, можно добавить к нему какую-нибудь мерцающую подпись. Это рисунок-символ ➔ Видно, что рисунок, хоть он и находится в тэге абзаца с нужным идентификатором, и самому ему я вставил этот же идентификатор, реагировать не желает. В то же время, текстовая составляющая абзаца реагирует на имеющийся идентификатор как полагается. Текст рядом с рисунком мерцает с заданной частотой. И ещё два довольно интересных примера использования. Они сделаны по одной и той же схеме - с помощью тэгов <canvas></canvas>, вложенных в общий с обычными текстовыми буквами абзац. Схема простая. Буквы между тегами: <canvas>Т</canvas><canvas>Е</canvas> и т.д.. ТЕКСТ Всё об этих тэгах здесь: "Тэг CANVAS" (откроется в новом окне). * * * А ниже тот же самый пример, но с вставленным через атрибут style цветом (белым). ТЕКСТ И в этом примере всё работает вроде бы как должно: текст мигает, а рисунки, сделанные с помощью тэга <canvas> - нет. Но это и странно! Не то, что "не слушается" упомянутый тэг. Он из "своевольных". А то,
что цвет (белый), прописанный в тэге абзаца через атрибут style, работает!
Управляемая анимация работает! Хотя точно такое же действие с добавлением цвета в "чистый" текстовой абзац - приводило к её остановке!
вспомнить: Возможно, текстовые абзацы, "смешанные" с другими тэгами, ведут себя как-то иначе, чем такие же, но "чистые". А может, ещё в чём дело? ... ... Поэтому, закончу подраздел с примерами использования управляемой анимации теми же словами: интересная, необычная, использовать на страницах сайта можно, просто нужно учитывать некоторые её особенности. * * * *Prim. Управление сразу всеми показанными на этой странице примерами анимации, осуществляется
верхним регулятором. смотреть: Создание и настройка кода управления анимациейСначала несколько слов о создании регулятора анимации, т.е. о его HTML-коде, выводящим такой веб-элемент на страницу сайта. HTML-код регулятора анимацииРегуляторы создаются с помощью тэга <input>, указав ему тип: range, который скажет браузеру, чтобы он визуально отобразил названный веб-элемент. Так он выглядит ещё совсем пустой: Его уже можно двигать по экрану монитора (в пределах его зоны), но пока им ещё ничего нельзя отрегулировать, и чтобы такое стало возможным, необходимо добавить тэгу <input> идентификатор для связи с CSS и скриптом JavaScript для "оживления" этого элемента. Если тип тэга, выводящего регулятор на страницу, обязательно(!) должен быть именно таким, как показал выше, то идентификатор присваивается более-менее произвольно. Главное, чтобы самому не забыть, и не перепутать его имя, когда будем соединять его с управляющими кодами, т.е. прописывать стили и скрипт. Здесь я дал ему идентификатор: <input type="range" id="rangeReg">. Кроме уже сделанного, чтобы управлять анимацией, нужно обязательно(!) добавить в HTML-код регулятора ещё один элемент - специальный атрибут, запускающий функцию js-скрипта. Вот такой: onchange="onchangeReg();" Фактически, данный атрибут - это уже элемент JavaScript, прописанный напрямую в HTML-коде управляющего анимацией регулятора. Кроме него в создании регулятора анимации используются и другие атрибуты. Их видно ниже. Показал (и подчеркнул их) в следующей строчке: onchange="onchangeReg();" value="0" step="0.1" min="1" max="5" Подчёркнул их не просто так, а потому, что подчёркнутые атрибуты принимают участие в первичной настройке анимации: положение движка регулятора при загрузке страницы; "шаг" изменений её частоты; диапазона, в пределах которого частота будет меняться. Сейчас прописал ему value="0" (в начало). А, к примеру, поставив значение "2.5", т.е. половину от максимального значения (max="5"), движок регулятора будет отображаться ровно посередине. Но управлять им всё равно можно. И не хуже! Атрибут step отвечает за "шаг" изменений частоты анимации. Какое значение сейчас установлено - видно (плавно), а если, скажем, поставить step="1", то изменения будут происходить "рывками". Атрибуты min и max задают диапазон времени (здесь в секундах), в пределах которого мы сможем менять (с помощью регулятора) частоту анимации. Кстати! Минимальное время лучше всего ставить такое же, как пропишем в CSS. Я пробовал задавать min="0.5", при прописанном в CSS animation: 1s, что приводило к не совсем корректному результату.
Нет! Всё работало, но сдвинув движок регулятора в сторону увеличения, а потом вернув его обратно к началу, анимация начинала "мелькать" неестественно. Слишком быстро! *Вывод - коды HTML и CSS должны быть согласованы! Если уж в HTML прописано: минимально - 1 секунда, то и в CSS нужно указывать такое же значение. CSS-код регулятора анимацииИменно этот код запускает все анимированные примеры на данной странице сайта. CSS-код действующего регулятора анимации совсем небольшой - всего несколько строчек, но довольно необычный. Всё дело в том, как(?) реализовано исчезновение и появление объектов анимации. Впрочем, обо всём по порядку. За анимацию отвечает свойство CSS - animation: blink 1s linear infinite;, где мы и прописываем то, как она будет работать. Повторяющийся код дублирует основной так: -webkit-animation: blink 1s linear infinite;
Но это, впрочем, понятно и естественно. Главное - не торопиться, и не забывать об этом, т.е. о наличии дублирующих выражений. А необычность местного кода в том, как осуществляется смена кадров анимации, т.е. "фреймов". Применённый способ показываю и поясняю ниже.
@keyframes blink { ◄ здесь как обычно - подключаем фреймы Кстати! Именно в этой части кода задаётся цвет всех примеров. В приведённом CSS-коде подчеркнул, что меня особо заинтересовало: появление и исчезновение объектов происходит НЕ за счёт уменьшения их видимости, как это раньше делалось, т.е. через свойство CSS "opacity".
Подробности и примеры здесь: И здесь анимация работает за счёт смены цветовых моделей, т.е. в данном CSS-коде обычная для интернета цветовая модель "rgb" в процессе работы кода меняется на относительно новую модель "rgba" (поддерживающую прозрачность). Что это за цветовые модели, и какие существуют вообще? Подробная информация об этом в разделе "Полезное" (откроется в новом окне). Ну а здесь - продолжу. Меняя значения, прописанные в показанном правиле, будут меняться эффекты анимации. Можно сделать так, чтобы объекты плавно исчезали, и быстро появлялись. Или наоборот, чтобы они так же плавно и появлялись. Получится очень интересный эффект. Ещё, кроме этого, можно настроить "игру цвета", меняя цифровые значения первых 3-ёх чисел от 0 до 255 в коде цветовых моделей. И так далее, и тому подобное. *Prim. В коде rgba последняя цифра отвечает за прозрачность, где 0 - совсем не видно, а 1 - видно. Повторяться не буду, да и незачем, т.к. весь CSS-код анимации, думаю, достаточно подробно прокомментировал в исходном коде страницы.☚ А мерцающая "ручка-указатель", что я приделал к концу предыдущего предложения, это ещё один пример практического, совместного использования обычного текста и амперсанда. * * * Нередко вижу на различных сайтах подобные анимационные эффекты указателей. Они используются для привлечения внимания посетителя к какому-то важному объекту веб-страницы. JavaScript-код регулятораКстати! Без этого кода анимация, тем не менее, будет работать, но вот только управлять ею будет нельзя!
А для того, чтобы стало возможным управлять анимацией с помощью её регулятора, созданного в коде HTML, и добавляется небольшой JavaScript-код. Он соединяется с внутренней таблицей стилей CSS идентификатором <style id="mig">, а с помощью идентификатора <input id="rangeReg"> он одновременно соединяется и с HTML-кодом регулятора. Соединившись подобным образом с обоими объектами (стиль и HTML-код), скрипт начинает работать, т.е. может воздействовать на них. JavaScript работает по стандартной схеме: объект - событие - действие. Прописана целая цепочка свойств и методов, которые позволяют скрипту "оживить" местный регулятор анимации. Ради наглядности, я не стал убирать эти самые точки у показанных ниже свойств и методов. Здесь использовано свойство .innerHTML, которое даёт доступ к HTML-коду объекта. *Prim. Обычные свойства могут только давать информацию о коде, НО
не могут менять его. Это может! Далее к этому свойству подключается метод .replace(...);, в круглых скобках которого и прописано, что и как мы будем заменять. Вот так выглядит код подключённого метода замены. .replace(/\s\d*.\d*s\s/gi," " + document.getElementById('rangeReg').value + "s ");
И ещё одно важное дополнение к показанной части кода. JavaScript-код данного регулятора анимации содержит регулярное выражение в начале подключённого метода .replace(...); Вот оно, собственно, и определяет, какие(?) веб-элементы (тэги) будут принимать участие в анимации, а какие нет. Вообще, регулярные выражения - это целый мини-язык, и довольно-таки "путаный" из-за большого количества разных символов и правил их применения. Поэтому, не вижу смысла здесь, на текущей странице, пытаться объяснить назначение и действие каждого из символов, написанного в js-коде регулярного выражения. Всё узнать об этом можно на специальной странице. Информация о регулярных выражениях здесь: "Регулярные выражения" (в новом окне).
Храню их там вот в таком архиве ☛ Считаю, вполне достаточно показал и рассказал на данной странице о создании и использовании управляемой анимации. * * * Поскольку всё сказанное одинаково относится к трём веб-технологиям: HTML+CSS и JavaScript, то и переход в их разделы сделал прямой. Подведите курсор мыши к стрелкам мини-навигатора, появятся подсказки, куда они ведут. |
Все права защищены. Copyright © 2009 - Коротеев Владимир.