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

用户头像
上海/产品设计师/11年前/31075浏览
【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吧!
推荐素材
UI应用平面图标
【新年UI图标】旅行icon
UI界面 组件
【新年UI图标】银行卡icon
钱包ui模板
【新年UI图标】美食icon
新能源APP应用UIKit
高级表盘系列UI源文件
科技医疗透明柜UI界面设计
森系3D渐变流体抽象矢量UI背景图
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
APP/小程序商业项目UI模板|99个高保真UI+79个原型
UI通用设计素材1
【新年UI图标】活动icon
UI 登录界面设计模板包
【新年UI图标】体育icon
【新年UI图标】积分icon
手表表盘UI系列
我的钱包-UI界面设计-app
【新年UI图标】礼物/活动icon
【新年UI图标】相机icon
智能家居中心 简约 UI设计组件库
Security Camera UI kit
你可能喜欢
大家都在看
登录注册