Как использовать Velocity для простого добавления анимации

  1. Что такое Velocity.js?
  2. Как мне использовать Velocity?
  3. Как мне запустить эту функцию?
  4. аргументы
  5. Значения свойств
  6. Что это за "ослабление" бизнеса?
  7. Цепной
  8. Вернуться к функциям
  9. Прокрутка страницы
  10. Аннулирование анимации
  11. Физическое движение
  12. Большой финал
  13. А теперь иди и сделай Интернет динамичным

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

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

Но как вы можете сделать это точно? Есть два способа добавить анимацию на сайт, с помощью CSS и JavaScript.

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

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

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

Что такое Velocity.js?

Нажмите на изображение, чтобы увидеть демо Velocity.js

Velocity - это бесплатная, легкая библиотека, которая позволяет легко добавлять анимацию на ваши сайты, начиная от самой простой анимации до самой сложной. Velocity превосходит все остальные библиотеки анимации, прост в использовании и имитирует синтаксис самой популярной библиотеки JavaScript, jQuery. Он также хорошо поддерживается всеми браузерами и устройствами и был принят крупными компаниями, такими как Uber а также WhatsApp ,

Скорость лучше всего использовать с jQuery, но это не обязательно. Что такое jQuery? jQuery - это библиотека JavaScript, предназначенная для упрощения выбора и управления HTML-элементами. Практически стало предполагаться, что jQuery используется в большинстве веб-проектов - это так популярно.

У jQuery есть свои собственные инструменты анимации, предоставляемые через функцию «animate», но из-за монолитности jQuery он генерирует прерывистую анимацию. Он также не так богат, как Velocity. Скорость позволяет вам использовать возможности выбора элементов jQuery и пропустить недостатки анимации jQuery. Разница, особенно в создании простого анимационного рабочего процесса, заключается в том, что днем ​​и ночью.

Velocity предлагает некоторые большие преимущества по сравнению с анимациями на основе CSS и jQuery, о которых я расскажу после того, как мы изучим основы его использования. Чтобы дать вам представление о том, что будет дальше, эти преимущества включают прокрутку анимации, изменение анимации, движение на основе физики и создание цепочки анимации. Некоторые классные вещи.

А сейчас давайте начнем с того, как его использовать.

Как мне использовать Velocity?

Первый шаг - загрузить код с Веб-сайт Velocity (скопируйте и вставьте код в текстовый редактор и сохраните его как «speed.min.js»). Кроме того, вы можете вставить его прямо в ваш HTML (как показано в примере кода ниже).

В любом случае, включите файл Velocity, используя тег <script> перед закрывающим тегом body вашего документа, и перед тем, как в JavaScript-файле вы будете кодировать («script.js»):

<html> <head>… </ head> <body>… <script src = "// code.jquery.com/jquery-2.1.1.min.js"> </ script> <script src = "// cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js "> </ script> <script src =" script.js "> </ script> </ body> </ html>

Примечание . Если вы используете jQuery, убедитесь, что вы включили jQuery перед Velocity. Скорость адаптируется, учитывая наличие jQuery.

Как только код будет включен в тег script, вы можете начать использовать функцию speed () в файле «script.js».

Как мне запустить эту функцию?

Вы используете функцию Velocity для элемента jQuery (при условии, что вы используете jQuery). Например, скажем, у вас есть следующий абзац, который вы хотите анимировать:

<p id = "example"> Это пример элемента, который вы можете выбрать и анимировать. </ Р>

Мы можем выбрать его с помощью jQuery с идентификатором абзаца («пример») и сохранить в переменной:

var $ element = $ ("# пример");

Это создает объект элемента jQuery с именем $ element, который представляет этот абзац. Теперь мы можем запускать вызовы скоростных функций для этого элемента, используя эту переменную $ element:

$ element.velocity (… какая-то команда здесь…);

Итак, какие аргументы он принимает?

аргументы

Скорость принимает один или несколько аргументов. Первый аргумент обязателен. Это может быть имя одного из предопределенные команды (примеры для подражания) или объект с различными свойствами CSS, который должен быть анимированным.

// Объект, определяющий конечные значения анимации width (50%) и left (500px) $ element.velocity ({width: "500px", left: "500px"});

Примечание. Порядок свойств в объекте данных не имеет значения. Все в анимации происходит в одно и то же время.

Второй аргумент, который является необязательным, также является объектом. Он содержит параметры анимации, такие как продолжительность, замедление, задержка и завершение (функция, которая выполняется после завершения анимации):

