动画布局背景颜色的变化

Question

我有一个RelativeLayout，我已经从drawable中设置了它的背景。当选中RadioButton时，我能够将RelativeLayout的背景更改为另一个。但是，当它发生变化时，如何给它添加动画效果？

代码： activity_main.xml：

<RelativeLayout
    android:layout_width="80dp"
    android:layout_height="50dp"
    android:gravity="center"
    android:background="@drawable/original"
    android:id="@+id/rel1">
    <RadioButton
        android:id="@+id/radio"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"/>
</RelativeLayout>

original.xml(drawable):

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#ffffff">
    </solid>
    <corners
        android:radius="50dp">
    </corners>
</shape>

pressed.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#2196F3">
    </solid>
    <corners
        android:radius="50dp">
    </corners>
</shape>

Java类：

radio.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                    if(b){
                    relativeLayout.setBackgroundResource(R.drawable.pressed);
                }
            }
        });

- jobin

---

你可以轻松使用 ObjectAnimator 来完成它。 - Mohamed Fadel Buffon

你能提供给我一段代码吗？ - jobin

尝试这个：https://dev59.com/sWXWa4cB1Zd3GeqPR_Mw - Aniruddh Parihar

请提供一个答案。 - jobin

你想要使用什么类型的动画？ - Geeta Gupta

Answer 1

问题归结为某种方式裁剪了角落并且动画布局背景。因此，理论上，我们可以将前景可绘制设置到布局中，并使用ArgbEvaluator动画化背景可绘制。

转向实践。

请查看this answer，在其中作者分享了一个掩码可绘制对象，这对您的问题可能会有帮助：

将该可绘制对象用作布局的前景：

<RelativeLayout
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:foreground="@drawable/frame"
    android:background="@color/colorAccent" />

在代码中，每当需要执行动画时：

    final int from = ContextCompat.getColor(this, R.color.colorAccent);
    final int to   = ContextCompat.getColor(this, R.color.colorPrimary);
ValueAnimator anim = new ValueAnimator();
    anim.setIntValues(from, to);
    anim.setEvaluator(new ArgbEvaluator());
    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            view.setBackgroundColor((Integer)valueAnimator.getAnimatedValue());
        }
    });
anim.setDuration(1000);
    anim.start();

以下是输出结果：

如果你想改变框架可绘制的颜色，你可以将其包装到一个 xml 中，并应用 android:tint。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <bitmap android:src="@drawable/frame" android:tint="#ccaaff"/>
    </item>
</layer-list>

现在将这个可绘制对象设置为您布局的前景。

- azizbekian

---

当我将可绘制对象设置为前景时，单选按钮变得不可见。 - jobin

当我将colorAccent设置为背景时，边缘的颜色不同。 - jobin

请发布一个具有该行为的简单项目。 - azizbekian

Answer 2

完全可以通过代码实现相同效果

使用编程方式创建带有矩形角落的背景

    //Background
    backgroundDrawable = GradientDrawable()
    backgroundDrawable.cornerRadius = rectangleCornerRadius
    backgroundDrawable.shape = GradientDrawable.RECTANGLE
    backgroundDrawable.setColor(rectangleColor)
    background = backgroundDrawable

颜色变化动画

  val objectAnimator = ObjectAnimator.ofObject(backgroundDrawable, "color",
        ArgbEvaluator(),
        Color.parseColor("#FFFFFFFF"), 
        Color.parseColor("#FF78c5f9"))

  objectAnimator .setDuration(1000);
  objectAnimator .start();

- Hitesh Sahu