如何创建更自然的 CardView alpha 动画？

Question

我有一个普通的 CardView：

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

然后我为它的 alpha 设置动画：

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

我得到：

卡片背景先变灰后变白。如果时间很短，这看起来就像眨眼。似乎这只发生在白色背景上。

这就是我想要的（我在 Adobe XD 中创建的）：

怎样才能达到类似的效果？

Answer 1

fadein.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);

Answer 2

你看到的灰色是你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()

Answer 3

只是为了分享一种不同的方法。我希望它可以帮助别人。

我创建了一个按顺序更改 alpha 和高度的动画，以避免在设置 alpha 动画时显示阴影。

对于淡入我使用：

<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>

如何创建更自然的 CardView alpha 动画？

How to create a more natural CardView alpha animation?

android

android-animation

android-cardview