前言

这次更新进度时间间隔有点长，主要原因呢，找可用的API数据源，这玩意竟然占了耗时大头……最终效果还未知，到时候再说吧……另外，由于阅读器模块的基本结束，所以开发方向转向整体APP开发，所以设计搭建框架，选择合适的辅助工具，思考该做成什么样子，也占用了一定时间；

当然以上不是为了给天天摸🐟 找借口，你们要信我啊；

回正题，在APP设计上，我想在首页上仿Soul的那个星球效果来做个推荐页面，这次就来实践一下

设计

首先呢，搜了下 github 好像并没有相关的Flutter控件可以直接拿来用，不过如果放宽到 Android 上面，倒是有一大批，那么这块实现方案也不用自己设计了，直接照抄就完事了；

不过抄的过程中，发现这玩意好像也没那么好抄～～抄这玩意的第一件事，是翻出曾经的数学课本，预习一下向量和空间坐标这部分的东西；

不过所幸，核心原理其实不复杂，用一句话就能说明：

全程围绕 罗德里格旋转矢量公式 来搞，通过更新向量、旋转角度，并带进公式中，就能实现需要的效果；

实现与踩坑

实现部分：

在实现方式上：使用的是 Stack 做主体，结合 Transform 来处理位移、缩放、透明度等部分；其build方法就这样：

在 initState 的时候初始化AnimationController，通过设置监听器的方式调用 setState 来更新UI：

计算逻辑就是用那个公式来搞就完事了：

一些小坑

虽然上面说的挺轻松的样子，但是其中还是遇到了一些小坑需要处理：

• 由于引入了Z轴的概念，所以正如第一张图中注释说的那样，要根据Z轴重新排个序，来正确处理点击事件等部分；

  

• 手势竞争这块还有个小问题，由于最外层是一个TabBarView，所以是可以左右滑动的，而星球本身是可以任意方向拖动的，由此带来了一个横向的手势冲突问题：

  这个问题的解决方法有很多，不过我使用的是修改Pan手势竞争器判断阈值的方式来做的处理，用这种做法的人应该比较少吧：

  

结语

现在来看下效果：

好像debug模式下在30fps左右，虽说及格线吧，但是明显手动拖动的时候好很多，可能也是20张图片+transform有点多？也有可能图片这块可以做下优化？后续看看profile模式下的表现，分析下表现耗时再看看；

这次看看标题写的装逼点，效果咋样，不过可没做标题党，说300行就300行，没有故意压缩行数，用的AS的通用代码模版，甚至到最后还有一点空余：