Анимация

Настройка анимации

Анимация используется в компонентах multiview и pager. Она определяет то, как визуально будут отображаться изменения при переключении компонентов или страниц.

Существует два типа анимации, а также подтипы:

• slide - в, из, оба направдения
• flip - горизонтальная, вертикальная

Или же вы можете выбрать одна из направлений анимации:

• direction - влево, вправо, вверх, вниз

Анимация в Multiview и Pager

Multiview использует анимация slide:"together" по умолчанию.

Вы также можете отключить анимацию:

{view:"multiview", animate:false }

Как включить анимацию

• Самый простой способ - добавить свойство animate в конструктор multiview или pager и определить необходимый тип и подтип:

webix.ui({
   view:"multiview",
   animate:{
      type:"flip", 
      subtype:"vertical"
   },
   cells:[]   
});

• Значения свойства animate можно задавать напрямую, вне конструктора. Если какие-либо значения уже заданы вышеупомянутым способом, прямое указание значений перепишет их:

$$("multi").config.animate.type = "flip";
$$("multi").config.animate.subtype = "vertical";

• С помощью метода show(). Изменения происходят единожды при показе компонента. После чего, будут использованы значения (первоначальные или переопределённые).

 $$(id).show({type:"flip", subtype:"horizontal"})

Related sample:  Animated Multiview

Related sample:  Paging Animation Types

Анимирование инициализации компонента

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

Чтобы анимировать компонент при инициализации, вызовите метод webix.ui.animate() вместо стандартного webix.ui():

webix.ui.animate(obj, parent, config);

который принимает следующие параметры:

• obj (object) - конфигурация компонента;
• parent (string, number) - ID родительского компонента;
• config (object) - необязательно. Настройки анимации, описанные выше.
  Если не указаны, применятся следующие: { type:"slide", direction:"left" }.

 webix.ui.animate({
    id:"aboutView", template:"About page...",
}, $$("listView"));

Related sample:  Manual View Recreating

Наверх