header_v0.7.31

【Pixate初级教程】做个能玩的起来的设计(实战篇)

2年前发布

原创文章 / UI / 教程
Jaret_Zen 原创,如需商业用途或转载请与Jaret_Zen联系,谢谢配合。

制作一个比较流行和常见的一种效果:图片随着内容上滑时出现视觉差的效果(Parallax),同时图片由清晰逐渐变模糊。回到内容初始状态后再向下拉动则图片会缩放拉大。右上角的按钮也会随着内容的上下滑动的高度呈现以圆心为中心点的缩放动。

****注意-1*****

第11步的效果中的下拉列表后图片放大仅仅适用于iOS系统。

第11步的效果中的下拉列表后图片放大仅仅适用于iOS系统。

第11步的效果中的下拉列表后图片放大仅仅适用于iOS系统。


因为iOS系统原生的list控件带有弹簧效果。所以可以使用负数的值继续控制图片,但是原生安卓中的list没有弹簧效果,所以列表到达0值时无法继续下拉到负数,故使用标准的scroll做不出此效果。


先来看下效果:

   



****注意-2*****

因为pixate2.0中的fade的动画属性有一定几率会出现bug,如果发现设置的参数与资源和教程无差,但是就是没有模糊效果的,建议先使用Pixate1.8制作。之前在1.8上制作的fade效果,在2.0上可以继续顺利运行

如果之前没有1.8版本,可以通过官网的链接下载:

http://www.pixate.com/downloads/studio/v1.8.3/PixateStudio-1.8.3-rc3.zip


更新:Google已经收购了Pixate,目前Pixate Studio已经完全免费了


 



好了,教程到此就结束了。希望给大家做一个抛砖引玉。如果在制作过程中有任何疑问和想法可以在评论处留言交流。感谢大家!( 附件为相关素材和源文件)


点击查看另一篇:Pixate中级教程:解析Material Design中交互动画效果之FAB


130
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功