恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Origami官方文档——案例解析
0.0°
2015-03-12 原创文章 经验/观点 原作者: 原作者 举报 50196 182 78 21

解析了一下Origami 2.0案例

阅读本文前推荐阅读下我列的Wayfinder:Quartz Composer学习,里面包含了基础。

在Origami主页第二个页面中提供了大量的Origami官方案例,里面包含了一些标准的原型设计模式和交互构建,有着和2.0之前稍微不同的原型制作思路。这里我尝试着分析一下,我分析的不一定对,有不对的请指正,欢迎讨论。



一、Interaction交互案例

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)


二、Interface界面案例

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切换的效果。


拓展阅读:

Origami官方文档——简介

Origami官方文档——参考

Origami官方文档——教程

Origami官方文档——案例

Wayfinder:QC教程16则 (2.0版本之前的教程,依然适用)

译者自制的案例:

Facebook Paper非官方源文件

Origami Freebie - Recreate UniqDay

Origami Freebie - Camera Function Prototype

Origami Freebie - Voice Search

Origami Freebie - Digital Touch

更新:2015-03-12

收藏

182人已收藏

MartinRGB

http://www.MartinRGB.com

  • 234

    作品

  • 1.7w

    粉丝

  • 413

    关注

  • MartinRGB.com
  • Icon Freebie - Code
  • 实验系列II —— Music App For Tv/Pad
  • Private Trainer 引导页实现
相关标签

    猜你喜欢

      2015-03-12 原创文章 经验/观点 原作者: 原作者 举报 50196 182 78 21

      Origami官方文档——案例解析

      0.0°

      你确定要举报Origami官方文档——案例解析

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2015年03月07日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      78
      182
      21

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录