// Анимация элемента шириной 300 пикселей через 500 мс после задержки 1000 мс. $ element.velocity ({ширина: "300 пикселей"}, {продолжительность 500, задержка: 1000});

В отличие от CSS, где вы можете передать несколько числовых значений в такое свойство CSS, как margin ( margin: «10px 5px 8px 12px» ), в Velocity вы должны использовать одно значение для каждого свойства CSS. Поэтому вы должны установить каждый компонент отдельно: {marginRight: «10px», marginTop: «5px»…} .

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

Примечание. Свойства CSS, содержащие несколько слов ( margin-left и background-color ), нельзя переносить, но они должны быть написаны с использованием camelcase ( marginLeft и backgroundColor ).

Значения свойств

Если вы не предоставите тип единицы измерения, Velocity примет ее за вас (обычно это ms, px и deg). Тем не менее, я бы порекомендовал быть явным, чтобы вы могли сразу различать типы модулей, когда вы или ваш коллега оглядываетесь назад в своем коде. Если значение содержит что-либо, кроме числового значения (% или букв), то вы должны использовать кавычки.

// Хорошо, только числовое значение $ element.velocity ("scroll", {duration: 500}) // Хорошо, используются кавычки $ element.velocity ("scroll", {duration: "500ms"}) // Не все в порядке, содержит "ms" без кавычек $ element.velocity ("scroll", {duration: 500ms})

Что это за "ослабление" бизнеса?

До сих пор я использовал слово «ослабление» несколько раз, и, возможно, вы не понимаете, что это значит. Послабления определяют скорость анимации на разных этапах на протяжении всей ее продолжительности. Например, замедление «замедления» постепенно ускоряется в начале анимации и затем остается постоянным до его окончания. Замедление «замедления» начинается с линейной скорости и постепенно замедляется в конце анимации. «Линейное» ослабление имеет постоянную скорость на протяжении всей продолжительности и выглядит очень резким и роботизированным.

Удобно, вы указываете замедление с опцией «ослабление»:

// Анимация элемента на ширину 500 пикселей с замедлением "easy-in-out" $ element.velocity ({width: 500}, {easing: "ease-in-out"});

Упрощения становятся намного сложнее, но ради краткости я на этом остановлюсь. Читать скорость документация для дополнительной информации.

Цепной

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

Velocity обеспечивает простое связывание анимаций одна за другой, просто вызывая функцию скорости одна за другой:

$ element // Анимирует элемент на высоту 300px за 1000 мс .velocity ({height: 300}, {duration: 1000}) // Анимирует элемент в левую позицию на 200px через 600 мс после того, как ширина закончила анимацию .velocity ({top: 200}, {duration: 600}) // Исчезает элемент более чем на 200 мс после его завершения, перемещая .velocity ({opacity: 0}, {duration: 200});

Вот пример Codepen для цепочки.

Примечание: вы заметите, что только последний скоростной вызов имеет «;» в конце строки. Это чрезвычайно важно. Чтобы связать воедино анимацию, все вызовы «speed» должны выполняться вместе для одного и того же элемента, и вы не можете завершить командную строку, используя точку с запятой. JavaScript игнорирует пробелы, поэтому эти вызовы выглядят так: $ element.velocity (...). Speed ​​(...). Speed ​​(...) .

Вернуться к функциям

Это должно дать вам взгляд на скорость и как ее использовать. Теперь, когда вы не будете перегружены, давайте вернемся к описанию тех классных преимуществ, которые он предоставляет по сравнению с CSS и jQuery.

Прокрутка страницы

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

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

Чтобы выполнить прокрутку с помощью Velocity, просто запустите функцию «speed» с командой «scroll» для элемента, к которому вы хотите перейти:

$ element.velocity ("scroll", {duration: 1200});

Этот вызов заставляет браузер прокручиваться вниз к верхнему краю выбранного элемента в течение 1200 мс. С одним jQuery это было бы намного более сложной, многострочной функцией. Я избавлю вас от головной боли, вызванной растерянностью, не включив ее здесь.

Вот пример прокрутки Codepen.

Аннулирование анимации

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

С помощью jQuery:

// Анимация элемента высотой 100px на высоту 200px свыше 500 мс $ element.animate ({height: "200px"}, {duration: 500}); // Анимация элемента обратно к его первоначальному значению высоты 100px более 500 мс $ element.animate ({height: "100px"}, {duration: 500});

