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

用户头像
上海/产品设计师/11年前/31080浏览
【Pixate初级教程】做个能玩的起来的设计(实战篇)
用户头像
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


173
举报
|
321
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
新能源APP应用UIKit
【新年UI图标】会员icon
Security Camera UI kit
钱包ui模板
【新年UI图标】体育icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】旅行icon
高级表盘系列UI源文件
拟物风质感写实UI卡片合集源文件
高级感金属拟物 UI设计组件库
手表表盘UI系列
UI界面 组件
新拟态风格 UI设计组件库
【新年UI图标】汽车icon
【新年UI图标】30个图标
【新年UI图标】钱包icon
3D渐变流体抽象矢量UI背景图
科技医疗透明柜UI界面设计
UI 登录界面设计模板包
盲盒APP UI设计
UI通用设计素材1
【新年UI图标】秒杀icon
3D卡通UI界面图标可爱插画免扣素
你可能喜欢
大家都在看
登录注册