flutter 点击旋转动画_Flutter实战动画番外篇-翻页效果实现

前言

前段时间学习Flutter动画时接触了Transform类,查找官方文档时无意间看到了时钟翻页动画觉得也挺好玩的,所以就自己动手使用动画和Transform来实现翻页特效。

思路

开始前自己也思考过如果实现翻页动画,但实际操作时却发现思路不太正确最后只好作罢。最后还是参考了已有翻页实现方式了解实现原理,其实方法很简单通过Transform对数字上部分进行矩阵变化操作实现页面翻转效果。下面通过图解方式更好解释实现过程。

图解

下图所展示内容是从横切面看到的效果。正常情况下是从示例图左边到右边的查看视角。

STEP1

首先可以使用ClipRect组件将数字分割成上下两部分。用A和D来显示翻页的下一个数字。C和B则显示当前准备翻转的数字。开始时我们看到就是C和B组成当前数字。

STEP2

然后数字上部分C使用Transform进行变形旋转达到向上翻转动画效果:setEntry进行变形处理,rotateX向X轴做旋转操作,翻转角度为90度。

STEP3

当C旋转9

你可能感兴趣的:(flutter,点击旋转动画)