--- metadata: - name: generator content: Diplodoc Platform v5.70.0 alternate: - https://divkit.tech/docs/en/concepts/extensions/backdrop-effect.md - https://divkit.tech/docs/ru/concepts/extensions/backdrop-effect.md - href: https://divkit.tech/docs/ru/concepts/extensions/backdrop-effect.md type: text/markdown title: Markdown version - href: https://divkit.tech/docs/ru/llms.txt?revision=r22102947 rel: describedby --- > **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt?revision=r22102947 # Эффекты фона Расширение `backdrop_effect` применяет графические эффекты к содержимому, которое находится под элементом: размытие, преломление, коррекцию цвета и подсветку краев (только для Android): ```json translate=no { "extensions": [ { "id": "backdrop_effect", "params": { "blur": { "radius": 8 }, "refraction": { "height": 12, "strength": 24, "chromatic_aberration": true }, "color_adjustment": { "brightness": 0.1, "contrast": 1.1, "saturation": 1.5 }, "rim_highlight": { "type": "specular", "width": 1, "alpha": 0.8, "color": "#80FFFFFF", "angle": 45, "falloff": 1 }, "backdrop_scope": "card" } } ] } ``` Каждый эффект описывается вложенным объектом. Если объект эффекта не задан, эффект не применяется. ## Параметры {#params} Все параметры необязательные. Параметры расширения не поддерживают выражения. #| || **Параметры** | **Описание** || || `id` | Идентификатор расширения. || || `backdrop_id` | Идентификатор (`id`) элемента, содержимое которого используется как фон для эффекта. Это может быть родительский элемент любого уровня или другой элемент карточки. Если параметр не задан, фон определяется параметром `backdrop_scope`. || || `backdrop_scope` | Область поиска фона: `card` или `window`. По умолчанию: `card`. См. [Область поиска фона](#backdrop-scope). || || `blur` | Размытие фона. См. [Размытие](#blur). || || `refraction` | Преломление фона у краев элемента. См. [Преломление](#refraction). || || `color_adjustment` | Коррекция цвета фона. См. [Коррекция цвета](#color-adjustment). || || `rim_highlight` | Подсветка краев элемента. См. [Подсветка краев](#rim-highlight). || |# Скругление углов эффекта берется из свойства `border` элемента: `corner_radius` или `corners_radius`. ### Область поиска фона {#backdrop-scope} Параметр `backdrop_scope` принимает значения: - `card` — фон ищется в пределах карточки, которой принадлежит элемент. Если параметр `backdrop_id` не задан, фоном служит вся карточка. - `window` — фон ищется во всем окне приложения: - Если параметр `backdrop_id` задан, элемент с таким идентификатором ищется во всем окне, в том числе в других карточках и среди view приложения с таким же тегом. - Если параметр `backdrop_id` не задан, фоном служит все, что отрисовано в окне под элементом, включая соседние карточки и нативные view приложения. Этот режим требует Android 13 (API 33) и выше. На более старых версиях Android значение работает как `card`. Нераспознанное значение `backdrop_scope` приводит к ошибке разбора параметров, и эффект не применяется. {% note warning %} **Производительность при использовании `backdrop_scope: "window"`** Если параметр `backdrop_id` не задан, при каждом обновлении эффекта заново отрисовывается содержимое всего окна, что может быть ресурсоемким. Используйте этот режим, только когда необходимо захватить фон за пределами текущей карточки. {% endnote %} ### Размытие {#blur} #| || **Параметры `blur`** | **Описание** || || `radius` | Радиус размытия фона в dp. По умолчанию: `0` (без размытия). || |# ### Преломление {#refraction} #| || **Параметры `refraction`** | **Описание** || || `height` | Ширина зоны вдоль краев элемента, в которой фон преломляется, в dp. По умолчанию: `0` (без преломления). || || `strength` | Сила преломления: наибольшее смещение фона в зоне преломления в dp. По умолчанию: `0`. || || `chromatic_aberration` | Включает хроматическую аберрацию — цветные контуры в зоне преломления. По умолчанию: `false`. || |# ### Коррекция цвета {#color-adjustment} #| || **Параметры `color_adjustment`** | **Описание** || || `brightness` | Изменение яркости фона. Значение `0` — без изменений, положительные значения делают фон светлее. По умолчанию: `0`. || || `contrast` | Коэффициент контраста фона. Значение `1` — без изменений. По умолчанию: `1`. || || `saturation` | Коэффициент насыщенности фона. Значение `1` — без изменений, значение `0` — оттенки серого. По умолчанию: `1`. || |# ### Подсветка краев {#rim-highlight} Вид подсветки задается полем `type`: - `specular` — блик заданного цвета, яркость которого зависит от направления света; - `ambient` — белая подсветка краев, обращенных к источнику света. #| || **Параметры `rim_highlight`** | **Описание** || || `type` | Обязательный параметр. Вид подсветки: `specular` или `ambient`. Нераспознанное значение приводит к ошибке разбора параметров, и эффект не применяется. || || `width` | Ширина подсветки в dp. По умолчанию: `0.5`. || || `alpha` | Непрозрачность подсветки от `0` до `1`. По умолчанию: `1`. || || `angle` | Угол направления света в градусах. По умолчанию: `45`. || || `color` | Цвет блика (только для `specular`). По умолчанию: `#80FFFFFF`. || || `falloff` | Показатель затухания блика при отклонении от направления света (только для `specular`). По умолчанию: `1`. || || `intensity` | Яркость подсветки от `0` до `1` (только для `ambient`). По умолчанию: `0.4`. || |# ## Особенности работы {#behavior} - Эффект отображается под собственным фоном элемента. Чтобы эффект был виден, фон элемента (`background`) должен быть полупрозрачным или отсутствовать. - Преломление и коррекция цвета доступны на Android 13 (API 33) и выше. На более старых версиях Android применяются только размытие и подсветка краев, при этом подсветка отображается равномерной, без учета `angle` и `falloff`. - Захваченный фон обновляется при изменении лэйаута и при скролле. Если содержимое фона меняется иначе — например, это видео или анимация, — эффект может показывать устаревшее изображение. Чтобы сообщать о таких изменениях, передайте в обработчик `BackdropWatcher`. - Эффект ресурсоемкий: при каждом обновлении фон отрисовывается заново. Применяйте его к небольшим и преимущественно статичным элементам. - Если `backdrop_scope` равен `window`, а параметр `backdrop_id` не задан, элементы, отрисованные поверх элемента с эффектом, скрываются на время захвата фона. Из-за этого, например, могут приостанавливаться их анимации. ## Подключение {#connect} build.gradle ```groovy translate=no dependencies { implementation "com.yandex.div:backdrop-effect:${versions.divkit}" } ``` В коде: ```kotlin translate=no val backdropEffectHandler = BackdropEffectExtensionHandler() val divConfiguration = DivConfiguration.Builder(imageLoader) .extension(backdropEffectHandler) .build() val divContext = Div2Context(baseContext = this, configuration = divConfiguration) ``` Чтобы сообщать об изменениях фона, которые расширение не отслеживает само, передайте в обработчик `BackdropWatcher`: ```kotlin translate=no val backdropEffectHandler = BackdropEffectExtensionHandler( backdropWatcher = object : BackdropWatcher { override fun isBackdropInvalidated(backdropView: View): Boolean { return isBackdropContentChanged(backdropView) } } ) ``` Метод `isBackdropInvalidated` вызывается перед отрисовкой кадра для каждого элемента с эффектом, поэтому он должен выполняться быстро. ## Пример {#example} {% cut "Панель с эффектом поверх изображения" %} ```json translate=no { "card": { "log_id": "backdrop_effect_sample", "states": [ { "state_id": 0, "div": { "type": "container", "orientation": "overlap", "items": [ { "type": "image", "id": "photo", "image_url": "https://example.com/image.png", "aspect": { "ratio": 1.5 } }, { "type": "text", "text": "Backdrop effect", "font_size": 16, "text_color": "#FFFFFFFF", "alignment_horizontal": "center", "alignment_vertical": "center", "width": { "type": "wrap_content" }, "paddings": { "left": 24, "right": 24, "top": 12, "bottom": 12 }, "border": { "corner_radius": 16 }, "background": [ { "type": "solid", "color": "#33FFFFFF" } ], "extensions": [ { "id": "backdrop_effect", "params": { "backdrop_id": "photo", "blur": { "radius": 8 }, "refraction": { "height": 12, "strength": 24 }, "rim_highlight": { "type": "ambient", "intensity": 0.4 } } } ] } ] } } ] } } ``` В этом примере фоном для эффекта служит изображение с идентификатором `photo`, а скругление углов эффекта задано свойством `border` текстового элемента. {% endcut %} {% cut "Пример с backdrop_scope: window" %} ```json translate=no { "extensions": [ { "id": "backdrop_effect", "params": { "blur": { "radius": 15 }, "backdrop_scope": "window" } } ] } ``` Этот пример размывает весь фон окна приложения, находящийся под элементом, включая контент за пределами текущей карточки. {% endcut %} ## Узнать больше {#troubleshooting} Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: [https://t.me/divkit_community_ru](https://t.me/divkit_community_ru). [Репозиторий DivKit](https://github.com/divkit/divkit)