Как создать более естественную альфа-анимацию CardView?

У меня есть обычный CardView:

<androidx.cardview.widget.CardView
    android:id = "@+id/cardView"
    android:layout_width = "256dp"
    android:layout_height = "64dp"
    app:cardElevation = "4dp" />

Затем я анимирую его альфу:

cardView.animate().alpha(1f).setDuration(3000).start()

Я получил:

Как создать более естественную альфа-анимацию CardView?

Фон карты сначала становится серым, а затем белым. Если времени мало, это выглядит как мигание. Кажется, это происходит только на белом фоне.

Это то, что я хочу (я создаю его в Adobe XD):

Как создать более естественную альфа-анимацию CardView?

Как мне добиться подобного эффекта?

Это потому, что ваша анимация медленная. Точно то же самое вы получите в Adobe XD, если уменьшите скорость анимации. Если подумать, белый с непрозрачностью 50% = серый...

HB. 25.06.2019 06:08

@ХБ. Я не могу получить то же самое в Adobe XD, даже если я изменю продолжительность анимации на 0,1 с. Как ты делаешь это? Я не думаю, что 50% непрозрачности белого == серый. Они двух разных цветов.

Dewey Reed 25.06.2019 06:23

Смотрите мой ответ ниже

HB. 25.06.2019 06:49
3
3
1 051
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

затухание.xml

<?xml version = "1.0" encoding = "utf-8"?>
<set xmlns:android = "http://schemas.android.com/apk/res/android"
    android:fillAfter = "true" >

    <alpha
        android:duration = "1000"
        android:fromAlpha = "0.0"
        android:interpolator = "@android:anim/accelerate_interpolator"
        android:toAlpha = "1.0" />

</set>

 Animation animFadein = AnimationUtils.loadAnimation(getApplicationContext(),
                R.anim.fade_in);
        cardView.startAnimation(animFadein);

Попробуй это. Я только что проверил это. Он работает так, как вы хотели. Вы можете изменить android:fromAlpha в зависимости от ваших требований. от 0,0f до 1,0f

Anupam 25.06.2019 06:34

Я не могу заставить его работать с этим решением и все равно получить серый цвет в начале. Как ты сделал это?

Dewey Reed 25.06.2019 07:16

Здесь есть разница. Это android:interpolator = "@android:anim/accelerate_interpolator", что делает его гладким. Вы должны сделать повышение карты и перевод на 0dp.

Anupam 25.06.2019 07:17

Я понимаю тебя, но мне нужно возвышение. Вот почему я использую CardView. Пока я добавляю высоту 1 dp, отображается серый цвет.

Dewey Reed 25.06.2019 07:23

Попробуйте использовать translationZ вместо высоты

Anupam 25.06.2019 07:41

перевод Z по-прежнему не помогает. Кстати, принятый ответ работает.

Dewey Reed 25.06.2019 08:08
Ответ принят как подходящий

Серый цвет, который вы видите, — это тень вашего CardView.

Вы можете добавить CardView внутри другого вида и вместо этого анимировать этот вид, например:

<RelativeLayout
    android:id = "@+id/animateThis"
    android:layout_width = "wrap_content"
    android:layout_height = "wrap_content">

    <androidx.cardview.widget.CardView
        android:id = "@+id/cardView"
        android:layout_width = "256dp"
        android:layout_height = "64dp"
        app:cardElevation = "4dp" />

</RelativeLayout>

Затем вместо этого анимируйте RelativeLayout:

animateThis.animate().alpha(1f).setDuration(3000).start()

Это работает! Но мы получаем другую проблему, подобную этому вопросу: stackoverflow.com/questions/54646927/…, но это похоже на проблему CardView.

Dewey Reed 25.06.2019 07:25

@DeweyReed, глядя на трекер проблем, похоже, проблема с CardView. Вы можете пометить этот пост, чтобы решить проблему быстрее.

HB. 25.06.2019 07:30

Просто поделиться другим подходом. Я надеюсь, что это может помочь другим.

Я создал анимацию, которая последовательно изменяет альфу и высоту, чтобы не показывать тень при анимации альфы.

Для затухания я использую:

<set android:ordering = "sequentially">
        <objectAnimator
            android:duration = "300"
            android:propertyName = "alpha"
            android:valueTo = "1"
            android:valueType = "floatType" />
        <objectAnimator
            android:duration = "300"
            android:propertyName = "cardElevation"
            android:valueTo = "12dp"
            android:valueType = "floatType" />
    </set>

Для затухания я использую:

<set android:ordering = "sequentially">
        <objectAnimator
            android:duration = "300"
            android:propertyName = "cardElevation"
            android:valueTo = "0dp"
            android:valueType = "floatType" />
        <objectAnimator
            android:duration = "300"
            android:propertyName = "alpha"
            android:valueTo = "0"
            android:valueType = "floatType" />
    </set>

Другие вопросы по теме