一起Talk Android吧（第五百一十六回：绘制压力扩散图)

Posted 2023-03-09 talk_8

文章目录

• 整体思路
• 实现方法
• 示例代码

各位看官们大家好，上一回中咱们说的例子是"绘制向外扩散的水波纹",这一回中咱们说的例子是"

绘制压力扩散图

"。闲话休提，言归正转， 让我们一起Talk android吧！

整体思路

我们在这里说的压力扩散图常见于按钮上，把按钮按下时压力呈现出圆形并且逐渐向外扩展，在各种音视频播放器的按钮上比较常见。

我们介绍一下该效果的整体实现思路：在布局中添加三个圆环，圆环的圆心相同，但是半径不同。然后分别给这三个圆环绑定动画，动画的效果就是我们在上一章回中使用的水波纹向外扩展动画。播放动画时按照一定的时间间隔来播放动画，这样就形成压力扩散图的效果。

该效果借用了上一章回中水波纹效果的思路，与上一章回的水波纹扩散效果相比，访效果使用了多个圆环，而且每个圆环的开始播放动画的时间不同。

实现方法

1. 在布局添加三个自定义的圆环控件；
2. 创建动画文件，我们复用上一章回中的动画文件；
3. 在代码中获取控件，并且给每个控件绑定动画；
4. 按照一定的时间间隔播放三个动画；

示例代码

介绍完使用方法后，我们通过具体的代码来演示,下面是布局中三个圆环控件的代码：

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="300dp"
        android:layout_height="300dp">
        <com.example.WaveView
            android:id="@+id/id_wave_view_1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_width="220dp"
            android:layout_height="220dp">
        </com.example.WaveView>

        <com.example.WaveView
            android:id="@+id/id_wave_view_2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_width="160dp"
            android:layout_height="160dp">
        </com.example.WaveView>

        <com.example.WaveView
            android:id="@+id/id_wave_view_3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_width="90dp"
            android:layout_height="90dp">
        </com.example.WaveView>
    </androidx.constraintlayout.widget.ConstraintLayout>

下面是播放动画相关的代码：

    Animation animation1 = AnimationUtils.loadAnimation(this,R.anim.wave_aimation);
    Animation animation2 = AnimationUtils.loadAnimation(this,R.anim.wave_aimation);
    Animation animation3 = AnimationUtils.loadAnimation(this,R.anim.wave_aimation);
    animation3.setStartOffset(800);
    mWaveView3.startAnimation(animation3);

    animation2.setStartOffset(1600);
    mWaveView2.startAnimation(animation2);

    animation1.setStartOffset(2400);
    mWaveView1.startAnimation(animation1);

上面的代码中设置的时间间隔是固定的，这个值需要和动画的播放时间匹配，这样就才能达到好的效果。我在这里就不演示效果了，大家可以自己动手去实践。

在编写代码时有些细节需要注意：

• 控件布局中需要依据从大到小的顺序的来排列 ，不然大的圆环会把小的圆环覆盖掉；
• 在播放动画时需要先播放小圆环的动画，然后再依次播放大圆环的动画。

看官们，关于"绘制压力扩散图"的例子咱们就介绍到这里，欲知后面还有什么例子，且听下回分解！