Анимации Android RecyclerView на Kotlin

AppTractor

3 года назад

Простого функционального кода недостаточно для красивого современного приложения. Думаю, все согласны с тем, что сегодня приложение должно обладать красивым дизайном и показывать переходы и анимации. Сегодня я попытаюсь объяснить один из этих аспектов, а именно анимации элементов RecyclerView в Android. Я буду использовать Android Studio и Kotlin. Наслаждайтесь :)

Начнем с основ

Прежде всего, вам нужно создать папку с анимацией для хранения файлов анимации.

res(right-click)->New->Android Resource Directory

После этого щелкните правой кнопкой мыши папку с анимацией и создайте «Animation Resources File».

Анимации Android RecyclerView: объяснение свойств

Когда вы создадите файл ресурсов анимации, вы увидите в нем некоторые свойства. Я попытаюсь объяснить их, и после этого мы будем создавать наши анимации.

-Translate

Translate используется в основном для перемещения элементов по осям x и y. У него есть такие атрибуты:

FromXDelta и fromYDelta показывают, с какого направления будет появляться элемент. Если вы установите положительное значение для «fromXDelta», оно будет появляться с правой стороны экрана. Атрибуты ToDelta представляют, где элемент будет останавливаться. Обычно я использую атрибут toDelta в 0%. Потому что даже если вы установите «-100%», когда анимация закончится, элемент вернется на экран, и это будет выглядеть не очень красиво. И, наконец, «продолжительность» — это время анимации. Давайте посмотрим на анимацию со свойством только translate.

-Alpha

Alpha используется для определения непрозрачности. Это свойство в основном используется для анимации постепенного появления/исчезновения. Атрибуты указаны ниже:

Эффект постепенного появления и исчезновения анимации может быть достигнут с использованием атрибутов fromAlpha и toAlpha. Если вы используете значения, подобные приведенным выше, вы получите эту анимацию.

-Rotate

Свойство Rotate, как можно понять из названия, используется для анимации вращения для элементов представления.

Эти атрибуты вначале сбивали меня с толку, поэтому я постараюсь объяснить их как можно яснее. Атрибут FromDegrees представляет, с какого угла элемент будет разворачиваться. Представьте себе градусы и посмотрите на изображение сейчас. Элементы начинаются с угла 270 ° и вращаются по часовой стрелке. Атрибуты Pivot похожи на закрепление элемента в соответствии с их значением. Например, если вы установите pivotX: 100%, pivotY: 0% и fromDegrees: 90 °, приложение закрепит элемент в правом верхнем углу и соответственно повернет его. Анимацию можно увидеть на гифке ниже.

-Scale

Свойство Scale используется для масштабирования элементов. Этих атрибутов больше, чем других, поэтому давайте углубимся в них.

Атрибуты Pivot здесь выполняют немного другую функцию. Значение 50% для обоих атрибутов представляет центр элемента. Я установил это так, потому что хочу масштабировать их от центра. Атрибуты FromScale и ToScale используются для масштабирования элемента. 1 для исходного размера и 0 для начального размера. Эти атрибуты делаю то, что вы видите ниже.

-Setting up

holder.shopDetailParent.animation =
    AnimationUtils.loadAnimation(holder.itemView.context, R.anim.example_anims)

Прежде всего, вам нужно определить View, который вы хотите анимировать, для элемента RecyclerView в адаптере. После этого вы можете использовать приведенный выше фрагмент кода в OnBindViewHolder, чтобы добавить свои анимации. Я хочу анимировать весь элемент, поэтому я определил представление карточки shopDetailParent в адаптере. Example_anims — это мой файл анимаций, поэтому вам нужно использовать в коде собственное имя файла.

Некоторые красивые примеры анимации

//Animation One//
<translate
    android:fromYDelta="100%"
    android:toYDelta="0%"
    android:duration="500"
    />

<alpha
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:duration="500"/>

<scale
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromXScale="0.5"
    android:fromYScale="0.5"
    android:toXScale="1"
    android:toYScale="1"
    android:duration="500"

/>

//Animation Two//
<translate
    android:fromXDelta="200%"
    android:toYDelta="0%"
    android:duration="500"
    />

<scale
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromXScale="0"
    android:fromYScale="0"
    android:toXScale="1"
    android:toYScale="1"
    android:duration="500"
    />

//Animation Three//
<translate
    android:fromXDelta="200%"
    android:toYDelta="0%"
    android:duration="500"
    />
<alpha
    android:fromAlpha="0.0"
    android:toAlpha="3.0"
    android:duration="2500"/>

Интерполяторы

У нас есть последний атрибут — интерполяторы. Интерполяторы — это в основном поведение анимаций. Обычно анимация работает с линейным интерполятором. Этот интерполятор равномерно перемещает представление по каждому кадру анимации. (Все графики с этого момента взяты с jebware.com, вы можете зайти на сайт и попробовать интерполяторы с разными коэффициентами) И его график такой:

Но у других интерполяторов другие графики. Я покажу вам, как добавлять интерполяторы, и покажу пару примеров, после чего вы можете попробовать поработать с ними самостоятельно. Все, что вам нужно сделать, это добавить эту строку в свой set.