Эффекты фона

Расширение backdrop_effect применяет графические эффекты к содержимому, которое находится под элементом: размытие, преломление, коррекцию цвета и подсветку краев (только для Android):

{
  "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"
      }
    }
  ]
}

Каждый эффект описывается вложенным объектом. Если объект эффекта не задан, эффект не применяется.

Параметры

Все параметры необязательные. Параметры расширения не поддерживают выражения.

Скругление углов эффекта берется из свойства border элемента: corner_radius или corners_radius.

Область поиска фона

Параметр backdrop_scope принимает значения:

• card — фон ищется в пределах карточки, которой принадлежит элемент. Если параметр backdrop_id не задан, фоном служит вся карточка.

• window — фон ищется во всем окне приложения:

  • Если параметр backdrop_id задан, элемент с таким идентификатором ищется во всем окне, в том числе в других карточках и среди view приложения с таким же тегом.
  • Если параметр backdrop_id не задан, фоном служит все, что отрисовано в окне под элементом, включая соседние карточки и нативные view приложения. Этот режим требует Android 13 (API 33) и выше. На более старых версиях Android значение работает как card.

Нераспознанное значение backdrop_scope приводит к ошибке разбора параметров, и эффект не применяется.

Размытие

Преломление

Коррекция цвета

Подсветка краев

Вид подсветки задается полем type:

• specular — блик заданного цвета, яркость которого зависит от направления света;
• ambient — белая подсветка краев, обращенных к источнику света.

Особенности работы

• Эффект отображается под собственным фоном элемента. Чтобы эффект был виден, фон элемента (background) должен быть полупрозрачным или отсутствовать.
• Преломление и коррекция цвета доступны на Android 13 (API 33) и выше. На более старых версиях Android применяются только размытие и подсветка краев, при этом подсветка отображается равномерной, без учета angle и falloff.
• Захваченный фон обновляется при изменении лэйаута и при скролле. Если содержимое фона меняется иначе — например, это видео или анимация, — эффект может показывать устаревшее изображение. Чтобы сообщать о таких изменениях, передайте в обработчик BackdropWatcher.
• Эффект ресурсоемкий: при каждом обновлении фон отрисовывается заново. Применяйте его к небольшим и преимущественно статичным элементам.
• Если backdrop_scope равен window, а параметр backdrop_id не задан, элементы, отрисованные поверх элемента с эффектом, скрываются на время захвата фона. Из-за этого, например, могут приостанавливаться их анимации.

Подключение

build.gradle

dependencies {
    implementation "com.yandex.div:backdrop-effect:${versions.divkit}"
}

В коде:

val backdropEffectHandler = BackdropEffectExtensionHandler()
val divConfiguration = DivConfiguration.Builder(imageLoader)
    .extension(backdropEffectHandler)
    .build()
val divContext = Div2Context(baseContext = this, configuration = divConfiguration)

Чтобы сообщать об изменениях фона, которые расширение не отслеживает само, передайте в обработчик BackdropWatcher:

val backdropEffectHandler = BackdropEffectExtensionHandler(
    backdropWatcher = object : BackdropWatcher {
        override fun isBackdropInvalidated(backdropView: View): Boolean {
            return isBackdropContentChanged(backdropView)
        }
    }
)

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

Пример

{
  "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
                    }
                  }
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

{
  "extensions": [
    {
      "id": "backdrop_effect",
      "params": {
        "blur": {
          "radius": 15
        },
        "backdrop_scope": "window"
      }
    }
  ]
}

Узнать больше

Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.

Репозиторий DivKit