Android 忆童年 DVD 待机动画（补档）

image

周末逛「即刻」开到这个消息，然后心生一计，我可以自己做一个 DVD 的 loading效果啊。

什么？你不知道 DVD 是啥？呵呵，暴露年龄了。这是一个具有年代感的东西。你没看到过说明要么你年轻，年轻好啊。要么你家穷，我那会儿反正是租的碟片在同学家放，自己家买是不可能的了，一辈子都不可能。

正式开始实现之前，开始简单的建模及分析。

整体效果就是：一个圆或者矩形在一个大的矩形（类比电视屏幕）上面运动，撞到屏幕边缘就开始反弹，这里类比于光的反射。直到它成功切入一个角落，那么就停止运动。

转化一下其实就是我需要在两点连线的轨迹上面作圆或者其他图形，这两点必须满足在大的矩形的任意两边上（可以是相邻的，也可以是隔开的，单不能是同一边）。

那么对应到 Android 中就转换成两个问题，第一 如何通过已知点和角度和相关约束条件计算出另外一个点的坐标。第二 如何拿到两点相连的轨迹。

针对问题一，很明确，这里需要使用到勾股定理那些知识，或者准确的说，这里就是需要用到「正切函数」。

针对问题二，这里就需要使用到 Path 和 PathMeasure 这两个类。在 Path 中我们可以通过 moveTo() lineTo() 两个方法实现两点连线。然后调用 pathMeasure.setPath(path, false) 方式使 Path 和 PathMeasure 相关联。接着介绍 PathMeasure 一个超级厉害的方法： pathMeasure.getPosTan(distance, positionArray, tanArray) 这个方法第一个参数指定一段长度，接着传入两个数组，positionArray[2] 和 tanArray[2] 。
最后positionArray 返回的就是对应 distance 后的终点坐标，到这里，终点坐标问题解决。更厉害的是后面，给到你 X 和 Y 对应的正切值。那么我们这里需要使用的正切值就是 tanValue = Math.abs(tanArray[1] / tanArray[0])

两个大问题解决了，在讨论一些小问题，比如说运动轨迹到底有多少种？

image

大致就是这个情况，唉，第一次用「预览」画图，大家能看明白就好。这里具体有八种情况的轨迹。按大类分就是四大类，分别对应各个象限的情况。每个象限又有上下两种运动方向，所以就是有八大类。

轨迹有八种，但是要再具体的话，每一种又可以再拆分出一种情况。那就是上面提到的，这两点是相邻的或者是隔开的。

image

最后直接刚上一组代码，对应上图的相关情况。

private fun handUp() {
    if (currentX == startX()) {// normal
        val resultX = startX() + (currentY - startY()) / tanValue
        val dx = resultX - endX()
        if (resultX > endX()) {
            Log.e("calculate", "上升 handUp:越界情况")
            val dy = tanValue * (endX() - currentX)
            path.lineTo(endX(), currentY - dy)
        } else {
            Log.e("calculate", "上升 handUp:正常情况")
            path.lineTo(resultX, startY())
        }
        needRevert = dx > 0
    } else if (currentX == endX()) {// normal revert
        val resultX = (endY() - currentY) / tanValue
        val dx = resultX - currentX
        if (currentX - resultX < startX()) {
            Log.e("calculate", " handUp 下降:越界情况")
            path.lineTo(startX(), rectF.height() - dx * tanValue)
            needRevert = true
        } else {
            Log.e("calculate", " handUp 下降:正常情况")
            path.lineTo(currentX - resultX, rectF.height() - ovalY())
            needRevert = false
        }
    } else {
        Log.e(
            "calculate",
            " handUp 异常情况：currentX =$currentX startX=${startX()} endx:${endX()} startX=${startX()} endx:${endX()}"
        )
        animator.cancel()
        state = STATE_ERROR
    }
}

最后效果就是这样的，目前支持「圆形」和「椭圆形」

dvd.gif

源码地址：DVD loading by Joe