JavaScript Dynamics

Что такое JavaScript Dynamics?

Это одна из библиотек JavaScript. Конечно, она не такая ГЛОБАЛЬНАЯ, как давно известные библиотеки jQuery и jQuery UI (откроются в новом окне), но с её помощью можно быстрее создавать очень интересные эффекты анимации веб-элементов на страницах сайтов.

Собственно, для этого данная js-библиотека и предназначена. Да и название у неё, сами видите, вполне подходящее: "dynamics" (*англ.) - на русский язык можно перевести его как: динамичный, подвижный, изменяющийся, движущие силы, и так далее.

Cостоит из одного базового файла dynamics.js, в котором собрано несколько самых основных типов анимации, и управляющих скриптов (для каждого типа свой), где мы прописываем нужные нам параметры анимации.

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

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

Создание динамических примеров

Библиотека, то есть файл dynamics.js, находится в каталоге (папке) скриптов, и он должен быть подключён к каждой из страниц примеров, в каждой из которых, в свою очередь, должны быть прописаны: HTML-код веб-элемента, его стили CSS и управляющий js-скрипт.
Можно было бы и их (т.е. CSS и JS) тоже вынести в отдельные каталоги, но делать этого я не стал. Так гораздо проще было изучать. Всё на одной странице.

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

CSS в примерах

Считаю, так гораздо проще пользоваться динамикой элементов практически!

JavaScript в примерах

Управляющие JavaScript-коды примеров я сам не писал, а нашёл их на личном сайте их разработчика. Скачал, разобрался, и настроил, как мне хотелось.

Правда, разбираться пришлось много!  Даже можно сказать: очень много!

Дело в том, что скачанные мною коды библиотеки и управляющих скриптов были созданы с помощью языка программирования "CoffeeScript".

Что это?!

Это вроде бы и JavaScript, но что-то в нём не то, ... ... какой-то он странный.

Оказалось, что упомянутый "CoffeeScript" на самом деле является НЕ каким-то новым языком программирования, а так сказать, "улучшителем", оптимизатором JavaScript, и, якобы, позволяет писать более короткий код по сравнению с обычным.

Ну ... ..., так говорят о нём программисты в интернете. По крайней мере - некоторые.

Может быть. Не знаю. Мне он таким уж "улучшенным" не показался.   Возможно это из-за того, что за много лет обучения и тренировок я привык к обычному, нормальному JavaScript без всяких там "приправ и специй".
Тем более, что за последнее время обычный JavaScript очень сильно улучшился(!), и не требует каких-то "наворотов".

*Например(!), посмотрите раздел "Движущиеся рисунки" (в новом окне), где всё сделано совершенно БЕЗ каких-либо "наворотов".   JavaScript и только!

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

Ознакомиться с ними можете здесь:

*Prim. Нашёл и вложил в данный архив два отзыва разных веб-мастеров, причём, специально(!) подобрал абсолютно противоположные.

Ну, а я ... ... разобрался, что это за язык, зачем он, и ладно. Мне хватит!

* * *

Однако, продолжим! И уже сказанного о создании динамических примеров, конечно же, не достаточно, что нужно знать для настройки, и успешного использования всех возможностей библиотеки JavaScript Dynamics. Об остальном читайте дальше.

Основные параметры библиотеки Dynamics

В использованные для примеров js-коды я внёс много комментариев.
Думаю, что они способны, и очень хорошо помогут желающим разобраться с настройками основных параметров библиотеки Dynamics.

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

▼

type - тип анимации.  В библиотеке их несколько: dynamics.spring,  dynamics.bounce,              dynamics.gravity,  dynamics.bezier,  dynamics.linear,  dynamics.easeIn,  dynamics.easeOut,  dynamics.easeInOut,  dynamics.forceWithGravity, и каждая имеет свои особенности. Зачастую в одном коде применяют сразу несколько типов.
Интересно!  Изучая, я пробовал подставлять разные типы, т.е. один вместо другого в один и тот же код, не меняя значений. Получалось иногда очень интересно!

el - это DOM-элемент, объект JavaScript, или целый массив элементов, которые должны стать динамичными.

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

options - течение анимации от начала до её завершения, т.е. от 0 до 1.

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

duration - продолжительность анимации в миллисекундах.

frequency - частота колебаний элемента.

friction - разногласие. Работает типа "заморозки". Чем меньше значение, тем сильнее двигаются динамические элементы.

bounciness - прыжок, отскок, упругость. От английского слова "bounce" - подпрыгивать. Очень часто используется в управляющих кодах, связанных с библиотекой dynamics.js. Чем меньше значение, тем более плавный отскок.

