Shine effect for images

The shine extension adds an animated shine to the image in the div-image element: a gradient band passes over the image. The extension is supported on Android and iOS.

Example

{
  "type": "image",
  "image_url": "https://example.com/image.png",
  "width": {
    "type": "fixed",
    "value": 100
  },
  "height": {
    "type": "fixed",
    "value": 100
  },
  "extensions": [
    {
      "id": "shine",
      "params": {
        "colors": [
          "#00FFFFFF",
          "#FFFFFFFF",
          "#00FFFFFF"
        ],
        "locations": [
          0,
          0.5,
          1
        ],
        "angle": 45,
        "duration": 1000,
        "interval": 1000,
        "delay": 500,
        "cycle_count": 3,
        "on_cycle_start_actions": [
          {
            "log_id": "shine_cycle_started",
            "url": "div-action://set_variable?name=shine_cycles&value=@{shine_cycles+1}"
          }
        ]
      }
    }
  ]
}

In this example, the shine passes over the image three times, and the shine_cycles integer variable is incremented at the start of each pass.

Parameters

All parameters are optional. The parameters, except on_cycle_start_actions, support expressions.

Parameters	Description
`id`	Extension ID.
`is_enabled`	Enables the shine. If set to `false`, the image is displayed without the shine. Default: `true`.
`colors`	Array of gradient colors.
`locations`	Positions of the colors in the gradient: numbers from `0` to `1`, one for each color in `colors`.
`angle`	Gradient angle in degrees. Default: `45`.
`duration`	Duration of one shine pass in milliseconds.
`interval`	Pause between passes in milliseconds. Default: `0`.
`delay`	Delay before the first pass in milliseconds. Default: `0`.
`cycle_count`	The number of shine passes. The `0` value means infinite repetition. Default: `0`.
`on_cycle_start_actions`	Array of actions that run at the start of each pass.

Specify colors and locations together and with the same number of values: if the numbers differ, the shine isn't displayed. The default colors, color positions, and duration differ on Android and iOS, so specify these parameters explicitly.

How it works

The extension is applied only to the div-image element.
The shine is visible only over the opaque areas of the image.

Connection

Android

iOS

build.gradle

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

In the code:

val divConfiguration = DivConfiguration.Builder(imageLoader)
    .extension(DivShineExtensionHandler())
    .build()

Optional constructor parameters:

logger: Receives the errors of parsing the extension parameters.
pauseShineObservable: Lets the application pause and resume the shine animation.

DivKitComponents(
  ...
  extensionHandlers: [
    ShineExtensionHandler()
  ]
)

Learn more

You can discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_en.

DivKit Repository

Was the article helpful?

Shimmer placeholder for images

Element size in variables