动画案例来分享我是如何利用Pixate来实现这个效果的

2020-11-27 10:48:02 阅读（185） 评论（0）

本文针对的对象是对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的交互动画效果的经验。谢谢！

以上就是关于动画案例来分享我是如何利用Pixate来实现这个效果的的相关介绍，更多动画案例来分享我是如何利用Pixate来实现这个效果的相关内容可以咨询我们或者浏览页面上的推荐内容。我们将让你对动画案例来分享我是如何利用Pixate来实现这个效果的有更深的了解和认识。

内容来源:网络，以上内容来源于网络，不代表本站观点，如有侵权，请联系删除。

上一条：给Apple Watch做适配时10个超实用的技巧下一条：伟大的设计很大程度上取决于你怎么说