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

上海/产品设计师/10年前/31040浏览

版权

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

＊＊＊＊注意-1＊＊＊＊＊

第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已经完全免费了

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

173

Report

声明

321

in to comment

Add emoji

喜欢TA的作品吗？喜欢就快来夸夸TA吧！