【Flutter】小说阅读器改版 (一)—— 仿真翻页的思路优化

2,568 阅读2分钟

「这是我参与11月更文挑战的第13天,活动详情查看:2021最后一次更文挑战」。

前言

前面几篇实现了ListView的一些改造,现在可以对小说阅读器进行一次改版,使其基于ListView而非原来的canvas绘制;

不过在此之前,或许可以做一些其他方面的优化,比如说仿真翻页这块;

现状

在目前已经实现的小说阅读器上,仿真翻页是这样的:

image.png

参考的实现方式,是出自这个系列的文章:

# Android开发之从零开始系列汇总

我实现的方案就是这套方案的简单优化,在性能方面确实也如图所示,没有太大问题;

不过按照其中第三篇的说法,绘制翻起的背面部分,是这样的方式:

image.png

在这步上,可以做一些优化;

方案

原来的方案是这样的:

image.png

说实话,当时看到这段,第一反应就是跳过;确实很劝退人;

总结一下,对图层的操作比较复杂,要经过翻转、一次旋转、2次平移,最后还要涉及到裁剪;

这次对这部分进行一下研究后发现,其实并没必要那么复杂,其实一次旋转加一次翻转最后裁剪一下就行;

以上图为例,说白了就是以这个点为基准进行翻转,最后按翻起页区域裁剪即可:

image.png

至于实现方式这块,最终其实都差不多,因为都是使用矩阵来操作;不过思路这块,就简单很多了;

说白了,可以视为先平移到交叉点的位置,旋转上图中的ehD的角度,然后翻转,也就是scale,最后处理下裁剪下,就是所需要的效果;

如果结合到矩阵上面,跟原来方案上应该差不多,但是从理解层面来说,这种方式好理解多了;

最重要的是,其实也没必要分要用到矩阵,这个方式用提供的API直接就能实现;

结尾

这篇总结了下我回顾原项目中的一个优化点思考,接下来就是用已经自定义好的ListView,来把目前的小说阅读器彻底重构一下;