Jetpack Compose: Shimmer Animation | Эрселан Хан

Сегодня мы покажем вам, как использовать Shimmer Animationв Jetpack Compose. Но прежде чем двигаться дальше, я хотел бы попросить вас follow follow мою среднюю учетную запись, чтобы получать последние обновления об Android и других темах, связанных с технологиями.

Что такое мерцающая анимация?

Shimmer Animation обычно используется для отображения некоторых данных, загрузка которых занимает некоторое время, например, когда мы получаем некоторые данные из базы данных или получаем некоторые данные из любого сетевого вызова. Мы использовали Shimmer Animation, чтобы показать пользователю, что в данный момент загружаются некоторые данные.

Давайте посмотрим на примере кода, как мы можем этого добиться.

Прежде всего, нам нужно добавить некоторые зависимости для Jetpack Compose:

dependencies {
    compose_version = '1.1.1'
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    implementation 'androidx.activity:activity-compose:1.4.0'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
}

Давайте напишем функцию или метод Compose, чтобы показать мерцающую анимацию:

@Composable
fun ShimmerAnimation(
    content: @Composable (Brush) -> Unit
) {

    /*
    Create InfiniteTransition
    which holds child animation like [Transition]
    animations start running as soon as they enter
    the composition and do not stop unless they are removed
    */
    val transition = rememberInfiniteTransition()
    val translateAnim by transition.animateFloat(
        /*
        Specify animation positions,
        initial Values 0F means it starts from 0 position
        */
        initialValue = 0f,
        targetValue = 1000f,
        animationSpec = infiniteRepeatable(

            /*
             Tween Animates between values over specified [durationMillis]
            */
            tween(durationMillis = 1200, easing = FastOutSlowInEasing),
        )
    )

    /*
      Create a gradient using the list of colors
      Use Linear Gradient for animating in any direction according to requirement
      start=specifies the position to start with in cartesian like system Offset(10f,10f) means x(10,0) , y(0,10)
      end= Animate the end position to give the shimmer effect using the transition created above
    */

    val shimmerColorShades = listOf(

        GrayColor.copy(0.9f),

        GrayColor.copy(0.2f),

        GrayColor.copy(0.9f)

    )
    val brush = Brush.linearGradient(
        colors = shimmerColorShades,
        start = Offset(10f, 10f),
        end = Offset(translateAnim, translateAnim)
    )

    content(brush)
}

Мы используем оттенки серого цвета, изменяя его альфа-канал. Где GrayColor определен в нашем файле Color.kt внутри нашей папки theme.

Теперь напишите несколько методов-заполнителей или функций для нашего изображения и текста. Мы используем приведенную выше ShimmerAnimation, чтобы показать анимацию, когда наш текст и изображение не загружены.

Начнем с текстового заполнителя:

@Composable
fun LinePlaceHolder(
    width: Dp = 40.dp
) = ShimmerAnimation {
    Spacer(
        modifier = Modifier
            .width(width)
            .height(16.dp)
            .background(
                brush = it, // brush to paint background with
                shape = RoundedCornerShape(4.dp)
            )
    )
}

Мы передаем ширину нашему методу LinePlaceHolder, делая это, мы можем повторно использовать этот метод и для других значений ширины.

Теперь давайте напишем метод заполнителя для изображения:

@Composable
fun ImagePlaceHolder(
    size: Dp = 12.dp
) = ShimmerAnimation {
    Spacer(
        modifier = Modifier
            .size(size)
            .background(
                brush = it, // brush to paint background with
                RoundedCornerShape(8.dp)
            )
    )
}

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

Давайте создадим метод, в котором мы вызываем эти оба вышеуказанных метода, чтобы показать анимацию для текста и изображения:

@Composable
fun ShimmerEffectHolder() {
    Column(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        ImagePlaceHolder(
            size = 80.dp
        )
        Spacer(
            modifier = Modifier.height(16.dp)
        )
        LinePlaceHolder(
            width = 80.dp
        )
    }
}

Мы вызываем метод ImagePlaceHolder и передаем размер изображения, после этого мы вызываем метод Space для добавления пространства в наше представление и, наконец, мы вызываем метод LinePlaceHolder для текста и передачи соответствующей ширины.

Теперь пришло время протестировать нашу мерцающую анимацию:

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ShimmerListScreen(
) {
    val showShimmerView = true

    Box(Modifier.fillMaxSize()) {
        LazyVerticalGrid(
            cells = GridCells.Fixed(2)
        ) {
            if (showShimmerView) {
                items(10) {
                    ShimmerEffectHolder()
                }
            } else {
                // load data here
            }
        }
    }
}

В приведенном выше коде мы показываем представление Сетка, устанавливая количество ячеек как 2 и итерируя ShimmerEffectHolder. 10 раз.

Это все на данный момент. Я расскажу больше о Android, Java, Kotlin и Springboot в своих следующих статьях. Если вам нравится эта статья, то Clapнасколько это возможно 🤐

Если вы пропустили: 🤐

Покажите свою любовь❤️, поделившись этой статьей со своими коллегами-разработчиками😅и подписавшись на мой аккаунт на Medium✈️

(Опять же, источник этой демонстрации находится на https://github.com/arsalankhan994/jetpack-compose-step-by-step. Подпишитесь на меня, чтобы узнать больше об Android, Kotlin и других технологиях. Если у вас есть какие-либо вопросы, задайте их здесь или напишите мне по адресу [email protected], и я сделаю постараюсь ответить.)

Jetpack Compose: Shimmer Animation | Эрселан Хан

Что такое мерцающая анимация?

Если вы пропустили: 🤐

Похожие вопросы