Мерцающая заглушка изображения
Расширение shimmer показывает на месте изображения анимированную заглушку с движущимся градиентом, пока изображение загружается. На Android расширение работает с элементами div-image и gif-image, на iOS — только с div-image. В Web расширение не поддерживается.
Пример
{
"type": "image",
"image_url": "https://example.com/image.png",
"width": {
"type": "fixed",
"value": 200
},
"height": {
"type": "fixed",
"value": 120
},
"extensions": [
{
"id": "shimmer",
"params": {
"colors": [
"#FFE9E9E9",
"#FFFBFBFB",
"#FFE9E9E9"
],
"locations": [
0,
0.5,
1
],
"angle": 0,
"duration": 1.5,
"corner_radius": {
"top-left": 16,
"top-right": 16,
"bottom-left": 16,
"bottom-right": 16
}
}
}
]
}
Параметры
Все параметры необязательные и поддерживают выражения.
|
Параметры |
Описание |
|
|
Идентификатор расширения. |
|
|
Массив цветов градиента. |
|
|
Положения цветов в градиенте: числа от |
|
|
Угол наклона градиента в градусах. По умолчанию: |
|
|
Длительность одного прохода анимации в секундах. Значение должно быть больше нуля. |
|
|
Радиусы скругления углов заглушки. Объект с необязательными полями |
Задавайте colors и locations вместе и с одинаковым количеством значений. Цвета, положения цветов и длительность по умолчанию различаются на Android и iOS. Чтобы заглушка выглядела одинаково, задавайте эти параметры явно.
Подключение
build.gradle
dependencies {
implementation "com.yandex.div:div-shimmer:${versions.divkit}"
}
В коде:
val divConfiguration = DivConfiguration.Builder(imageLoader)
.extension(DivShimmerExtensionHandler())
.build()
DivKitComponents(
...
extensionHandlers: [
ShimmerImagePreviewExtension()
]
)
Узнать больше
Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.