?

? ? ? ?日常的Android開發中可能大家都見過類似這種水波紋展開的效果，比如加載一張圖片的時候使用水波紋加載，其實這種實現非常簡單。因為Google已經為我們提供了一個非常方便地工具類

ViewAnimationUtils

? ? ? 它的實現非常簡單，就這個類，其中有個方法如下

createCircularReveal(View view,
        int centerX,  int centerY, float startRadius, float endRadius)

? ? ? 該方法的作用就是實例化一個RevealAnimator，該Animator包含了水波紋效果的屬性設置。其中的5個參數非常好理解，含義如下：

view——為水波紋效果關聯的視圖

centerX——水波紋擴散的中心點x坐標

centerY——水波紋擴散的中心點y坐標

startRadius——水波紋擴散前的初始半徑

endRadius——水波紋擴散后的結束半徑

? ? ? 該方法的強大之處就在于你可以結合動畫的加速器和持續時間來自定義效果，此外水波紋的起始擴展位置也是可以非常靈活地定制的。

? ? ? 核心代碼其實非常簡單，下面的代碼實現了整體布局從左上角水波紋展開的效果+圖片點擊從中間水波紋展開的效果

class TestMDAnimActivity : AppCompatActivity() {
    private lateinit var mClyContainer: ConstraintLayout

    private lateinit var mImgBg: AppCompatImageView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_test_mdanim)

        initWidgets()

        addListeners()
    }

    private fun initWidgets() {
        mClyContainer = findViewById(R.id.cly_container)
        mImgBg = findViewById(R.id.img_bg)

        mClyContainer.post {
            // 這兩個動畫只有前面的可以執行，所以采用該方式想實現兩個水波紋碰撞效果是不可行的
            val anim2 = ViewAnimationUtils.createCircularReveal(
                mClyContainer,
                resources.displayMetrics.widthPixels,
                resources.displayMetrics.heightPixels,
                10F,
                2000F
            )

            val anim1 = ViewAnimationUtils.createCircularReveal(
                mClyContainer,
                100,
                100,
                10F,
                2000F
            )

            val animSet = AnimatorSet().apply {
                duration = 1000
                interpolator = AccelerateDecelerateInterpolator()
                playTogether(anim1, anim2)
                start()
            }
        }
    }

    private fun addListeners() {
        mImgBg.setOnClickListener {
            ViewAnimationUtils.createCircularReveal(
                mImgBg,
                it.width / 2,
                it.height / 2,
                10F,
                2000F
            ).apply {
                duration = 1000
                interpolator = AccelerateDecelerateInterpolator()
                start()
            }
        }
    }
}