complete - закончить, дополнить.   В нём можно указать имя функции, которая будет выполняться ПОСЛЕ завершения анимации. Таким образом, можно организовывать целую цепочку анимаций.

dynamics.stop(el) - останавливает анимацию, прописанную элементу.

dynamics.setTimeout(fn, delay)* - устанавливает задержку начала анимации.

dynamics.clearTimeout(id)* - отменяет задержку анимации, установленную ранее для элемента с указанным идентификатором (id).

** О методах setTimeout и clearTimeout ниже есть примечание. **

change - (опционально) вызывается на каждое изменение. Два аргумента помещаются в функцию function(el  progress).

fn - это "колбэк", т.е. функция обратного вызова. Возвращает уникальный ID.

points - массив точек и контрольных точек для типа анимации dynamics.bezier.

scale - масштаб, который устанавливается элементу в процессе анимации.

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

auticipationStrength - амплитуда колебаний, размах движений.

forceWithGravity - один из типов анимации. С английского переводится как: "сила с притяжением" или "сила с тяжестью".   Динамика этого типа похожа на "прыгающий мяч" или же на "отскок с подпрыгиванием". Зависит от настроек параметров.

elasticity - эластичность. Назначение понятно из перевода. Метод для настройки выше названного типа анимации.

**Примечание.   Dynamics.js имеет свой собственный setTimeout. Причина в том, что методы requestAnimationFrame и setTimeout по-разному ведут себя в разных браузерах. В большинстве из них requestAnimationFrame не будет работать в фоновом режиме (background tab), в то время как setTimeout - будет.

Автор скриптов библиотеки рекомендует использовать setTimeout и clearTimeout.

Как сделать динамику элементов проще

Показал Вам в этом большом 7-ми страничном разделе несколько примеров работы с библиотекой JavaScript Dynamics.
Как сам к ней отношусь, думаю, понятно. Использовать её практически - не собираюсь. Хотя изучать её и тренироваться было очень интересно!

Почему же не использовать?! Раз уж разобрался ... ... .
А вот почему.

Зачем(?!) нужна вся эта ГРОМАДА кодов, лишь бы заставить что-то двигаться.

То, что кодов всяких "выше крыши", видел любой, кто посмотрел исходный код страниц примеров. Он у меня открытый. Мне скрывать нечего. Пользуйтесь на здоровье!

Так вот, скажем, тот пример динамического элемента, что Вы видели, если заходили, в разделе "Загрузчик спиннер", содержит: 22 строчки HTML-кода, 25 строчек CSS, и аж 125(!) строчек JavaScript.

А это ведь ещё далеко не всё! Ещё сам файл, подключённый к каждой-каждой странице с примерами, библиотеки dynamics.js имеет 2082 строчки кода!

И это ещё не всё!

В каждом из примеров я убрал скрипт example.js длинной в 25 строчек js-кода.

▲         ▲         ▲         ▲         ▲

И всё это "громадьё" кодов ради того, чтобы сделать один-единственный элемент динамическим?!!

Можно же всё гораздо проще сделать. И уж совсем не обязательно ради этого "одевать штаны через голову".

Например, как вариант, скажем, можно сделать так.

Наведите курсор мыши на крутящиеся стрелки.

Хотите, чтобы снова стрелки закрутились? Кликните по значку, и быстро уберите курсор.

Вот и всё! А эффект, думаю, не хуже, а даже лучше. Хотя бы потому, что весь код его (без всяких ненужных подключений!) занял всего 5 строчек!

И весь этот js-код прописан как значения атрибутов "onmouseover" и "onclick" всего лишь в один-единственный HTML-тэг!

Использовать же его практически - "легче лёгкого". Для этого достаточно связать его с реальным загрузчиком.
И будет отображаться динамика во время загрузки, а значок "Готово" после.

* * *

Вот, собственно и всё о том, как сделать динамику элементов проще. Хочу лишь предупредить, что использовать всплывающие динамические элементы, пример которого Вы могли видеть в разделе "Меню", НЕ рекомендуется!

Ведь, фактически, это "popup", т.е. это веб-элемент, всплывающий самостоятельно, без ведома и желания пользователя. Подобные "трюки" очень не любят поисковые системы.

Да, и гораздо лучше, практичнее, применить "выпадающее меню".  Подобным сейчас пользуется большинство сайтов.
Его пример найдёте здесь: "jQuery Мега-меню" (откроется в новом окне).

Ну, а дальше - ещё кое-что, о чём непременно следует рассказать.

Проверка результатов сделанного

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

