解析用Pixate制作shared element元素扩展转场效果
很久没有更新教程了。最近一阵比较忙。今天简单分享下如何用Pixate制作利用单个元素进行扩展转场的效果。
很久没有更新教程了。最近一阵比较忙。今天简单分享下如何用Pixate制作利用单个元素进行扩展转场的效果。
效果如下：
其实这个效果在Pixate里制作并不难，只是步骤相对有点繁琐。
最重要的是，一定要自己清楚想要达到一个什么效果以及在此过程中如何去拆分、组合一些原来来达到目的。
首先，我分析了一下我想要的效果的一些关键细节点，这有助于我更好的选择有哪种方式在达到我想要的效果。
一、 关键细节点如下：
Cover image（封面图）的Transition（转场动画）在视觉上需要看上去是无缝连接的。
在默认状态下表现出Card（图片）特有的属性。即：Cover image（封面图）的左/右上角与Card(卡片)需要有一致的圆角效果）
在Cover image(封面图) 转到Detail(详情页)后，所显示的Thumbnail(缩略图)需要是四个角都是直角
Card（卡片）上得 Title（标题）单独具有fade in/out的渐隐效果
Card(卡片)在转入detail（详情页）时有从中间拉伸打开的效果
根据以上这几个关键细节，我将所需要的元素单独提取出来。
将封面页的卡片拆分成4个不同作用的元素：
Image for transition (作为转场动画时使用，同时用作Detail页面的Thumbnail)
Cover image（作为默认显示下使用）
Card background（用于默认显示的Card背景，同时在制作时我复制了一个相同的层用于转场时拉伸时显示的动画素材）
Title（独立的标题用于fade-in/out渐隐动画）
二、 实现原理：
其实实现原理很简单，我们一开始将带有圆角的cover image与card background一起默认显示出来，同时将image for transition放置于cover image一样的位置，并把它设置为隐藏。
当点击目标卡片时候，带有圆角的默认cover image隐藏，同时image for transition马上显示出来，并进行位置的移动和缩放。最后设置其大小和位置在detail详情页面中的制定位置。这样一个“偷梁换柱”的过程就可以实现在默认情况下看到是带有圆角属性的图片卡片，但是在转到详情页之后图片则显示为正常的四个角为尖角的图片。
最后再单独设置Title标题的动画即可。
三、 布局结构：
接着利用这些素材来进行以下的布局。（理论上来说，在布局上没有严格规定Image for transition必须放在cover image的上面。但是在实际项目中我们会发现，无论是从整理打包层级的角度出发还是设置整个项目中得几个关键场景的角度出发。将cover image与Card打包成组为一个主题会方便很多。让image for transition独立依附于card组合之上是比较好的一种选择。）
四、 过渡动画原理：
在pixate内没有自定义的动画路径。所以想要制作类似路径动画比较困难。
但是我们通过简单的分析还是可以模拟一部分的路径动画。
在这个案例中我们可以知道cover image其实是经过Y轴的下降和X轴的平移以及自身的缩放来制造出曲线路线的动画效果。
从下图中我们可以看到目的是从A点得位置移动到B点位置。
在这一过程中下降和平移虽然是2个分开的步骤，但是我们可以通过设置2个move之间delay的延迟差来表现下降的同时平移，并且再配合缩放和设置合适的动画曲线来缩放来达到最终的效果。
这个过程需要耐心的不断的调试才能调试出比较满意的效果。所以各位在制作类似的效果时一定要耐心，不断地尝试。切忌浮躁~
以上为本人一些小经验分享，希望对各位有用。
最后还是附上源文件共大家参考。
感谢收看，下次再见啦~
