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

用户头像
上海/产品设计师/11年前/31077浏览
【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界面设计-app
矢量立体简约UI蓝白图标
【新年UI图标】30个图标
UI_3D图标烟<新春促销>
UI 登录界面设计模板包
手表表盘UI系列
智能家居中心 简约 UI设计组件库
【新年UI图标】游戏/娱乐icon
新拟态风格 UI设计组件库
UI通用设计素材1
钱包ui模板
UI界面 组件
【新年UI图标】汽车icon
【新年UI图标】影音icon
【新年UI图标】珠宝icon
高级表盘系列UI源文件
3D渐变流体抽象矢量UI背景图
【新年UI图标】优惠券icon
盲盒APP UI设计
科技医疗透明柜UI界面设计
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
户外旅行飞机情侣假日出行
你可能喜欢
大家都在看
登录注册