Библиотека Webix предлагает множество вариантов создания пользовательского интерфейса, при этом анимация используется минимально. Мы запросто можем это исправить. Давайте посмотрим, как можно добавить симпатичные анимационные эффекты для различных контролов Webix.
Carousel, MultiView, TabView
TabView — это один из тех двух компонентов библиотеки, которые имеют встроенную анимацию. Когда вы переключаетесь между табами, смена активного таба происходит с анимацией. Для ее настройки вы можете использовать свойство animate.
Accordion
Если рассматривать Accordion, то при сворачивании и разворачивании панелей, расположение элементов изменяется мгновенно. В большинстве случаев такое поведение вполне приемлемо, но это не самый удобный вариант, поскольку такая быстрая перестройка интерфейса может запутать пользователя. Давайте применим анимацию для изменения высоты и ширины элементов виджета, что добавит приятный переходной эффект.
transition:width 0.5s;
}
.webix_accordionitem.vertical{
transition:height 0.5s;
}
Tree
В виджете Tree анимация будет применяться для раскрытия веток. В этом случае анимация даст пользователю визуальную подсказку и повысит общее удобство пользования.
Несмотря на то, что на первый взгляд такая модификация кажется простой, на самом деле, она требует наиболее сложного решения из всех здесь описанных. Для начала, нам необходимо добавить стиль перехода:
transition:height 0.3s;
overflow:hidden;
}
После этого добавим код обработки событий открытия и закрытия ветки. Он заменит существующую логику перерисовки красивой анимацией. Подобно тому, как анимация применяется к отдельному элементу аккордиона, ее можно применить для каждого дерева отдельно. Кроме того, вы можете создать новый элемент со своим поведением. Давайте попробуем применить способ, при котором анимация применяется к отдельному дереву:
view:"tree",
select:true,
data:tree_data,
on:{
onAfterOpen:function(id){
var node = this.getItemNode(id);
var height = node.nextSibling.offsetHeight;
node.nextSibling.style.height = "1px";
webix.delay(function(){
node.nextSibling.style.height = height+"px";
});
},
onBeforeClose:function(id){
if (this._in_animation){
this._in_animation = false;
return true;
}
var node = this.getItemNode(id);
node.nextSibling.style.height = "1px";
webix.delay(function(){ this.close(id); }, this,[],300);
this._in_animation = true;
return false;
},
}
})
Многовато кода для таких простых задач, но способа получше, к сожалению, мы еще не придумали.
В обработчике onAfterOpen мы устанавливаем начальную высоту, которая преобразуется в фактическую высоту после небольшой задержки. Это нужно для запуска анимации.
В обработчике onBeforeClose мы блокируем операцию перерисовки, которая была задана по умолчанию. Чтобы инициировать анимацию, изменим высоту ветки. После некоторой задержки код вызывает метод close во второй раз для перерисовки закрытой ветки.
Window
Виджет Window частично подерживает анимацию по умолчанию. Если используется свойство position:top, окно будет плавно спускаться из верхней части браузера.
Вы можете добавить свои анимационные эффекты с помощью событий onShow и onHide. Кроме того, можно прикрепить собственные обработчики для каждого окна отдельно или создать пользовательский класс окон с желаемой анимацией.
name:"ani-window",
$init:function(){
this.$ready.push(function(){
this.attachEvent("onShow", function(){
this.attachEvent("onShow", function(){
var base = this.$view.className.split("animated")[0];
this.$view.className = base + " animated fadeInUp";
})
})
this.attachEvent("onHide", function(){
this.$view.style.display = "block";
this.$view.className += " animated rollOut";
})
});
}
}, webix.ui.window);
Данный код создает новый контрол “ani-window”, который работает так же, как и обычное окно, но появляется и исчезает с красивой анимацией. Вы можете посмотреть на него в демо ниже.
CSS классы fadeinUp и rollOut взяты из animate.css — одной из бесплатных анимационных библиотек. Вы можете использовать любой другой анимационный стиль, который поддерживается библиотекой animate.css: fading, rolling, bouncing и т.д.
Обратите внимание: для добавления анимации вам нужно подключить на страницу файл animate.css.
Button
Трюк с animate.css также можно применить и к кнопкам:
webix.html.addCss( $$("add_button").$view, " animated bounce" );
setTimeout(function(){
webix.html.removeCss( $$("add_button").$view, " animated bounce" );
},1000);
}}
В данном коде задается кнопка, которая будет анимироваться по клику. Команда addCss добавляет стиль анимации, а команда removeCss удаляет этот стиль, чтобы кнопка была готова к следующему клику и новому запуску анимации.
Code of demoАнимация данных и виджетов
Вы можете использовать animate.css для того, чтобы добавить анимацию для любого виджета Webix. Чтобы анимировать весь виджет, вы можете использовать свойство $view, как и в примере с кнопкой.
webix.html.addCss( $$("tree").$view , "animated swing");
}}
Если вам нужно анимировать отдельный элемент компонента, вы можете использовать сочетание getItemNode и addCss API:
webix.html.addCss( $$("tree").getItemNode(1) , "animated flash");
}}
или метод addRowCss:
$$("grid").addRowCss(2,"animated flash");
}}
Примеры с анимацией всего виджета встречаются редко. В то же время, анимация отдельных элементов может применяться для привлечения внимания пользователей к тому или иному элементу.
Code of demoЧто еще интересного можно сделать
Приведенные выше примеры иллюстрируют большинство возможных сценариев использования анимации, которые вы можете встретить в реальных приложениях. Даже если вы захотите использовать другие сценарии, описанные техники можно адаптировать почти для любого из них. Вы можете использовать подклассы и обработчики событий, чтобы задать новое поведение, а также использовать animate.css, effect.css или любую другую анимационную CSS библиотеку для создания анимации.
Если у вас есть какие-либо дополнения к моему посту, или же вы столкнулись с проблемами при работе с выше описанными техниками, смело пишите об этом в комментариях.