Такие есть у меня:   А в этот раз мне повезло, и удалось проверить всё и ещё на нескольких устройствах. Увиденное, т.е. результаты проверки, перед Вами.

Результаты проверки

Компьютер (мой главный) с О.С. Windows XP;  монитор 17″ - Всё отлично!

Нетбук "Assus" Eee Pc с О.С. Windows XP;  монитор 7″ - Хорошо! Только "Шарики" залезли вверх.↑

Планшет "Assus" с О.С. Android;  дисплей 10″ -   Работали только "Треугольники".

Смартфон "BQ" с О.С. Android;  дисплей 5″ -   Работали лишь "Треугольники".

Портативный PC "Casio Cassiopea" с О.С. Windows CE;  дисплей 3,8″ -   Вообще не сработало ничего(!), кроме моего примера с текущей страницы: как сделать динамику элементов проще. Видимо, у него уж очень "древняя" операционная система.

Зато удалось проверить всё ещё на двух устройствах.

Ноутбук "Accer" с О.С. Windows 10;  монитор 15,6″ - Хорошо! Но "Шарики" залезли вниз.↓

Смартфон "Apple" с О.С. iOS;  дисплей 6″ - Хорошо! Одни только "Шарики" залезли вверх.↑

*Prim.   Операционная система "iOS" - это упрощённая и оптимизированная для мобильных устройств версия "macOS".

* * *

Результаты проверки получились, сами видите, мягко говоря, не очень хорошие. Почти 43% электронных устройств признавать "библиотечные шедевры" не желали.
На всех устройствах исправно работал только один пример: "Треугольники".

Может быть дело в языке программирования, на котором был написан скрипт библиотеки, а может в ней самой. Не знаю. Разбираться в том, что не особо понравилось, как-то и не очень хотелось. Фиг с ней!

Тем более что пример, как сделать динамику элементов проще, показанный несколько выше, срабатывал везде!   вспомнить:

Правда, на устройствах с сенсорным экраном (без мышки): смартфонах, планшетах, было всё же довольно трудно уловить момент, когда оно распознаёт "наведение" на объект, а когда "клик".
Однако, после 5-ти минутного "общения" с ним, удавалось приспособиться к конкретному устройству, и проблем с просмотром на нём не возникало.

И ещё! Сходил на сайт автора скриптов библиотеки, чтобы проверить, как его страницы будут отображаться теми устройствами, которые у меня не желали показывать анимацию веб-элементов.
Подумал: "Может быть, такие результаты из-за того, что я убрал из кодов всех примеров скрипт example.js?".   Но - нет!

Результаты все абсолютно те же самые!

Ну ... ... ... осталось только подвести итоги.

Послесловие. Или - что есть что

Вот Вы и посмотрели, как работают скрипты библиотеки JavaScript Dynamics, если Ваше электронное устройство позволило это сделать, конечно.
Меня же, честно говоря, по-началу такое её название - "Dynamics" сбило с толку.

И это вовсе не случайно!

Ведь данное слово известно всем веб-мастерам, т.к. им называется CRM-система, созданная корпорацией Microsoft®.

Для посетителей, кто не в курсе, поясню.

Аббревиатура CRM происходит от английского выражения "Customer Relationship Management", которым называется прикладное программное обеспечение, предназначенное для автоматизации взаимодействия с заказчиками и клиентами.

Чтобы было понятнее, для чего эта система нужна и как всё работает, специально сделал в фотошоп коллаж из скриншотов 3-ёх экранов.

Вот он - реальный Dynamics!

* * *

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

Просто, автор библиотеки - некий программист из Нью-Йорка, дал ей название, говоря юридическим языком, "схожее до степени смешения".

Так, если CRM-система имеет большое практическое значение, то эту библиотеку, при наличии в ней огромного количества кодов и всего-то лишь ради возможности сделать какой-то элемент динамическим, трудно признать столь же полезной.

Ну ... ... разве что только для интересного обучения!   Использовать же её для веб-страниц практически - не вижу никакого смысла.

Впрочем, это, разумеется, моё собственное, личное мнение.

* * *

Кто всё же захочет задействовать на своём сайте "героиню повести" - библиотеку Dynamics, или же захочет поучиться, потренироваться, легко найдёт её в разделе "Полезное" (откроется в новом окне).
Я пометил её там миниатюрой 1-ого большого рисунка с этой, открытой сейчас страницы.

Ну, а действующие примеры Вы, надеюсь, посмотрели.

* * *

Нижний мини-навигатор вернёт Вас обратно на общую страницу "JavaScript".

ВВЕРХ