【Flutter】小说阅读器改版 —— 翻页动画(三)

3,343 阅读2分钟

前言

经过几天的磨洋工,翻页动画这部分整体框架已经完结,剩下的优化一下就进入下一阶段;

那么这次直接来看下效果:

按照约定,打开 Performance;

首先,现在这是个普普通通的ListView,仅仅提供了各页的内容:

QQ20211209-165613-HD.gif

三步后,就变成了翻页动画的阅读器:

(PS:下面这图很大……虽然原mp4经过倍速播放,图片大小也砍了一半,但这gif仍有20M……现在跑还来得及)

QQ20211209-165824-HD (1).gif

两步之后就是覆盖翻页的阅读器: QQ20211209-170446-HD (1).gif

好像即使是翻页动画的部分,debug模式下,也能勉强达到16ms?好像不用优化处理?

区别处理的部分

虽然思路这块,跟以前的实现方式基本一致,但是一些细节和实现方式上有所不同:

  • 由于以前使用canvas绘制文字,并将canvas转换为picture缓存;这次直接通过paintChild的方式来处理,不再有转换和缓存这一步,对于ListView来说,不关心child的内容;暂时看来这种方式好像并没引入什么性能问题;

  • 同上原因,不再处理第二页的部分,只处理第一页的部分;

  • 步骤顺序上有所调整。先paintChild绘制整体,然后先去绘制阴影部分,这样省下一定的裁剪工作,毕竟最后都要被翻起的部分覆盖掉

  • 翻起部分的计算规则进行调整,尽量避免矩阵等数学因素的引入,使用canvas自带的api来处理;

  • 阴影不画了,直接用drawShadow搞;

结尾

现在乍看上不用对性能优化做什么处理,好像勉强还行?

那接下来就要到核心部分————小说内容的分章分段计算了;

看看时隔两年,textPainter是否有长进,或者有没有什么其他优雅的方式能处理;