В данной статье вы научитесь создавать навигационную панель с анимированными кнопками-иконками. Вдохновением послужил этот пример. Конечный результат:
Подготовка
Основная часть работы выполняется в 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 id="app">
<div class="btn-container" :style="{'backgroundColor': selectedBgColor}">
<div v-for="(button, index) in buttons"
:key="index"
@click="selectButton(index)"
:ref="`button_${index}`"
class="btn">
<i :class="['fas', `fa-${button.icon}`]"></i>
</div>
</div>
</div>
Цвет фона в коде уже привязан к стилю 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-анимацию кнопки можно разделить на две составляющие:
- Цвет кнопки и иконки.
- Ширина кнопки.
Переход цветов предельно прост. Если кнопка неактивна, то цвет фона — белый. При выборе кнопки цвет берётся из свойства 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.
