Как работать с анимацией в javascript с помощью anime.js

Animating Multiple Elements

Let’s look at another example and use more attributes to create an animation with multiple elements:


const boxesAnimation = anime({  targets: '.js-box',  translateX: (elm, index, t) => index * 50,  scale: 2,  easing: 'easeInOutSine',  delay: (elm, index, t) => index * 20,  duration: 1200,  loop: true,  direction: 'alternate',});

In the snippet above:

  • We are targeting all the elements on the page with the class
  • We are animating two css transform properties:
  • translateX: we are using a function to move each element depending on their index.
  • : move the first box amount
  • : move the second box, amount
  • : move the third box, amount
  • scale: we are scaling each element to 2 times their initial value (making each element twice as big)
  • We are setting the easing function to one of the predefined easing functions
  • We are defining a for each element to perform all the property transitions:
  • : delay the start of the animation for the first element by ms
  • : delay the start of the animation for the second element by ms
  • : delay the start of the animation for the third element by ms
  • We are defining the to be for each element’s set of transitions
  • We are also setting the animation to loop by setting
  • And with the attribute, we are telling Anime to alternate the animation direction, from to
  • Setting the to alternate practically makes the animation play forwards and backwards alternatively
  • The other possible values for direction are and

jQuery animate() — Manipulate Multiple Properties

Notice that multiple properties can be animated at the same time:

Example

$(«button»).click(function(){   $(«div»).animate({     left: ‘250px’,     opacity: ‘0.5’,     height: ‘150px’,     width: ‘150px’   }); }); 

Is it possible to manipulate ALL CSS properties with the animate() method? Yes, almost! However, there is one important thing to remember: all property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on. Also, color animation is not included in the core jQuery library. If you want to animate color, you need to download the Color Animations plugin from jQuery.com.

jQuery Animations — The animate() Method

The jQuery method is used to create custom animations.

Syntax:

$(selector).animate({params},speed,callback);

The required params parameter defines the CSS properties to be animated.

The optional speed parameter specifies the duration of the effect. It can take the following values: «slow», «fast», or milliseconds.

The optional callback parameter is a function to be executed after the animation completes.

The following example demonstrates a simple use of the method; it moves a <div> element to the right, until it has reached a left property of 250px:

Example

$(«button»).click(function(){   $(«div»).animate({left: ‘250px’}); }); 

By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!

Шаг 7. Построение нашего первого по-настоящему высококлассного эффекта

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

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

jQuery animate() — Uses Queue Functionality

By default, jQuery comes with queue functionality for animations.

This means that if you write multiple calls after each other, jQuery creates an «internal» queue with these method calls. Then it runs the animate calls ONE by ONE.

So, if you want to perform different animations after each other, we take advantage of the queue functionality:

Example 1

$(«button»).click(function(){   var div = $(«div»);   div.animate({height: ‘300px’, opacity: ‘0.4’}, «slow»);   div.animate({width: ‘300px’, opacity: ‘0.8’}, «slow»);   div.animate({height: ‘100px’, opacity: ‘0.4’}, «slow»);   div.animate({width: ‘100px’, opacity: ‘0.8’}, «slow»); }); 

The example below first moves the element to the right, and then increases the font size of the text:

Example 2

$(«button»).click(function(){   var div = $(«div»);   div.animate({left: ‘100px’}, «slow»);   div.animate({fontSize: ‘3em’}, «slow»); }); 

Какие инструменты нам понадобятся

Для работы нам понадобится библиотека jQuery (откуда её взять — расскажем чуть ниже).

Она используется на большинстве сайтов, потому что у неё много плюсов:

  • дружелюбный интерфейс;
  • она решает не только проблему анимаций, но и множество других;
  • работает на всех браузерах;
  • к ней много расширений и плагинов;
  • большое комьюнити (если у вас будут вопросы, то вы быстро найдёте на них ответы).

