Перейти к основному содержимому
Подсказка

Эффект размытия (блюр)

Эффект размытия - визуальный спецэффект создающий размытие в нужных частях интерфейса.

  • Для корректного отображения эффекта используйте последнюю версию студии.

Эффект размытия, или блюр многим знаком из фотошопа, или пользователям продукции Apple. Мы реализовали эту функцию, и теперь можно отделять размытием неактивный интерфейс.

Блюр эффект можно задавать постоянно для графического элемента(кнопки), или динамически изменить состояние посредством использования скрипта. Таким образом при нажатии на кнопку размытые элементы появляются поверх активной страницы с рабочими графическими элементами. Размытие может применяться к отдельному элементу на странице(кнопка, триггер, уровень и т.д.).

Blur_menu2.png

Пример:

В примерах имеется два проекта. Один из них составлен с применением графического и скриптового метода создания блюра. А второй, на базе iOS, наглядно показывает действия блюра в готовом интерфейсе при нажатии кнопки "Unlock".

Параметры настройки эффекта размытия​

Блюр имеет следующие параметры:

*BlurType - тип размытия, может быть значений "Default", или "Background".

    • Default - размытие изображения элемента. Весь рисунок на кнопке будет размыт, задний фон не просвечивается.
    • Background - такой тип блюра берет за основу задний фон под графическим элементом, накладывает его на элемент и размывает изображение.

*BlurDepth - глубина эффекта от 0 до 100. При 0 размытие отсутствует полностью, при 100 достигается максимальное размытие.

Блюр эффект доступен для использования в студии двумя способами:

1. Настройка блюр эффекта в iRidium studio​

Все настройки блюра доступны в настройках состояния(State) для графического элемента/страницы/попапа. Настройка потребует выполнить пару несложных действий.

Bur_type.png

  1. Создайте графический элемент в проекте и перейдите в его настройки состояния(State). Задайте параметр BlurType .

Default - размытие изображения элемента. Весь рисунок на кнопке будет размыт, задний фон не просвечивается.

Blur_deafult.png

Background - такой тип блюра берет за основу задний фон под графическим элементом, накладывает его на элемент, а затем блюрит.

Blur_back.png

  1. Укажите глубину эффекта от 0 до 100 в параметре BlurDepth .

Глубину эффекта следует указывать в пределе от 1 до 100. При значении 0, эффекта размытия не будет. Если элемент указать типа Background и значение 0, то изображение на элементе не подвергнется обработке и останется видимым.

2. Настройка блюр эффекта в Java script​

BlureType указывается следующим образом:

.BlurType = IR.BLUR_DEFAULT - присваивает объекту тип блюра Default .

IR.GetPage("Page 1").GetState(0).BlurType = IR.BLUR_DEFAULT; //<translate><!--T:32-->
типа блюра "Default"</translate>
IR.GetPage("Page 1").GetState(0).BlurDepth = 100;

.BlurType = IR.BLUR_BACKGROUND - присваивает объекту тип блюра Background .

IR.GetPopup("Popup 7").GetState(0).BlurType = IR.BLUR_BACKGROUND; //<translate><!--T:34-->
тип блюра "Background"</translate>
IR.GetPopup("Popup 7").GetState(0).BlurDepth = 15; // <translate><!--T:35-->
глубина эффекта</translate>

BlurDepth - глубина эффекта.

.BlurDepth = 15 - глубина указывается в пределе от 0 до 100. IR.GetPopup("Popup 7").GetState(0).BlurDepth = 15;

В этой статье: