车载多屏互动联动动画版本图层设计--众筹项目

文章介绍了在保持屏幕大小一致的情况下,如何设计多屏互动动画,特别是图层设计的核心——镜像图层。通过在移动任务到另一屏幕前创建镜像图层,实现了任务在不同屏幕间的平滑过渡。在移动过程中,任务被移动到屏幕2的DisplayContent,同时屏幕1上添加了层级更高的镜像图层,以实现动画效果。控制这两个图层的位置偏移是动画的关键,相关公式已在前一节中介绍。
摘要由CSDN通过智能技术生成

hi,粉丝朋友们:
上一节已经讲解了多屏互动动画部分的跟手动画和自动动画设计。本节来重点讲解一下最核心的图层设计相关。

屏幕大小一样情况

这里我们采用是屏幕1和屏幕2的Task画面都是真正的Task画面,没有使用截图方式
在这里插入图片描述

具体实现方案:

之前没有动画的版本检测到了双指触摸要移动画面到另一个屏幕动作,就会调用moveRootTaskToDisplay

目前需要考虑把Task画面在屏幕1的Displayontent有一份
且在屏幕2的DisplayContent也有一份
及要2份一模一样的Task画面,但是我们不采用截图方案,那怎么实现呢?
其实这里还是要归功与对放大镜模式的调研,发现有类是mirror图层,即对某个画面进行镜像显示

所以这里我们就需要针对开始移动前,建立好对应的Task的Mirror图层,让显示在屏幕1,因为此时还没有移动,所以Task其实本身也在屏幕1,但是新建立的mirror图层的层级别高所以会盖住
紧接着直接调用moveRootTaskToDisplay,在个方法执行完成后会发现Task已经被转移到了屏幕2了

在这里插入图片描述

主屏幕的新创建的rootTaskCopy的图层节点,下面就是挂载的Mirror节点,这个就是屏幕1的Task镜像图层,而且大家看它的图层明显在DefaultTaskDisplayArea上面,所以遮盖了正常的DefaultTaskDisplayArea

屏幕2图层,这个就和正常一样,在移动瞬间,就调用了moveRootTaskToDisplay,把Task就移动到了屏幕2的DisplayContent
在这里插入图片描述

综合以上即可以知道在移动画面动画过程:
1、Task已经移动到了对应屏幕2的DisplayContent
2、屏幕1新增加了对应层级较高的rootTaskCopy,属于mirror了移动的task

再接下来就是需要考虑如何控制这两个图层的一个位置偏移,前面一节已经介绍过相关的公式

这个部分具体操作参考 https://www.bilibili.com/video/BV1Tv4y1J7eb

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

千里马学框架

帮助你了,就请我喝杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值