Сегодня мы будем работать в онлайн-редакторе CodePen. Для этого не придётся ничего устанавливать, достаточно перейти по ссылке CodePen и нажать на кнопку Start Coding. Если у вас уже есть любимый редактор, вы можете использовать его.


У вас откроется рабочее пространство с тремя колонками: HTML, CSS и JS (JavaScript):

Теперь нажмём шестерёнку возле JS — на экране появится окошко с настройками. Через строку поиска найдём там jQuery:

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

cssHook

Can be directly through the .css() method to set the Transform properties.

$(elem).css({ x'100px'});$(elem).css({ y'100%'});$(elem).css({ translate200,100});$(elem).css({ translate3d200,100,300});$(elem).css({ scale2});$(elem).css({ scaleX3});$(elem).css({ scaleZ2});$(elem).css({ scale3d2,1.5,4});$(elem).css({ rotate'30deg'});$(elem).css({ rotateX45});$(elem).css({ rotateY'1rad'});$(elem).css({ rotateZ90});$(elem).css({ rotate3d60,30,90});$(elem).css({ skewX'30deg'});$(elem).css({ skewY60});$(elem).css({ skew30,60});

Set perspective.

$(elem).css({'perspective'100});$(elem).css({'pers'100});

Read the attribute value.

$(elem).css({ x100}).css('x');$(elem).css({ x100, y200}).css('translate');$(elem).css({ scaleX3, scaleY3}).css('scale');$(elem).css({ scaleX3}).css('scale');

Support delete attributes.

$(elem).css({ translate'2, 5'});$(elem).css({ translate''});$(elem).css({ scale'2,3'}).css({ scaleX''});

Putting it All Together

Now let’s put what we have learned together and create the following animation:

First, we need to set the html markup for our page. The following snippet loads Anime.js, the essential CSS, and our JavaScript animation:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <link rel="stylesheet" href="/squares.css">  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>  <title>Anime Animation</title></head><body>  <div class="boxes">    <div class="boxes__inner">      <div class="box js-box"></div>      <div class="box js-box"></div>      <div class="box js-box"></div>      <div class="box js-box"></div>      <div class="box js-box"></div>      <div class="box js-box"></div>      <div class="box js-box"></div>      <div class="box js-box"></div>      <div class="box js-box"></div>      <div class="box js-box"></div>      <div class="box js-box"></div>    </div>  </div>  <script src="/squares.js"></script></body></html>

Then, we need to define a bunch of CSS to prepare the set for our animation. The most important part of this CSS is the selector. In this selector we are setting the height of the div to a fixed value, and also making the overflow hidden. Essentially this will make the boxes «appear» from the bottom of the outer div, resulting in a nice, smooth effect. The rest of the CSS is pretty self explanatory. We are basically setting a nice background color for the page and centering everything on the page.

CSS:

