java - 动画按钮背景以反射(reflect)剩余时间？

Question

我正在开发一个 Android 项目，用户可以在其中扫描 RFID 标签。标签会在一定秒数后过期，以便在另一个标签进入之前清理系统，基本上是为了避免错误地处理同一标签两次。为了可视化此超时，我希望显示标签 ID 的按钮背景具有动画效果。基本上我希望在标签刚刚被扫描时整个按钮充满颜色，并随着时间的推移慢慢缩小到中间。

到目前为止我发现了什么:我发现this answer他们在那里谈论属性 api。我可以看到它与渐变一起工作，但不幸的是，关于渐变的文档很少，而且看起来并不那么容易做到这一点。

我还认为也许您可以通过某种方式在按钮下方分层相同大小的另一个 View 并对其进行缩放来实现此目的。但老实说，我认为这很难一致地做到，特别是在计时器处理和配置更改时调整 View 大小。话又说回来，我对 Android 并没有那么丰富的经验，几乎所有的事情都使用线性和网格布局，因为它们是最容易理解的。

我真正需要的是某种方法，将背景按一个值(总时间与剩余时间之间的比率)向中间“缩放”，就像我在这里演示的那样。或者一种本质上具有硬颜色渐变的方法，其中渐变的白色部分随着时间的推移向中间移动。

我认为可能有效的最后一个解决方案是拥有一个可绘制的动画 vector 并操纵与其关联的对象动画器以强制其以正确的速度播放。然而，这个解决方案可能相当困惑，我还没有尝试过

有人有一个干净的解决方案来解决这个问题吗？

注意:我在这个项目中使用 java。我没有包含代码 fragment ，因为我认为不需要它们。如果您需要一些 fragment ，请直接询问，我会提供。我的 minSdkVersion 是 25，因为该作业的目标设备是 android 7.1，无法更新到较新的版本。

Answer 1

这是一个示例布局，其中有两个进度条和一个 TextView :

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:progressBackgroundTint="@color/transparent"
        android:rotation="180"
        android:scaleY="4"
        app:layout_constraintBottom_toBottomOf="@id/textView2"
        app:layout_constraintEnd_toStartOf="@+id/progressBar2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/textView2"
        tools:progress="100" />

    <ProgressBar
        android:id="@+id/progressBar2"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:progressBackgroundTint="@color/transparent"
        android:scaleY="4"
        app:layout_constraintBottom_toBottomOf="@id/textView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/progressBar"
        app:layout_constraintTop_toTopOf="@id/textView2"
        tools:progress="100" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="24dp"
        android:text="TextView"
        android:textAlignment="center"
        android:textColor="@color/black"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

以下是将进度设置为 100、50 和 1 时获得的结果:

100:

50:

1:

如果您添加自定义可绘制对象作为背景，您可以使进度条相应地填充空间并使其颜色为红色。

请注意，照片中的灰线来 self 在 Android Studio 中的设计选项卡，除了调试时之外不可见。

更新:这是使进度条在 5 秒内从 100% 重置为 0% 的动画代码。

ProgressBar pb = findViewById(R.id.progressBar); ProgressBar pb2 = findViewById(R.id.progressBar2);

    ObjectAnimator animation = ObjectAnimator.ofInt(pb, "progress", 0, 100);
    animation.setDuration(5000);
    animation.setInterpolator(new DecelerateInterpolator());
    animation.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animator) { }

        @Override
        public void onAnimationEnd(Animator animator) {
            //do something when the countdown is complete
        }

        @Override
        public void onAnimationCancel(Animator animator) { }

        @Override
        public void onAnimationRepeat(Animator animator) { }
    });
    animation.start();

    AnimatorSet set = new AnimatorSet();
    set.playTogether(ObjectAnimator.ofInt(pb, "progress", 100, 0),
            ObjectAnimator.ofInt(pb2, "progress", 100, 0));
    set.setDuration(5000);
    set.start();