提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
解析了一下Origami 2.0案例
阅读本文前推荐阅读下我列的Wayfinder:Quartz Composer学习,里面包含了基础。
在Origami主页第二个页面中提供了大量的Origami官方案例,里面包含了一些标准的原型设计模式和交互构建,有着和2.0之前稍微不同的原型制作思路。这里我尝试着分析一下,我分析的不一定对,有不对的请指正,欢迎讨论。
1.Slinkin' Park
这个Interaction案例展示了如何让一串图层一起运动,同时依次延迟,构建运动时间差般的层次感。
解析:
1.红线:Swipe是这个案例中唯一的交互手势,根据红线我们看到,只有最上方的Layer能够识别swipe手势,因此在预览窗中,只能操作最上方的白块。
2.蓝线:时间差层次感运动的构建,当Swipe事件触发后,除了第一个白块会运动,信号还会沿着蓝线,依次向2、3、4、5、6个白块传递,构成了运动的延迟效果。Pop Animation调节弹性运动属性
Swipe Patch的属性,这是2.0新增加的模块,可以设置一个开始位置和结束位置,根据手势的运动情况(据观察根据的是移动方向和速率)来实现两个位置的移动。
tips:Pop Animation有两个控制动画的属性,弹力Bounciness和速度Speed,案例中所有的Pop Animation的属性都集中到Input Spillter上加以控制(Input Spillter的类型是index,里面对数值设定了上限),如果我们对其进行Publish,那么在上一级中可以集中控制。
2.Card Swiper
用多个Swipe模块连接多个卡片图层,实现移走一堆卡片的效果。
这个案例非常简单,3个Swipe对应3张卡片,但是稍微需要注意的是:
红线:第1、2个Swipe分别控制卡片1、卡片2的 X Position和 Z Rotation,这构建了卡片旋转飞走的效果。
蓝线:但与此同时,第1、2个Swipe还控制了卡片2、卡片3的透明度和比例,这样滑走第一张卡片,第二张卡片便从不透明变透明,从0%比例变为100%。构建一种推进的效果。
红线:第三个Swipe还控制了对勾的缩放和透明度。
3.2D Waggle
使用Swipe模块来拖动图层,同时利用Velocity模块所输出的速率来让白块实现2D旋转。
黄框:设置了Swipe控制对象的力、速度、摩擦等因数
红线:Swipe对X Position的控制,因为Start Position和End Position都是0,所以Swipe手势结束后归零。
蓝线:Swipe-Pop Animation后接Velocity,来获取X位置运动的速率。
后面的X Progress 的Start和 End Value分别是1024和-1024,也就是屏幕范围,X Progress—— Transition大致构建了 Z Rotation的公式——Z Rotation=Vx * 200/1024 + Vy * 200/768(有人知道为什么吗?)
蓝线构建了白块移动时的旋转效果。
4.3D Waggle
使用Swipe模块来拖动图层,利用速率来控制拖动过程中3D旋转量
基本上同3,唯一不同的是,左右移动(X position),左右摇摆(Y Rotation),上下移动(Y position),上下摇摆(Y Rotation)
1.Tap to Zoom
利用Switch开关,实现放大/缩小两种状态的切换
很简单的案例,逻辑如下:
Interaction 2(交互事件) —— Switch(控制开关状态) —— Pop Animation (设置弹性动画) —— Transition(图层属性Scale/Opacity(的变化) —— Layer(图层上对应的属性)
2.Long Press Preview
设置一个只有在长按时才出现的动画。
Origami 2.0的新模块,简化了设计流程
图层层次简单描述:1——填充层,2——整个界面图层,3——颜色填充层,这样当长按时出现置灰效果(Opacity控制),4——小汽车层,5——热区。
以前的思路,用jQC 1.0的mouseup/mousedown事件:
mouse down(按下) —— Switch的 Turn On (动画开启)
mouse up(松手) —— Switch的 Turn Off(复原)
如图,新方法:
Long Press不接Switch,这样长按的时候输出1,长按结束复原0
Long Press —— Pop Animation —— Transiton —— Layer Attribute
3.Filter Reveal
学习使用Swipe模块来控制多个效果
Swipe控制多个图层的多个属性
红线:可以和Swipe End/Start Position一一对应的,例如Y Position,直接用 Position连接对应图层的属性
蓝线:无法一一对应的,且关系正比
范围在0~1的,用Progress直接接属性,
有比例关系的,接Transition再接属性
黄线:如果反比关系,接个Reverse Progress反转。
4.Swipe Navigation
点击当前图层,新图层侧滑出现,Swipe新图层侧滑归位。
Origami 2.0官方文档的制作思路非常有趣,这个案例展示了Swipe的开关功能,主要利用Swipe的Progress
当位于Start Position的时候,Progress为0,End - 1
Tap手势触发——Swipe的开关被打开(Flip)——Progress变为0,Scale从1变为0.97(原来的图层缩小)
Tap手势触发——Swipe的开关被打开(Flip)——Swipe的Progress变为0,回到起始位置0(所以新图层左移)
然后又滑,Progress变为1.
5.Swipe Navigation
这个案例展示了Scroll Patch的使用方法,介绍了按页滚动的新功能。
按页滚动功能就是滚动量根据屏幕宽度自动对齐,移动的时候自动移动一个屏幕宽度的位置。
wheel of fortune没有研究明白,求告知。
6.Compose Modal
点加号上出新窗口,点x关闭窗口
这个没什么难度,跟2.0之前的制作思路差不多,注意里面有个Layer Group装了第二页界面,还有个热区
7.Master Detail
展示了Index Switch功能。
Switch只有两种状态On/Off,如果想要做Tab切换那种好几个状态切换就不太方便。这个案例主要展示Index Switch功能
三个热区对应三个交互事件,分别对应三个Index号,作者使用了Demultiplexer并进行了解释:
Demultiplexer会向当前index传送1,而其他index传送0
这样就能实现类似Tab切换的效果。
拓展阅读:
Wayfinder:QC教程16则 (2.0版本之前的教程,依然适用)
译者自制的案例:
Origami Freebie - Recreate UniqDay
Origami Freebie - Camera Function Prototype
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册