hi，粉丝朋友们：

背景及成果展示

本节带大家来开始学习多屏幕互动的动画版本设计，回忆一下我们已经在之前blog和wms课程中学习了多屏互动的非动画版本如下：

再来看看今天我们想要实现有动画版本的成果：

是不是相比之前的没有动画版本体验还是好了太多，下面就来详细设计动画版本的多屏互动怎么实现。

动画拆解过程：

跟手移动过程

针对拖动画面移动的过程拆解如下：

动画主体画面：就是task的画面，动画过程中需要屏幕1和屏幕2都有在个task的画面
主屏幕1画面移动情况：
主屏幕1是接受了双指触摸的右边移动了offsetX的距离，这时候屏幕1的Task画面也要跟着向右平移offsetX

主屏幕2画面的移动情况：
主屏幕2的Task画面应该最右边往左边有offsetX的画面，所以左边原点相对屏幕偏移距离就应该是 -（width -offsetX） 注意这里应该是负数哈，因为屏幕最左边才是0

那么这样的话对于画面平移的矩阵变化的平移公式就很好计算了

outMatrix.postTranslate(offsetX, y); //屏幕1
outMatrix.postTranslate(-（width -offsetX）, y); //屏幕2

上面就已经清楚了相关的跟手指平移过程设计，接下来看看松开手指后的设计

松手后自动移动过程

其实上一部已经把跟随手指移动的距离offsetX，让两个屏幕画面移动起来了，接下来有可能发生的就是用户移动一定的offsetX后，用户松手了。这个时候就需要对画面进行自动移动处理具体处理规则如下：

即如果 offsetX > =100则需要触发自动移动到屏幕2
offsetX < 100 则需要触发自动移回到屏幕1
自动移动怎么实现？
这里其实即需要使用到动画来 ，动画播放的主要数值就是变化offsetX的值
如果是自动移动屏幕2，则offsetX -----> 1440（width）
如果是自动移动屏幕1，则offsetX -----> 0（原点）

画面问题

上面其实已经规划设计好了移动动画的流程，但是忽略了一个比较关键问题，那就是屏幕1的Task画面和屏幕2的Task画面从哪里来？

方案1截图画面+Task画面方案

这里的画面1就是截图Task的画面，有单独的图层SurfaceControl
优点：与Task画面的图层完全独立，画面1和画面2完全独立互不影响
缺点：截图耗时性能差，且可能出现画面1和画面2可能内容不一致情况

方案2都使用Task画面方案

这种方案采用是对Task的画面图层进行镜像，这样画面1和画面2就相当于公用一个
优点：画面1和画面2完全一致，动画过程中也可以看到画面可能变化过程
缺点：画面1和画面2之间公用一套，所以一画面坐标等修改就会影响另一画面

综合考虑为了良好体验我们选择方案2

相关源码及资料，需要参与众筹项目,可以关注公众私信哈