提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
工具准备:
Quartz Composr+Origami+jQC 1.0
参考效果:
Path应用
想重做Path效果灵感来自《QC+Origami制作UI原型》这篇文章,但是并未仔细阅读制作步骤,里面关于坐标系问题说的比较好,制作部分比较麻烦。。。
素材准备:
文末提供sketch源文件下载
(偷懒了,大部分都是手机截屏,抠的)
Origami搭建准备 三板斧
双击Layer Group,在里面将图像素材铺进去,排好序
将3-9图层,所有的坐标都设置为X postion=-270 Y Position=-518,将红色加号上方的蒙版图层Alpha值设置为0
连线设置,最后连接到红色加号上方的黑色蒙版图层的Alpha里
Hit Area的Layer信息(可以自己勾选Setup Mode来精调位置)
Transition的数值设置:
注:由于本案例效果比较简单,因此用了简单的mousedown(按压)+Interaction 2的Down(Drag也可)来模拟按压效果,用 mouseup(松手)来解决松手后的回复。
最后的结果:
分析Gif图像,我们可以发现,
初次按压后,5个按钮逆时针旋转360度,开始启动弹出,最左上先行,按顺时针依次。
再次按压后,5个按钮顺时针旋转到180度时,开始启动弹回,最右下先行,然后按逆时针依次。
先来放置5个小按钮,位置需要稍微计算一下,我们来计算一下圆中各个点的三角函数
相机图标(x,y -270,-280) 定位图标(-179,-298) 音乐图标(-102,-350),引用图标(-50,-427),睡觉图标(-32,-518),记下原位置(-270,-518)
switch后面这么连:
Classic Animation的设置,持续时间是1s,运动方式Exponential In-Out,运动曲线如下 :
Z Rotation接到5个小图标Layer的Z Rotation上,最后效果:
下面做5个classic animation系列,这么链接:
各个Classic Anmation对应者5个小图标的 X Y坐标变换,第一个只Y轴移动,第五个只X轴,5个图标的起始量都是(-270,-518),终量参考上方三角函数计算,然后对应连接到各个图层上。
5个Classic Animation时间依次为0.6 0.7 0.8 0.9 1,运动方式Exponential In-Out,效果:
为了让来回的速度不一样,我们需要switch 接1+4 个transition来调节来回时的各种运动状态。
最上面的Transition控制来回的旋转速度,Value接Duration,开始0.5,结束1
下面的依次(第三个不用,因为0.8-0.8)
1 (1->0.6)
2(0.9->0.7)
4(0.7->0.9)
5(0.6->1)
效果(经过调试Z Rotation 前面的Classic Animation 运动曲线调节为):
第四步:简单侧拉效果
在画布上找一处位置,新建下面的系列:
Transition的数值设置为0->580,下面依次连接到主界面:红色加号图标,蒙版图层,5个小按钮图标的X Postion上,
如果之前已经占用了X Postion,可以用Math Patch叠加,如下。新的输入要接在Math模块的下方(因为是相对增量)
对于X Postion没有占用的,Intial Value设置为原来Layer中的数值,新的输入依然接入到下方
展示一下连线:
现在要修改一下新建的Hit Area,让可交互区域也可以跟着移动
完成,欣赏一下效果:
Sketch素材源文件和QC动画源文件下方提供:
补充一个镜头感+透视感的gif(实验)
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册