html, body {  padding: 0;  margin: 0;  background-color: #25275a;  width: 100%;  height: 100%;}.box {  width: 50px;  height: 150px;}.boxes {  display: flex;  align-items: center;  justify-content: center;  height: 100%;}.boxes__inner {  display: flex;  overflow: hidden;  height: 165px;}

JS

const boxesAnimation = window.anime({  targets: '.js-box',  translateY: ,  backgroundColor: (el, i, t) => {    const r = 58 + (i * 12);    const g = 35 + (i * 12);    const b = 220;    const color = `rgb(${r}, ${g}, ${b})`;    return color;  },  duration: 900,  easing: 'easeOutElastic',  elasticity: 500,  delay: (el, i, t) => i * 20,  loop: true,  direction: 'alternate',});

Now, let’s look at the JavaScript in more detail. In the JavaScript snippet above:

  • We are animating all the elements on the page with the class
  • We are animating two properties for each box:
  • : we are simply animating each box’s vertical position from 150 to 50. This makes each box appear from the bottom of the outer div to the top
  • : for the background color we are using a function and setting the color of each box differently:
  • : for the first box, the color is set to
  • : for the second box, the color is set to
  • : for the eleventh box, the color is set to
  • Essentially by using the function we are keeping blue component the same while gradually changing the red and the green components. This results in a nice gradient of color changing for each box over time
  • We are setting the duration of all the transitions for each box to 900ms
  • In addition, we are defining the easing function as one of the predefined easing functions, i.e.
  • We are also using the attribute to define how elastic we want transitions to be. The property is only valid for easing functions
  • The delay for each box’s animation is defined using a function:
  • : the first box’s transitions will start after ms delay
  • : the second box’s transitions will start after ms delay
  • : the eleventh box’s transitions will start after ms delay
  • The delay function essentially makes the animation interesting, causing each box to appear one after another with 20ms delay.
  • We are also looping the animation using the property
  • And finally we are making the animation loop forward and backwards using the property

Шаг 2. Использование встроенных эффектов

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

Прежде чем мы рассмотрим каждый из этих методов, вот общий формат для каждого метода:

JavaScript

$(«#element»).effect();

1 $(«#element»).effect(speed,callback);

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

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

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

Обратный вызов – это функция, которая исполняется, когда анимация закончена. Ее можно использовать, чтобы что-то сделать, выполнить вызов AJAX в фоновом режиме, обновить другую часть пользовательского интерфейса и так далее. Пределом служит только ваша фантазия.

Вот список функций, идущих в комплекте с jQuery:

show/hide (показать/скрыть)– методы показа и сокрытия элемента. В качестве параметров использует скорость и обратный вызов.

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

slideDown/slideUp (смещение вниз/смещение вверх)- говорит сам за себя. Меняет высоту элемента для создания скользящей анимации, позволяющей проявить или скрыть элемент.

slideToggle (скользящее переключение)- то же самое, что и метод переключения, за исключением того, что использует методы slideDown/slideUp для проявления или сокрытия элементов.

fadeIn/fadeOut (усиление/затухание)- меняет непрозрачность элемента, о котором идет речь, для создания эффекта постепенного изменения.

fadeTo – видоизменяет непрозрачность элемента идентично переданной величине. Очевидно, он использует дополнительный параметр непрозрачности, где 0 – абсолютная прозрачность, а 1 – полная непрозрачность.

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

Например, если вы хотите переключить только список элементов, которые имеют класс effect(эффект), ваш код будет выглядеть вот так:

JavaScript

$(«li»).toggle( $(this).hasClass(«effect») );

1 $(«li»).toggle($(this).hasClass(«effect»));

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

The future of Auto-Animate

The XD team has a lot of plans for Auto-Animate in the future, but first we want to see how designers actually use the new feature.

“We gave users a lot of other possibilities by shipping After Effects support around the same time as Auto-Animate, to hopefully supplement what they can’t achieve yet in XD,” Alex Poterek explains. “One of the things we hope to find out is what is and isn’t enough control, and when does it become too complicated and fail to reach the principles we set for XD when it comes to simplicity and performance.”

Watch this space for more updates in the future and check out 10 examples for using auto-animate to improve UX.

For more UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.

We asked Alex to share his top ‘do’s’ and don’ts’ for using Auto-Animate in Adobe XD:

The do’s

  • Manage your layers and groupings from the start.
  • Copy and paste assets instead of re-drawing them. Duplicate your artboards, and then manipulate the duplicate — this way you know your layer structure and layer names are going to be consistent.
  • Use symbols when they make sense. If you have something repeated across multiple artboards, and you know the layers inside the symbol won’t ever animate, then use a symbol. This way, if you need to make a minor change to static layers, you won’t have to update all artboards. Otherwise, if you do have to update manually, you might notice you missed one, and it will auto-animate the differences of the old static layers and the updated ones.
  • Play around with the easing options. They can give you completely different feelings. Adobe XD now includes new easing options like ‘Snap,’ ‘Wind,’ ‘Bounce,’ and each of these can really change the feel of your web animation.
  • Use animation distance to give the illusion of objects moving at different speeds.
  • Use timed transitions to string together a series of animations. If you want a series of effects to happen, then add a duplicate artboard between animations and set the transition to “time.” From there you can start a new animation automatically.

The don’ts

  • Don’t change the layer structure in one artboard but not the other.
  • Don’t go too long without testing your web animations in the preview window.

CSS Animation Properties

The following table lists the @keyframes rule and all the CSS animation properties:

Property Description
@keyframes Specifies the animation code
animation A shorthand property for setting all the animation properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration Specifies how long time an animation should take to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of the animation

Создаём простые анимации

Анимация первая

Давайте сделаем блок, который будет реагировать на клик. Для этого сначала определим div в окошке HTML.

Что такое div? Это тег, который группирует другие элементы HTML, объединяет несколько объектов — например, блок новостей. Сейчас у нас это будет просто квадрат. Назовём мы его box, а определим вот так:

Это всё, что нам сейчас нужно от окошка HTML, и мы можем перейти к следующему — CSS. В нём мы опишем, как же будет выглядеть наш div. Пусть это будет красный (red) квадрат со сторонами по 300 пикселей; для этого мы должны задать ширину (width) и высоту (height) такого размера.


Если вам больше нравятся голубые прямоугольники, то просто увеличьте ширину (или высоту) и измените цвет фона (background) на blue.

Теперь мы перейдём в столбик JS и анимируем наш div.

Сначала мы отметим для JavaScript, с каким именно блоком будем работать, а потом — при каком действии будет происходить анимация и какая:

  1. $(».box») ищет элемент с классом box;
  2. .on (‘click’, определяет, когда произойдёт анимация (в нашем случае — при клике);
  3. function () описывает саму анимацию — мы напишем эту функцию в фигурных скобках.

Важный момент: мы можем нажимать на один объект, а менять другой. Чтобы менять именно тот объект, на который мы кликаем, дальше в функции мы обозначим его как this.

Мы использовали функцию hide (спрятать), и теперь наш квадрат исчезнет, если на него кликнуть.

Есть ещё пара похожих функций: это slideUp () и fadeOut (). Во всех случаях наш объект исчезнет. В чём же разница?

Если мы используем slideUp, то наш квадрат как бы отъедет вверх, а если fadeOut, то выцветет настолько, что станет совсем прозрачным. Можно выбрать тот вариант, который вам нравится.

Чтобы регулировать время анимации, напишите его в скобках за функцией, вот так:

ПОМНИТЕ!

Время в JavaScript указывается в миллисекундах, так что 3000 — это на самом деле всего три секунды.

Анимация вторая

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

Например, мы хотим, чтобы при клике наш квадрат расплывался в прямоугольник с шириной 500 пикселей, при этом становился бледнее (в нашем случае — 0,3 от изначальной яркости), и чтобы всё это длилось четыре секунды.

Для этого в фигурных скобках за функцией мы зададим ширину (width) 500px, а непрозрачность (opacity) —.3. За фигурными скобками напишем время анимации.

Вот и всё!

Шаг 1. Основы jQuery

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

Обычная строка кода выглядит вот так:

JavaScript

$(DOM Element).something();

1 $(DOM Element).something();

Давайте рассмотрим каждую ее часть:

$ — сокращение от «объект jQuery». Используйте jQuery в случае, если вы берете другую рамку на той же самой странице, как здесь: jquery(DOM Element).something();

(DOM Element) – элемент, с которым вы что-то хотите сделать. Это один из тузов в рукаве jQuery. Здесь для получения одного из элементов можно использовать селекторы CSS. Любое объявление, которое работает в CSS-документе, может быть употреблено здесь. ID, классы, псевдоклассы — все, что хотите.

something() – то, что нужно сделать с полученным элементом. Это может быть все, что угодно – от скрывания элемента до AJAX-вызова к обработчику событий.

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


С этим читают