布景

今天逛,发现了一个有意思的web view作用,想着Android能不能完结一下捏。

Android 时钟翻页效果
原文链接:/post/724435…

具体完结分析请看上文原文链接,那咱们开端吧!

容器

val space = 10f //上下半距离
val bgBorderR = 10f //布景圆角
//上半部分
val upperHalfBottom = height.toFloat() / 2 - space / 2
canvas.drawRoundRect(
    0f,
    0f,
    width.toFloat(),
    upperHalfBottom,
    bgBorderR,
    bgBorderR,
    bgPaint
)
//下半部分
val lowerHalfTop = height.toFloat() / 2 + space / 2
canvas.drawRoundRect(
    0f,
    lowerHalfTop,
    width.toFloat(),
    height.toFloat(),
    bgBorderR,
    bgBorderR,
    bgPaint
)

Android 时钟翻页效果

制作数字

咱们首要居中制作数字4

val number4 = "4"
textPaint.getTextBounds(number4, 0, number4.length, textBounds)
//居中显现
val x = (width - textBounds.width()) / 2f - textBounds.left
val y = (height + textBounds.height()) / 2f - textBounds.bottom
canvas.drawText(number4, x, y, textPaint)

Android 时钟翻页效果

接下来咱们将数字切分为上下两部分,分别制作。

val number4 = "4"
textPaint.getTextBounds(number4, 0, number4.length, textBounds)
val x = (width - textBounds.width()) / 2f - textBounds.left
val y = (height + textBounds.height()) / 2f - textBounds.bottom
// 上半部分裁剪
canvas.save()
canvas.clipRect(
    0f,
    0f,
    width.toFloat(),
    upperHalfBottom
)
canvas.drawText(number4, x, y, textPaint)
canvas.restore()
// 下半部分裁剪
canvas.save()
canvas.clipRect(
    0f,
    lowerHalfTop,
    width.toFloat(),
    height.toFloat()
)
canvas.drawText(number4, x, y, textPaint)
canvas.restore()

Android 时钟翻页效果

翻转卡片

如何完结让其旋转呢? 并且还得是3d的作用了。咱们选择Camera来完结。 咱们先让数字’4’旋转起来。

准备工作,通过特点动画来改动旋转的视点。

private var degree = 0f //翻转视点
private val camera = Camera()
private var flipping = false //是否处于翻转状态
...
//动画
val animator = ValueAnimator.ofFloat(0f, 360f)
animator.addUpdateListener { animation ->
    val animatedValue = animation.animatedValue as Float
    setDegree(animatedValue)
}
animator.doOnStart {
    flipping = true 
}
animator.doOnEnd {
    flipping = false
}
animator.duration = 1000
animator.interpolator = LinearInterpolator()
animator.start()
...
private fun setDegree(degree: Float) {
    this.degree = degree
    invalidate()
}

让数字’4’旋转起来:

  override fun onDraw(canvas: Canvas) {
      super.onDraw(canvas)
      // 居中制作数字4
      val number4 = "4"
      textPaint.getTextBounds(number4, 0, number4.length, textBounds)
      val x = (width - textBounds.width()) / 2f - textBounds.left
      val y = (height + textBounds.height()) / 2f - textBounds.bottom
      if (!flipping) {
          canvas.drawText(number4, x, y, textPaint)
      } else {
          camera.save()
          canvas.translate(width / 2f, height / 2f)
          camera.rotateX(-degree)
          camera.applyToCanvas(canvas)
          canvas.translate(-width / 2f, -height / 2f)
          camera.restore()
          canvas.drawText(number4, x, y, textPaint)
      }
  }
Android 时钟翻页效果

咱们再来看一边作用图: 咱们希望将卡片旋转180度,并且0度-90度由上半部分完结,90度-180度由下半部分完结。

咱们调整一下代码,先处理一下上半部分:

...
val animator = ValueAnimator.ofFloat(0f, 180f)
...
override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    val space = 10f //上下半距离
    //上半部分
    val upperHalfBottom = height.toFloat() / 2 - space / 2
    ...
    // 居中制作数字4
    val number4 = "4"
    textPaint.getTextBounds(number4, 0, number4.length, textBounds)
    val x = (width - textBounds.width()) / 2f - textBounds.left
    val y = (height + textBounds.height()) / 2f - textBounds.bottom
    if (!flipping) {
        //上半部分裁剪
        canvas.save()
        canvas.clipRect(
            0f,
            0f,
            width.toFloat(),
            upperHalfBottom
        )
        canvas.drawText(number4, x, y, textPaint)
        canvas.restore()
    } else {
        if (degree < 90) {
            //上半部分裁剪
            canvas.save()
            canvas.clipRect(
                0f,
                0f,
                width.toFloat(),
                upperHalfBottom
            )
            camera.save()
            canvas.translate(width / 2f, height / 2f)
            camera.rotateX(-degree)
            camera.applyToCanvas(canvas)
            canvas.translate(-width / 2f, -height / 2f)
            camera.restore()
            canvas.drawText(number4, x, y, textPaint)
            canvas.restore()
        }
    }
}

