Android仿真翻页(一)，基于pagecurl二开

演示

开始

主要是在CurlDraw.kt

1.矩阵(轴心)+旋转+图层裁剪

2.利用 saveLayer 实现整个"背面内容 + 遮罩层"的整体半透明度

GitHub地址

@ExperimentalPageCurlApi
private fun CacheDrawScope.prepareCurl(
    config: PageCurlConfig,
    topCurlOffset: Offset,
    bottomCurlOffset: Offset,
): ContentDrawScope.() -> Unit {
    // 构建一个四边形，表示页面中应作为背面镜像的部分
    // 在所有情况下，多边形都应包含4个点，即使由于阴影渲染导致背面仅是一个小“角落”（只有3个点）也应如此，否则在切换3点和4点的多边形时会产生视觉伪影
    val polygon = Polygon(
        sequence {
            // 找到旋涡线与右侧的交点
            // 如果找到交点，则将其添加到多边形点列表中
            suspend fun SequenceScope<Offset>.yieldEndSideInterception() {
                val offset = lineLineIntersection(
                    topCurlOffset, bottomCurlOffset,
                    Offset(size.width, 0f), Offset(size.width, size.height)
                ) ?: return
                yield(offset)
                yield(offset)
            }

            // 如果顶部交点位于页面卷曲区域的范围内，则从顶部取两个点，否则取与右侧的交点
            if (topCurlOffset.x < size.width) {
                yield(topCurlOffset)
                yield(Offset(size.width, topCurlOffset.y))
            } else {
                yieldEndSideInterception()
            }

            // 如果底部交点位于页面卷曲的边界内，则从底部取两个点；否则取与右侧的交点
            if (bottomCurlOffset.x < size.width) {
                yield(Offset(size.width, size.height))
                yield(bottomCurlOffset)
            } else {
                yieldEndSideInterception()
            }
        }.toList()
    )

    // 计算X轴与卷曲线之间的角度（以弧度为单位），用于将镜像内容旋转到卷曲后页的右侧位置
    val lineVector = topCurlOffset - bottomCurlOffset
    val angle = Math.PI.toFloat() - atan2(lineVector.y, lineVector.x) * 2

    // 准备一个lambda函数来绘制后页的阴影
    val drawShadow = prepareShadow(config, polygon, angle)

    Log.d("=====lineVector======", lineVector.toString())
    Log.d("=====angle======", angle.toString())
    Log.d("=====polygon======", polygon.toString())


    return result@{
        withTransform({
            // 外层：以底部折痕点为轴镜像，并旋转（此时位置对了，但文字是反的）
            scale(-1f, 1f, pivot = bottomCurlOffset)
            // 旋转角度(有卷页效果=翻起角度)
            rotateRad(angle, bottomCurlOffset)
        }) {
            // 绘制阴影
            // this@result.drawShadow()
            clipPath(polygon.toPath()) {
                // 负负得正
                withTransform({
                     scale(-1f, 1f)
                }){
                    // 利用 saveLayer 实现整个"背面内容 + 遮罩层"的整体半透明度
                    drawIntoCanvas { canvas ->
                        // 透明度
                        val paint = android.graphics.Paint().apply {
                            alpha = (0.8 * 255).toInt()
                        }
                        // 开启透明图层
                        canvas.nativeCanvas.saveLayer(null, paint)

                        // 绘制内容
                        this@result.drawContent()

                        canvas.nativeCanvas.restore()
                    }

                    // 绘制纸张材质的底色叠加（模拟纸张背面泛白/泛黄效果）
                    val overlayAlpha = 1f - config.backPageContentAlpha
                    drawRect(config.backPageColor.copy(alpha = overlayAlpha))
                }
            }
        }
    }
}

总结

它是一个纯粹的 2D 平面几何、坐标系变换以及图层裁剪