注册有好礼动画案例来分享我是如何利用Pixate来实现这个效果的
2020-11-27 10:48:02 阅读（184）
本文针对的对象是对Pixate有一定了解的中高级用户，Pixate是设计师设计的原型开发工具。基于原始效果的动态原型设计，无需任何代码即可实现。这一次，我将通过Materialdesign中的一个经典FABign（FloatingActionButton）动画案例分享我如何使用Pixate来实现这种效果。(由于本文涉及的对象是中高级用户，篇幅有限，我只提供制作思路和一些关键参数。）进入主题，先看效果:这是基于我目前正在制作的一个以音乐播放器为功能原型的FAB案例列:当触发底部“播放音乐”栏上的暂定按钮时，当前音乐暂停，音乐栏将关闭形成圆形FloatingButton。点击FAB代表的播放按钮后，FAB将扩展到之前的“播放音乐”栏，继续播放音乐。在其Materialdesignguideline中，Google将其描述为：ToolbarThefloatingactionbuttoncantransformintoatoolbaruponpressorfromatoolbaruponscroll.Thetoolbarcancontainrelatedactions,textandsearchfields,oranyotheritemsthatwouldbeusefulathand.参考Guideline后，我画了这样一个过渡动画参考:从上面的分镜草图可以看出，过去的动画效果实际上分为两部分:“位移”和“扩展”。FAB圆形按钮的直径范围也被限制在“扩展”范围内。“扩展”的范围也限制在FAB圆形按钮的直径范围内。由此可见，我们需要特别注意FAB扩展范围的设置。在Pixate的制作中，我们可以使用底栏图层的Cliping属性 FAB资源本身的缩放属性可以产生相应的效果：（为了方便位置的对应性和识别，我将底部栏设置为红色），因为Clipping属性只是一次性开关，不能根据相关级别的活动属性设置条件。因此，一旦FAB的扩展范围固定，圆形FAB就不能正常显示在右下角。因此，我们需要通过一个小障碍来解决这个问题：1。在正常状态下复制两个FAB，一个作为常住显示区（FAB）；过渡动画效果仅用于和扩展（FABEffect）。2.设置FAB和FABeffect交替点击FAB位移到FABeffect坐标并透明消失，此时FABeffect显示并完成过度的动画效果。(收起时反之亦然)(供参考的图层设置和位置布局)下一步就是考验你的耐心和细致，如何在两个FAB之间交替调整Duration(动画周期)和Delay(延迟)值。Tips：1.最后，当FAB和FABeffect过度交互时，建议使用easein和easeout下的circular曲线属性来显示FAB的位移。2.如果你足够小心，你会注意到我把播放按钮和FAB分成两个资源元素。因为这样，播放按钮的显示过度和时间可以单独控制，当它们被收起来成为圆形按钮时。主要目的是感觉变化僵硬，不受残影留存的影响。而且会使过度的动画更加生动。希望以上我提供的制作思路能对你有所帮助。在未来，我还将不时添加更多关于在Pixate上制作基于MaterialDesign的交互动画效果的经验。谢谢！
推荐阅读
猜你喜欢
关注微信公众号
和10万中小企业共同成长
扫码下载APP
享全方位服务一触即达
Copyright © 2004-2022 万商云集（成都）科技股份有限公司 版权所有
蜀ICP备12001963号-2
川公网安备 51010402000322号
快速找产品
扫码下载APP
全方位服务一触即达
关注万商云集
和10万中小企共成长
400-0033-166
8:30-18:00