Однако с Velocity вам просто нужно выполнить обратную команду:

// Анимация элемента высотой 100px на высоту 200px свыше 500 мс $ element.velocity ({height: "200px"}, {duration: 500}); // Реверсировать предыдущую анимацию - анимировать обратно на исходную высоту 100 пикселей за 500 мс $ element.velocity ("reverse");

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

Вот пример Codepen обращения анимации.

Физическое движение

Реальный мир не идеален или не гладок - ни движение реального мира. Он имеет быстрые части, медленные части, вес, импульс и трение. В отличие от CSS, вы можете имитировать физику реального мира в ваших анимациях на основе JS, делая вещи более естественными. Линейные движения выглядят роботизированными (безжизненными) и дребезжащими.

Чтобы обеспечить реалистичное движение, Velocity принимает замедление, основанное на физике пружины. Этот тип замедления принимает в качестве параметра массив значений натяжения (по умолчанию: 500) и значения трения (по умолчанию: 20) (см. Скоростная документация для дополнительной информации).

// Анимация выбранного элемента на высоту 200 пикселей по умолчанию 400 мс с использованием пружинного замедления. Натяжение пружины установлено на 250, а трение установлено на 10. $ element.velocity ({height: "200px", {easing: [250, 10]});

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

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

Вот пример Codepen, использующий физику весны.

Большой финал

Хорошо, может быть, вам нужна пара примеров реальных анимаций и команд Velocity. Давайте начнем с анимации ширины и высоты блока, комбинируя как цепочку, так и анимацию, и давайте использовать следующий элемент блока:

<div id = "box"> </ div>

Со следующим стилем CSS:

#box {width: 100px; // Установить ширину блока в 100px height: 100px; // Устанавливаем высоту рамки в 100px border: solid 1px # 000; // Придаем прямоугольнику сплошную черную рамку размером 1 пиксель, чтобы сделать ее видимой}

Вы можете анимировать его ширину, затем высоту, а затем вернуть ее обратно к исходным размерам с помощью следующих вызовов скорости:

// Выбираем элемент box по ID $ ("# box") // Анимация на ширину 200px за 500 мс .velocity ({width: 200px}, {duration: 500}) // Анимация на высоту 50px за 300 мс сразу после того, как ширина перестает анимировать .velocity ({height: 50px}, {duration: 300}) // Анимация обратно к исходной ширине и высоте после прекращения анимации по высоте .velocity («reverse»);

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

Скажем, у вас есть следующие навигационная панель и разделы страницы:

<nav> <a class="nav-link" href="#product"> Продукт </a> ... <a class="nav-link" href="#about"> О программе </a> </ nav> <div id = "# product">… </ div> ... <div id = "# about"> ... </ div>

Мы хотим добавить анимацию прокрутки к каждому событию щелчка навигационной ссылки (класс «nav-link»), что приведет к прокрутке страницы до соответствующего раздела страницы, идентификатор которого содержится в href ссылки.

// Прикрепить событие click к классу nav-link $ (". Nav-link"). On ("click", function () {// Получить идентификатор раздела целевой страницы из ссылки (содержащейся в "this") ") атрибут href var scrollTargetID = $ (this) .attr (" href "); // Выбрать этот элемент по идентификатору с помощью jQuery var $ scrollTarget = $ (scrollTargetID); // Добавить анимацию прокрутки к элементу $ scrollTarget.velocity ("прокрутка", {duration: 1000});});

Есть пара примеров того, как использовать скорость на реальных элементах страницы, для большего количества примеров, проверьте Документация Velocity ,

А теперь иди и сделай Интернет динамичным

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

Улучшение и расширение CSS-анимации ограничено редкими обновлениями стандарта CSS. С помощью JavaScript сообщество open-source каждый день выпускает десятки новых библиотек, плагинов и обновлений, расширяя горизонты вашей анимации с помощью изобретения новых инструментов.

Velocity имеет гораздо больше возможностей, чем показано здесь, и я призываю вас проверить его документация , Теперь иди эксперимент!

Слова : Нил О'Грэйди

Нил О'Грэйди - ирландско-канадский внештатный веб-разработчик, дизайнер и писатель. Он написан на темы дизайна для Блог Webflow и по случайным мыслям личный блог ,

Как это? Прочитайте это!

Js?
Как мне использовать Velocity?
Как мне запустить эту функцию?
Но как вы можете сделать это точно?
Js?
Что такое jQuery?
Как мне использовать Velocity?
Как мне запустить эту функцию?