Android上的录音回放动画

我想知道他们是如何填补代表音频记录的视图的“播放”部分的。以下是电报中的一个例子:

表示音频记录的视图的初始颜色为灰色。扮演的角色充满了蓝色。

我将如何实现这样的事情?我会存储两个图像。第一个代表未播放状态下的音频记录,第二个代表播放状态下的相同记录。

未播放状态:

播放状态:

然后我会创建一个 FrameLayout 有两个 View s和使用 the clip drawable API 逐渐显露所扮演的角色。这是我的代码:

clipped\u view\u动画师。xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="15000"
    android:propertyName="level"
    android:valueTo="10000"
    android:valueType="intType" />

播放了\u片段。xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="horizontal"
    android:drawable="@drawable/played"
    android:gravity="left" />

activity\u main。xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:orientation="vertical"
    tools:context="ru.maksim.sample.MainActivity">

    <Button
        android:id="@+id/play"
        android:text="Play"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/not_played" />

        <ImageView
            android:id="@+id/clippedView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/played_clip" />

    </FrameLayout>
</LinearLayout>

主要活动。千吨级

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        play.setOnClickListener({ play() })
    }

    private fun play() {
        val clippedDrawable = clippedView.background as ClipDrawable
        Log.d(TAG, "level=${clippedDrawable.level}")
        val animator = AnimatorInflater.loadAnimator(this, R.animator.clipped_view_animator)
        animator.setTarget(clippedDrawable)
        animator.start()
    }
}

视频: https://youtu.be/9X8Yb9aKqmQ

我的方法有效。然而,我想知道是否有更好的方法来完成我的工作(在性能、代码行数等方面)。顺便说一下,从我的视频中可以清楚地看到,我超过了每帧16毫秒的限制(Android 5.0.2的三星Galaxy Tab 4)。在现实世界的应用程序中可能更糟。