Android 揭露動畫（Reveal Effect）的兼容實現

Reveal Effect

Android 5.0 系統提供了 ViewAnimationUtils#createCircularReveal() API，用於給咱們方便的建立揭露動畫。可是該 API 只支持 5.0 及以上，那麼 5.0 如下該怎麼辦呢？網上的一些方法，大多都是經過自定義 Shape 而後經過 Scale 動畫來作，這並非一個好的方法，侷限性太大。其實官方就提供了一個兼容實現類：CircularRevealCompat，咱們徹底可使用它來作兼容。

CircularRevealCompat

CircularRevealCompat 類中也有 createCircularReveal() 函數，使用方式也都和以前同樣。惟一區別在於第一個參數爲 CircularRevealWidget 接口而不是 View：

public static Animator createCircularReveal(
    CircularRevealWidget view, float centerX, float centerY, float startRadius, float endRadius) {
  ...
}
複製代碼

也就是說，咱們必須對實現了 CircularRevealWidget 接口的 View 作動畫，而沒有實現的則不能夠。

CircularRevealWidget

官方給經常使用的 ViewGroup 都實現了該接口，咱們能夠選擇直接對這些 ViewGroup 來實現動畫：

若是是直接對像 ImageView 等 View 作動畫，就只能使用這些 ViewGroup 再包一層了。或者是自定義 CircularRevealWidget，好比下面這個我自定義的一個 CircularRevealImageView：gist.github.com/Airsaid/dbb…

代碼示例

• 添加 material 庫支持

implementation 'com.google.android.material:material:1.1.0-alpha08'
複製代碼

注意：material 庫的版本必須爲 1.1.0-alpha08 或以上，由於在該版本中 CircularRevealHelper.Delegate 才設置爲了 public。這樣自定義 CircularRevealWidget 就不會報錯。

• xml 文件中定義：

<com.airsaid.revealeffectview.CircularRevealImageView
    android:id="@+id/targetImage"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="ContentDescription"/>
複製代碼

• 代碼：

private fun startRevealEffectAnimator(view: CircularRevealImageView) {
  val x = view.x
  val y = view.y
  val radius = Math.hypot(view.width.toDouble(), view.height.toDouble()).toFloat()
  val startRadius = 0f
  val endRadius = radius
  val revealAnimator = CircularRevealCompat.createCircularReveal(view, x, y, startRadius, endRadius)
  revealAnimator.interpolator = AnimationUtils.LINEAR_INTERPOLATOR
  revealAnimator.duration = 1000
  revealAnimator.start()
}
複製代碼

總結

對 5.0 如下設備兼容揭露動畫， 其實使用官方提供的CircularRevealCompat 類就能夠了。官方自己對一些經常使用的 ViewGroup 都提供了支持，能夠直接使用這些 ViewGroup。或者若是隻是對 View 作動畫，而不想使用這些 ViewGroup 再包裹一層，則能夠本身經過自定義 CircularRevealWidget 來解決。