参考
Android仿Flipboard动画 - 简书 (jianshu.com)
HenCoder Android 开发进阶:自定义 View 1-4 Canvas 对绘制的辅助 (rengwuxian.com)
效果图
源码:HenCoder-CustomView: HenCoder-三篇自定义View仿写 (gitee.com)
原的
仿的
效果稍稍改动了一下, 总体还是一致的
想要通过文字,把这个动画的实现原理讲清楚真的好难,canvas坐标系,几何变换,camera知识太过感性,必须上手敲敲代码才能明白。
我把这个动画叫做纸张折痕动画
简述实现学习折痕动画过程
- 先绘制整张图
- 通过裁切绘制半张图
- 使用camera,3D旋转整张图片
- 使用camera,3D旋转整半张图片
- 综合上述效果,实现完整图片的折痕效果
- 动画的难点在于折痕逆时针选装270°,问题在于不清楚如何出现斜着的折痕。正方形45°对折举例,有两种办法
- 直接两角对齐 ,达成 45°对折。
- 先旋转45° ,在90°对折 ,然后旋转45°, 回到初始位置。
- 两种办法达成的视觉效果是一致的
- 做UI其实很具有欺骗性,看起来是效果A 第一思路是直接实现效果A,但是发现直接实现不了,绞尽脑汁也没办法。 怎么办呢 ?转个弯 ,效果B+效果C == 效果A。 看起来和真的一样,其他人不知道你怎么实现的人 觉得你好牛逼 直接实现了效果A 实际上取巧了 假的A, 真的B+C
- 利用旋转canvas,实现斜着的折痕
- 静态效果已经实现,动态效果就很简单了,把旋转角度提取为全局变量,利用属性动画就搞定了
上述过程每一步都有参考代码,可以细细琢磨
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
// drawFrame1(canvas)
// drawFrame2(canvas)
// drawFrame3(canvas)
// drawFrame4(canvas)
// drawFrame5(canvas)
// drawFrame6(canvas)
// drawFrame7(canvas)
drawFrame8(canvas)
}