Android 忆童年 DVD 待机动画

1,935 阅读3分钟

周末逛「即刻」开到这个消息,然后心生一计,我可以自己做一个 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])

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

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

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

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

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 loading by Joe