Android animation 30天上手 — Day18 Reveal Effect

Reveal Effect

在App要顯示或隱藏 UI時，直接切換顯示的內容，可能會讓使用者覺得畫面突然變化太大。Reveal animation 動畫可提供使用者視覺上的連續性，減緩變化並引起使用者的注意。

步驟：
1.點下Fab時，取得Fab的x,y座標，開啟第二頁。
2.第二頁從第一頁傳來的Fab座標開啟Reveal 動畫

第一頁

fab.setOnClickListener { v ->
    val location = IntArray(2)
    //取得fab的x, y座標
    v.getLocationOnScreen(location)
    val revealX = location[0]
    val revealY = location[1]
    val options = ActivityOptionsCompat.makeSceneTransitionAnimation(this, v, "Transition")
    //傳入fab的x, y座標
    val intent = Intent(this, RevealEffectActivity::class.java)
    intent.putExtra(RevealEffectActivity.ARG_CIRCULAR_REVEAL_X, revealX)
    intent.putExtra(RevealEffectActivity.ARG_CIRCULAR_REVEAL_Y, revealY)
    ActivityCompat.startActivity(this, intent, options.toBundle())
}

第二頁
從第一頁傳來的Fab座標開啟Reveal 動畫

private fun startReveal(centerX: Int, centerY: Int) {
    //動畫的開始半徑
    val startRadius = 0.0f
    //動畫的結束半徑
    val endRadius = Math.max(rootLayout.width, rootLayout.height).toFloat()
    val circularReveal = ViewAnimationUtils.createCircularReveal(rootLayout, centerX, centerY, startRadius, endRadius)
    circularReveal.duration = 400
    circularReveal.interpolator = AccelerateInterpolator()
    rootLayout.visibility = View.VISIBLE
    circularReveal.start()
}

ViewAnimationUtils.createCircularReveal參數

view View: 執行Reveal 動畫的View
centerX int: 相對於View，動畫圓心的x坐標
centerY int: 相對於View，動畫圓心的y坐標
startRadius float: 動畫的開始半徑
endRadius float: 動畫的結束半徑

完整程式：
https://github.com/evanchen76/RevealEffect

參考：
https://developer.android.com/training/animation/reveal-or-hide-view

下一篇：Day19 Ripple Effect