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
相关源码及资料，需要参与众筹项目,可以关注公众私信哈
如果觉得《车载多屏互动联动动画版本同屏幕大小情况方案设计--众筹项目》对你有帮助，请点赞、收藏，并留下你的观点哦！
