Создание анимированного компонента навигации на сайте

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

Подготовка

Основная часть работы выполняется в Vue.js, а для анимации используется TweenMax.

Не забудьте добавить эту ссылку для импорта иконок Font Awesome:

			<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
		

Начальная разметка

Начнём с HTML. Для этого компонента потребуются только контейнер и кнопки. Для кнопок будут использоваться иконки Font Awesome. Они немного отличаются от иконок в оригинальном примере, но это не страшно.

			<div id="app">
  <div class="btn-container">
    <div class="btn">
      <i class="fas fa-comment"></i>
    </div>
    <div class="btn">
      <i class="fas fa-user"></i>
    </div>
    <div class="btn">
      <i class="fas fa-map-marker"></i>
    </div>
    <div class="btn">
      <i class="fas fa-cog"></i>
    </div>
  </div>
</div>
		

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

Оформление

Задайте цвет фона в контейнере. Для начала пусть будет чёрный. В дальнейшем вы сможете изменить этот цвет. Используйте flex и justify-content для выравнивания элементов по горизонтали и отступы (padding) для выравнивания по вертикали.

			.btn-container {
  display: flex;
  background-color: black;
  
  /* вертикальное выравнивание по центру */
  padding-top: 150px;
  padding-bottom: 150px;
  /* горизонтальное выравнивание по центру */
  justify-content: center;
}
		

Расположите кнопки друг рядом с другом через тег inline-block.

Задайте размер кнопок, их содержимое и цвета по умолчанию. Затем придайте им круглую форму через border-radius и примените несколько правил для выравнивания:

			.btn {
  display: inline-block;
  cursor: pointer;
  width: 50px;
  height: 50px;
  margin: 5px;
  font-size: 25px;
  color: gray;
  
  /* круглая форма  */
  border-radius: 25px;
  background-color: white;

  /* центрирование иконок */
  text-align: center;
  line-height: 50px;
  
  /* для мобильной версии убирается подсветка синим при нажатии */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
		

Результат:

Поведение

В экземпляре Vue объявите данные, которые будут использоваться в компоненте. С помощью выбора цвета подберите цвета для кнопок и фона. Чтобы дальше в коде ссылаться на цвета, добавьте их в структуру экземпляра:

			new Vue({
  el: '#app',
  data: {
    buttons: [
      {icon: 'comment', bgColor: '#DE9B00', color: '#EDB205'},
      {icon: 'user', bgColor: '#3EAF6F', color: '#4BD389'},
      {icon: 'map-marker', bgColor: '#BE0031', color: '#E61753'},
      {icon: 'cog', bgColor: '#8E00AC', color: '#B32DD2'}
    ],
    selectedBgColor: '#DE9B00',
    selectedId: 0
  },
})
		

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

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

Цвет фона в коде уже привязан к стилю div в btn-container.

Обратите внимание, что в код добавлен обработчик @click . Он запускает функцию selectButton(). Кроме того, в коде присутствует атрибут ref, благодаря которому можно ссылаться на кнопки при создании их анимации.

Нажатие на кнопку

Для начала объявите метод selectButton() для экземпляра Vue:

			// ... данные,
  methods: {
    selectButton (id) {
      this.selectedId = id
    }
  }
		

Каждый раз при нажатии кнопки атрибут selectedId будет изменять своё значение в диапазоне от 0 до 3. Однако это никак не отразится на текущем компоненте.

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

После изменения selectedId потребуется возврат к исходному цвету элемента.

			// ... данные
 methods: {
    selectButton (id) {
      this.selectedId = id
      this.animateBgColor()
    },
    animateBgColor () {
      TweenMax.to(this, 0.2, {
        selectedBgColor: this.selectedButton.bgColor
      })
    }
  },
  computed: {
    selectedButton () {
      return this.buttons[this.selectedId]
    }
  }
		

Теперь при нажатии на кнопку меняется цвет фона.

Анимация кнопок

Анимировать кнопки не так уж просто. Для начала сохраните две ссылки: на уже выбранную (активную) кнопку и ту, которая будет выбираться далее.

Это делается через добавление $refs с индексом выбранной кнопки. Данный атрибут добавляется перед строкой, описывающей следующую кнопку:

			// ... данные
  methods: {
    selectButton (id) {
      const previousButton = this.$refs[`button_${this.selectedId}`]
      const nextButton = this.$refs[`button_${id}`]
      // ... остальной код
		

После того как вы пропишете ссылки, необходимо запустить несколько методов: 1) для деактивации предыдущей кнопки и 2) для активации следующей кнопки:

			// ... методы
    selectButton (id) {
      const previousButton = this.$refs[`button_${this.selectedId}`]
      const nextButton = this.$refs[`button_${id}`]
      
      this.selectedId = id
      this.animateBgColor()
      
      this.animateOut(previousButton)
      this.animateIn(nextButton)
    },
    animateIn (btn) {      
      // Для активации кнопки 
    },
    animateOut (btn) {
      // Для деактивации кнопки 
    }
		

Перед тем как садиться за написание кода, продумайте все детали анимации. Gif-анимацию кнопки можно разделить на две составляющие:

1. Цвет кнопки и иконки.
2. Ширина кнопки.

Переход цветов предельно прост. Если кнопка неактивна, то цвет фона — белый. При выборе кнопки цвет берётся из свойства color. Для иконки цвет меняется с серого на белый.

Интересный момент связан с анимацией ширины кнопки. При изменении своего состояния кнопка становится «эластичной», то есть либо сужается, либо растягивается.

Визуализатор GSAP позволяет подобрать наиболее точные цвета переходов.

Теперь добавьте код для методов animateIn() и animateOut():

			// ... методы
   animateIn (btn) {      
      // animate icon & bg color
      TweenMax.to(btn, 0.3, {
        backgroundColor: this.selectedButton.color,
        color: 'white'
      })
                  
      // анимация ширины кнопки
      TweenMax.to(btn, 0.7, {
        width: 100,
        ease: Elastic.easeOut.config(1, 0.5)
      })
    },
    animateOut (btn) {
      // анимация цвета иконки
      TweenMax.to(btn, 0.3, {
        backgroundColor: 'white',
        color: 'gray'
      })
      
      // анимация ширины кнопки
      TweenMax.to(btn, 0.7, {
        width: 50,
        ease: Elastic.easeOut.config(1, 0.5)
      })
    }
  },
		

Остался последний штрих. При запуске приложения все кнопки должны быть невыбранными. Это делается через вызов метода selectButton() внутри хука mounted():

			mounted () {
    // инициирование виджета
    this.selectButton(0)
  }
		

Готово! Конечный результат можно увидеть на CodePen.