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

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

Ключевые кадры Anime.js

Ключевые кадры - одна из наиболее продвинутых функций Anime.js. Если вы новичок в аниме, обязательно ознакомьтесь с моим вводным постом.

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

anime({
  targets: '#box',
  easing: 'linear',
  duration: 1000,
  translateX: [
    {
      value: 50,
    },
    {
      value: -50,
    },
  ],
});

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

translateX: [
  {
    value: 50, // <-- keyframe 1
  },
  {
    value: -50, // <-- keyframe 2
  }
],
  • В ключевом кадре 1 переместите рамку в положение 50px
  • В ключевом кадре 2 переместите рамку в положение -50px.

Мы можем использовать тот же принцип для создания анимации «встряхивания». Нам просто нужно больше ключевых кадров для создания эффекта:

  • ключевой кадр 1: переместите поле в -16px
  • ключевой кадр 2: переместите рамку на 16px
  • ключевой кадр 3: переместите рамку на -16/2 = -8px
  • ключевой кадр 4: переместите поле на 16/2 = 8px
  • ключевой кадр 5: переместите рамку на 0px

Реализуя его в JavaScript, мы получим:

const xMax = 16;
anime({
  targets: '#box',
  easing: 'easeInOutSine',
  duration: 550,
  translateX: [
    {
      value: xMax * -1,
    },
    {
      value: xMax,
    },
    {
      value: xMax/-2,
    },
    {
      value: xMax/2,
    },
    {
      value: 0
    }
  ],
});

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

Анимация формы входа

Теперь давайте создадим форму входа и применим нашу анимацию. Во-первых, давайте начнем с создания разметки. Мы собираемся загрузить Anime из CDN в тег head и добавить пустой тег script внизу:

Затем нам нужно написать немного CSS, чтобы форма выглядела красиво. Давайте добавим следующий CSS в тег style в разделе head:

И, наконец, давайте добавим наш JavaScript. Добавьте сценарий в конец разметки в теге script:

Обратите внимание, что в функции send мы вызываем метод restart, а не play, чтобы мы могли воспроизводить анимацию каждый раз, когда отправляем форму. Собрав все вместе, вы должны увидеть следующую анимацию:

Улучшение анимации

Теперь давайте улучшим нашу анимацию, изменив цвет формы и полей ввода, указывающих на ошибку:

В приведенном выше фрагменте мы добавили еще две анимации в массив colorAnims:

  • Первая анимация нацелена на свойство borderTopColor формы и изменяет его значение на #f7733f линейно в течение 500 мс.
  • Второй нацелен на свойство borderColor полей ввода в форме и переводит значения в #f7733f линейно в течение 500 мс.

После обновления кода вы должны увидеть следующую анимацию:

Заключение

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

Файлы проекта для этой статьи вместе с анимацией счетчика доступны на Github.