Управляемая анимация

Примеры управляемой анимации

На этой странице показываю интересные примеры управляемой анимации, сделанные с помощью HTML+CSS и всего одной функции скрипта JavaScript.
Самое интересное в них то, что пользователю даётся возможность самому управлять частотой анимации с помощью регулятора.

регулятор анимации

*Пример управляемой анимации*

Сдвигая ползунок регулятора вправо, частота анимации будет уменьшаться, а возвращая его обратно, т.е. влево, скорость снова увеличится.

*Prim.  Занимаясь созданием данного примера управляемой анимации, дал абзацу с этим примером идентификатор id="blink"  (*англ. - мерцать, моргать, мигать).

Присвоив используемый идентификатор любому блоку с текстом, он станет мигать, как прописано в коде регулятора анимации.

ОДНАКО, есть и ОГРАНИЧЕНИЯ!

Мигающие текстовые абзацы

Почти все примеры текстовых абзацев упомянутого идентификатора НЕ ИМЕЮТ! Зато, он дан блоку из тэгов <div>...</div>, в котором они находятся. Таким образом, я испытывал возможности кода.

* * *

* * *

Но вот в саму ссылку последнего примера пришлось всё-таки вставить идентификатор, указанный в начале этого подраздела.

И ещё одно "НО"!

Пример, в котором я прописал стиль через атрибут style, работает, НО только если не задавать в стилях цвета.
Стоит добавить в стилях хоть какой-нибудь цвет, как анимация перестаёт работать!

Почему такое происходит?!
Честно говоря, так толком и не понял.  Тем более, что в следующем подразделе подобное действие (с заданием цвета) не вызывает никаких странностей.

Да и вообще! Чем, собственно говоря, особо отличается изменение цвета через стиль от изменения, скажем, размера через тот же стиль?!   Да - ничем!

Однако же, подобная странность присутствует.  Ну ... ... остаётся лишь учитывать эту особенность кода управляемой анимации.

Учитывать(!), что далеко не все тэги подчиняются написанному коду такой анимации. Хватает и "своевольных".

Хорошо хоть, что самые простые и часто используемые форматирующие тэги: размер, жирность, курсив, и особенно тэг переноса <br> - его "слушаются".

Короче говоря, подобный тип анимации вполне можно использовать для создания не обычных, а управляемых, подвижных веб-элементов на страницах сайтов.

Использование управляемой анимации

Точно так же, как и текстовой абзац, будет мигать любой амперсанд, или даже целая группа амперсандов, вставленная внутрь тэгов <span id="blink">...</span>.

✯

В показанном примере мигающего элемента - амперсанда &#10031; я добавил в тэг <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;, где мы и прописываем то, как она будет работать.
И, к месту будет сказать, 50% кода CSS написано для того, чтобы его понимали разные браузеры, т.е. он просто-напросто повторяется.

Повторяющийся код дублирует основной так: -webkit-animation: blink 1s linear infinite;

Поэтому, чтобы внести в работу кода анимации какие-либо изменения, нужно менять значения в обоих выражениях: и в основном, и в дублирующем.

Но это, впрочем, понятно и естественно. Главное - не торопиться, и не забывать об этом, т.е. о наличии дублирующих выражений.

А необычность местного кода в том, как осуществляется смена кадров анимации, т.е. "фреймов".  Применённый способ показываю и поясняю ниже.

@keyframes blink {   ◄ здесь как обычно - подключаем фреймы
50% {color: rgb(34, 34, 34);}   ◄ это цветовая модель RGB - объект ВИДЕН
51% {color: rgba(34, 34, 34, 0);}   ◄ а это уже модель RGBA - объект прозрачен, т.е. НЕ виден
100% {color: rgba(34, 34, 34, 0);}   ◄ это тоже модель RGBA - объект НЕ виден
}

Кстати! Именно в этой части кода задаётся цвет всех примеров.

В приведённом CSS-коде подчеркнул, что меня особо заинтересовало: появление и исчезновение объектов происходит НЕ за счёт уменьшения их видимости, как это раньше делалось, т.е. через свойство CSS "opacity".   Подробности и примеры здесь:

И здесь анимация работает за счёт смены цветовых моделей, т.е. в данном CSS-коде обычная для интернета цветовая модель "rgb" в процессе работы кода меняется на относительно новую модель "rgba" (поддерживающую прозрачность).

Что это за цветовые модели, и какие существуют вообще?

