UI-水波纹扩散

Posted on | In

链接

群友提供的

水波纹扩散

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<FrameLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent">

    <View
          android:id="@+id/v_side_after"
          android:layout_width="130dp"
          android:layout_height="130dp"
          android:layout_gravity="center"
          android:background="@drawable/shape_circular_side" />

    <View
          android:id="@+id/v_side_front"
          android:layout_width="130dp"
          android:layout_height="130dp"
          android:layout_gravity="center"
          android:background="@drawable/shape_circular_side" />

    <TextView
              android:id="@+id/v_side"
              android:layout_width="130dp"
              android:layout_height="130dp"
              android:layout_gravity="center"
              android:background="@drawable/shape_circular_center"
              android:gravity="center"
              android:text="诊断中"
              android:textColor="#4F4F4F"
              android:textSize="20sp"
              android:textStyle="bold" />

</FrameLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
private fun startAnimation() {
    val sideAfter: View = findViewById(R.id.v_side_after)
    val sideFront: View = findViewById(R.id.v_side_front)

    val space = 0.25f
    val alpha = 0.5f
    val f = 0f
    animator = ValueAnimator.ofFloat(0f, 0.5f, 1.0f, 1.01f)
    animator?.addUpdateListener { animation ->
                                 val animatedValue = animation.animatedValue as Float //0-1
                                 if (animatedValue > 1) {
                                     sideFront.scaleX = 1f
                                     sideFront.scaleY = 1f
                                     sideAfter.scaleX = 1f
                                     sideAfter.scaleY = 1f
                                     sideFront.alpha = 0f
                                     sideAfter.alpha = 0f
                                     sideFront.visibility = View.GONE
                                     sideAfter.visibility = View.GONE
                                 } else if (animatedValue > 0) {
                                     val afterValue: Float = if (f > 0) {
                                         animatedValue.toDouble().pow((2 * f).toDouble()).toFloat()
                                     } else {
                                         animatedValue
                                     }
                                     sideAfter.scaleX = 1 + afterValue
                                     sideAfter.scaleY = 1 + afterValue
                                     if (animatedValue > space) {
                                         val frontValue: Float = if (f > 0) {
                                             (animatedValue - space).toDouble().pow((2 * f).toDouble()).toFloat()
                                         } else {
                                             animatedValue - space
                                         }
                                         sideFront.scaleX = 1f + frontValue
                                         sideFront.scaleY = 1f + frontValue
                                     }
                                     if (animatedValue > alpha) { // 0.25 - 1 -> 0-1
                                         val viewAlpha = 1f / (1 - alpha) * animatedValue - alpha / (1 - alpha)
                                         sideFront.alpha = 1 - viewAlpha
                                         sideAfter.alpha = 1 - viewAlpha
                                     } else {
                                         sideFront.alpha = 1f
                                         sideAfter.alpha = 1f
                                     }
                                     sideFront.visibility = View.VISIBLE
                                     sideAfter.visibility = View.VISIBLE
                                 }
                                }

    animator?.duration = 2500
    animator?.interpolator = LinearInterpolator()
    animator?.repeatCount = ValueAnimator.INFINITE
    animator?.repeatMode = ValueAnimator.RESTART
    animator?.start()
}

shape_circular_side.xml

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!--内部填充色-->
    <solid android:color="#66E2CFFF"/>
</shape>