Отображение анимированного изображения

Вы можете создать более интерактивный и привлекательный пользовательский интерфейс в своем приложении, загрузив рисуемый файл для отображения анимированных изображений. Анимированные изображения полезны для создания индикаторов загрузки, индикаторов успеха или ошибки, облегчения разработки игр и различных других функций пользовательского интерфейса.

Совместимость версий

Для этой реализации требуется, чтобы в minSDK вашего проекта был установлен уровень API 21 или выше.

Зависимости

Отображение анимированного изображения

Следующий код отображает анимированный вектор, который автоматически переключается между двумя состояниями:

@Composable
fun AnimatedVectorDrawable() {
    val image = AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)
    var atEnd by remember { mutableStateOf(false) }
    Image(
        painter = rememberAnimatedVectorPainter(image, atEnd),
        contentDescription = "Timer",
        modifier = Modifier.clickable {
            atEnd = !atEnd
        },
        contentScale = ContentScale.Crop
    )
}

Ключевые моменты о коде

  • Загружает векторный ресурс, анимируя атрибуты рисунка с течением времени.
  • Экземпляр Image , который использует экземпляр Painter для выполнения анимации, созданной на основе AnimatedImageVector и boolean состояния с помощью функции rememberAnimatedVectorPainter() .
  • Когда atEnd имеет true , экземпляр Painter прекращает анимацию.

Результаты

Песочные часы анимируют свое содержимое и вращаются
Рисунок 1. Анимированный вектор, который можно нарисовать в Compose.

Коллекции, содержащие это руководство

Это руководство является частью тщательно подобранной коллекции быстрых руководств, охватывающих более широкие цели разработки Android:

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

Есть вопросы или отзывы

Перейдите на нашу страницу часто задаваемых вопросов и узнайте о кратких руководствах или свяжитесь с нами и сообщите нам свои мысли.