Android UI-Flipboard(红板报)折纸动画

865 阅读2分钟

参考

Android仿Flipboard动画 - 简书 (jianshu.com)

HenCoder Android 开发进阶:自定义 View 1-4 Canvas 对绘制的辅助 (rengwuxian.com)

效果图

源码:HenCoder-CustomView: HenCoder-三篇自定义View仿写 (gitee.com)

原的

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e2e076a0c8c24b18adf91aaa682839f3~tplv-k3u1fbpfcp-zoom-1.image

仿的

QQ图片20220507211037.gif

效果稍稍改动了一下, 总体还是一致的

想要通过文字,把这个动画的实现原理讲清楚真的好难,canvas坐标系,几何变换,camera知识太过感性,必须上手敲敲代码才能明白。

我把这个动画叫做纸张折痕动画

简述实现学习折痕动画过程

  1. 先绘制整张图
  2. 通过裁切绘制半张图
  3. 使用camera,3D旋转整张图片
  4. 使用camera,3D旋转整半张图片
  5. 综合上述效果,实现完整图片的折痕效果
  6. 动画的难点在于折痕逆时针选装270°,问题在于不清楚如何出现斜着的折痕。正方形45°对折举例,有两种办法
    1. 直接两角对齐 ,达成 45°对折。
    2. 先旋转45° ,在90°对折 ,然后旋转45°, 回到初始位置。
    3. 两种办法达成的视觉效果是一致的
    4. 做UI其实很具有欺骗性,看起来是效果A 第一思路是直接实现效果A,但是发现直接实现不了,绞尽脑汁也没办法。 怎么办呢 ?转个弯 ,效果B+效果C == 效果A。 看起来和真的一样,其他人不知道你怎么实现的人 觉得你好牛逼 直接实现了效果A 实际上取巧了 假的A, 真的B+C
  7. 利用旋转canvas,实现斜着的折痕
  8. 静态效果已经实现,动态效果就很简单了,把旋转角度提取为全局变量,利用属性动画就搞定了

上述过程每一步都有参考代码,可以细细琢磨

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
//        drawFrame1(canvas)
//        drawFrame2(canvas)
//        drawFrame3(canvas)
//        drawFrame4(canvas)
//        drawFrame5(canvas)
//        drawFrame6(canvas)
//        drawFrame7(canvas)
        drawFrame8(canvas)
    }