动画布局的背景颜色变化

Question

我有一个RelativeLayout我已经设置了从drawable .i的背景，当检查RadioButton RadioButton时，我能够将RelativeLayout的背景更改为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（可绘制）：

<?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);
                }
            }
        });

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();

这是您将得到的输出：

如果你想改变frame drawable的颜色，你可以把它包装成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>

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

Answer 2

完全可以在Code中实现同样的效果

以编程方式创建带矩形角的背景

    //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();