Подробная информация об этом в разделе "Полезное" (откроется в новом окне).

Ну а здесь - продолжу.

Меняя значения, прописанные в показанном правиле, будут меняться эффекты анимации. Можно сделать так, чтобы объекты плавно исчезали, и быстро появлялись. Или наоборот, чтобы они так же плавно и появлялись. Получится очень интересный эффект. Ещё, кроме этого, можно настроить "игру цвета", меняя цифровые значения первых 3-ёх чисел от 0 до 255 в коде цветовых моделей.   И так далее, и тому подобное.

*Prim.  В коде rgba последняя цифра отвечает за прозрачность, где 0 - совсем не видно, а 1 - видно.
Промежуточные значения указываются через точку. Пример - 0.5 (полупрозрачно).
*Ссылку на подробную информацию дал выше.*

Повторяться не буду, да и незачем, т.к. весь CSS-код анимации, думаю, достаточно подробно прокомментировал в исходном коде страницы.☚

А мерцающая "ручка-указатель", что я приделал к концу предыдущего предложения, это ещё один пример практического, совместного использования обычного текста и амперсанда.
Только теперь известный идентификатор присвоил лишь амперсанду через тэг <span>, добавив в него атрибут style, где прописал размер и цвет мерцающего элемента.

* * *

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

JavaScript-код регулятора

Кстати!  Без этого кода анимация, тем не менее, будет работать, но вот только управлять ею будет нельзя!

А для того, чтобы стало возможным управлять анимацией с помощью её регулятора, созданного в коде HTML, и добавляется небольшой JavaScript-код.

Он соединяется с внутренней таблицей стилей CSS идентификатором <style id="mig">, а с помощью идентификатора <input id="rangeReg"> он одновременно соединяется и с HTML-кодом регулятора. Соединившись подобным образом с обоими объектами (стиль и HTML-код), скрипт начинает работать, т.е. может воздействовать на них.

JavaScript работает по стандартной схеме: объект - событие - действие.

Прописана целая цепочка свойств и методов, которые позволяют скрипту "оживить" местный регулятор анимации.
*Prim.  Длина "цепочки" ничем не ограничивается. Она может быть любой! А "звенья" цепочки подключаются друг к другу точкой - .

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

Здесь использовано свойство .innerHTML, которое даёт доступ к HTML-коду объекта. *Prim.  Обычные свойства могут только давать информацию о коде, НО не могут менять его.  Это может!
Оно даёт доступ к HTML-коду объекта со всеми его "дочерними" элементами.

Далее к этому свойству подключается метод .replace(...);, в круглых скобках которого и прописано, что и как мы будем заменять.

Вот так выглядит код подключённого метода замены.

.replace(/\s\d*.\d*s\s/gi," " + document.getElementById('rangeReg').value + "s ");

Важно!  В последней части кода: .value + "s "); пробел после символа "s " перед закрывающей верхней кавычкой ОБЯЗАТЕЛЕН!   А иначе, после сдвига ползунка регулятора, анимация перестанет работать!

И ещё одно важное дополнение к показанной части кода.

JavaScript-код данного регулятора анимации содержит регулярное выражение в начале подключённого метода .replace(...);  Вот оно, собственно, и определяет, какие(?) веб-элементы (тэги) будут принимать участие в анимации, а какие нет.

Вообще, регулярные выражения - это целый мини-язык, и довольно-таки "путаный" из-за большого количества разных символов и правил их применения.

Поэтому, не вижу смысла здесь, на текущей странице, пытаться объяснить назначение и действие каждого из символов, написанного в js-коде регулярного выражения.

Всё узнать об этом можно на специальной странице.

Информация о регулярных выражениях здесь: "Регулярные выражения" (в новом окне).

Кстати!  На странице, на которую дал ссылку, можно не только увидеть действующий код, и посмотреть, как работают(?) простые регулярные выражения, но главное - скачать подробное пособие и шпаргалку по составлению и использованию регулярных выражений.

Храню их там вот в таком архиве ☛

Считаю, вполне достаточно показал и рассказал на данной странице о создании и использовании управляемой анимации.

* * *

Поскольку всё сказанное одинаково относится к трём веб-технологиям: HTML+CSS и JavaScript, то и переход в их разделы сделал прямой. Подведите курсор мыши к стрелкам мини-навигатора, появятся подсказки, куда они ведут.

ВВЕРХ