作用如下:

Android 时钟翻页效果

接下来咱们再来看一下下半部分:

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    val space = 10f //上下半距离
    //下半部分
    val lowerHalfTop = height.toFloat() / 2 + space / 2
    // 居中制作数字4
    val number4 = "4"
    textPaint.getTextBounds(number4, 0, number4.length, textBounds)
    val x = (width - textBounds.width()) / 2f - textBounds.left
    val y = (height + textBounds.height()) / 2f - textBounds.bottom
    if (!flipping) {
        // 下半部分裁剪
        canvas.save()
        canvas.clipRect(
            0f,
            lowerHalfTop,
            width.toFloat(),
            height.toFloat()
        )
        canvas.drawText(number4, x, y, textPaint)
        canvas.restore()
    } else {
        if (degree > 90) {
            canvas.save()
            canvas.clipRect(
                0f,
                lowerHalfTop,
                width.toFloat(),
                height.toFloat()
            )
            camera.save()
            canvas.translate(width / 2f, height / 2f)
            val bottomDegree = 180 - degree
            camera.rotateX(bottomDegree)
            camera.applyToCanvas(canvas)
            canvas.translate(-width / 2f, -height / 2f)
            camera.restore()
            canvas.drawText(number4, x, y, textPaint)
            canvas.restore()
        }
    }
}
Android 时钟翻页效果

那咱们将上下部分结合起来,作用如下:

Android 时钟翻页效果

数字改动

好!咱们完结了翻转部分,现在需要在翻转的过程中将数字改动:
咱们仍是举例说明:数字由’4’变为’5’的情况。咱们思考个问题,什么时分需要改动数字?
上半部分在翻转开端的时分,上半部分底部显现的数字就应该由’4’变为’5’,但是旋转的部分仍是应该为’4’, 下半部分开端旋转的时分底部显现的数字仍是应该为’4′,而旋转的部分该为’5’。

canvas.save()
canvas.clipRect(
    0f,
    0f,
    width.toFloat(),
    upperHalfBottom
)
canvas.drawText(number5, x, y, textPaint)
canvas.restore()
// 下半部分裁剪
canvas.save()
canvas.clipRect(
    0f,
    lowerHalfTop,
    width.toFloat(),
    height.toFloat()
)
canvas.drawText(number4, x, y, textPaint)
canvas.restore()
//=====⬆️=====上述的代码显现的上下底部显现的内容,即上半部分境地显现5,下半部分显现4
if (degree < 90) {
    //上半部分裁剪
    canvas.save()
    canvas.clipRect(
        0f,
        0f,
        width.toFloat(),
        upperHalfBottom
    )
    camera.save()
    canvas.translate(width / 2f, height / 2f)
    camera.rotateX(-degree)
    camera.applyToCanvas(canvas)
    canvas.translate(-width / 2f, -height / 2f)
    camera.restore()
    canvas.drawText(number4, x, y, textPaint)
    canvas.restore()
    //=====⬆️=====上述的代码表示上半部分旋转显现的内容,即数字4
} else {
    canvas.save()
    canvas.clipRect(
        0f,
        lowerHalfTop,
        width.toFloat(),
        height.toFloat()
    )
    camera.save()
    canvas.translate(width / 2f, height / 2f)
    val bottomDegree = 180 - degree
    camera.rotateX(bottomDegree)
    camera.applyToCanvas(canvas)
    canvas.translate(-width / 2f, -height / 2f)
    camera.restore()
    canvas.drawText(number5, x, y, textPaint)
    canvas.restore()
    //=====⬆️=====上述的代码表示下半部分旋转显现的内容,即数字5
}

作用图如下:大伙能够在去理一下上面数字的改动的逻辑。

Android 时钟翻页效果

最后咱们加上布景再看一下作用:

Android 时钟翻页效果

小结

上述代码只是提供个思路,仅为测试code,正式代码可不能这么写哦 >..<