前言
前段时间学习Flutter动画时接触了Transform类,查找官方文档时无意间看到了时钟翻页动画觉得也挺好玩的,所以就自己动手使用动画和Transform来实现翻页特效。
思路
开始前自己也思考过如果实现翻页动画,但实际操作时却发现思路不太正确最后只好作罢。最后还是参考了已有翻页实现方式了解实现原理,其实方法很简单通过Transform对数字上部分进行矩阵变化操作实现页面翻转效果。下面通过图解方式更好解释实现过程。
图解
下图所展示内容是从横切面看到的效果。正常情况下是从示例图左边到右边的查看视角。
STEP1
首先可以使用ClipRect组件将数字分割成上下两部分。用A和D来显示翻页的下一个数字。C和B则显示当前准备翻转的数字。开始时我们看到就是C和B组成当前数字。
STEP2
然后数字上部分C使用Transform进行变形旋转达到向上翻转动画效果:setEntry进行变形处理,rotateX向X轴做旋转操作,翻转角度为90度。
STEP3
当C旋转9