origami软件(originsos2.0)-九游娱乐

origami软件(originsos2.0)

本文主要介绍折纸软件(originsos2)，下面跟着东辰网详细了解一下吧。

最近同学们应该听说过大热的折纸2.0。今天@陈大卫带来一个入门教程，附带经验。

随着互联网尤其是移动互联网的快速发展，设计变得越来越重要，所以越来越多的产品经理和设计师在寻找简单易用的工具。

2014年是原型工具爆发的一年，各种工具层出不穷。我尝试过很多种，从代码级Framerjs到QuartzComposer。当然，我最喜欢的其实是Xcode和Keynote。

Origami是QuartzComposer的库。脸书的设计团队在设计过程中使用它进行设计。不久前，Origami2.0的发布大大降低了学习难度，还可以在手机上实时交互，让这个工具大热。

脸书官方发布了折纸2.0的样本和教程。这篇文章主要来源于《折纸入门》的视频教程，所以自己做的，补充了一些内容。

好了，事不宜迟，看干货。

本文介绍了如何打开QC并创建一个新的折纸文件。

左边是编辑区，右边是检视器。您可以单击“调整为第三个”。

编辑区域的右侧有一个检视器Patch(模)。

要添加资源，让让我们简单介绍一下模块的概念。QC中有几个模块:

方角和尖角称为宏，双击可以进入详细编辑，类似于程序中函数的概念(函数是一个事件驱动的或者调用时执行的可重用的代码)。在此视图中，您还可以包含其他视图。我真的不知道。;不理解，就当是层群吧。可以双击进入详细编辑，点击工具栏的向上箭头，哪个按钮(底部写着编辑父)可以返回上一级。

圆角是普通模块。

蓝色的是输出模块，将在查看器中看到。

紫色模块表示模块内部还有其他模块。

添加资源非常简单，只需将相应的图片文件拖入编辑器区域，就会自动创建一个图片模块和一个图层模块。

层模块层是可以在屏幕上显示的显示模块。可以设置它的X/Y/Z位置，可以双击输入值，也可以长按后左右拖动改变值。同时也可以选择锚点是从左上开始还是居中。。

您也可以点按“遮罩图像”，或者更改不透明度、缩放等。

按住commandenter键查看QuartzComposer的各种库，包括Origami库。

选择交互2，交互2。我们可能想知道这是怎么回事第二名来自于，但是你搜索一下就会明白，QC本身是有交互的，就像在Mac系统中，如果复制一个同名同类型的文件，就会变成第二名并自动添加以避免重复。

互动2的意思是:–向下点击，鼠标按下。–向上–点击点击，点击–拖动。

如果需要图形的过渡变化，需要使用过渡模块。

转换模块采用0和1之间的数值，并将其转换为起始值和结束值之间的数值。通过进程输入端口中数字的变化，输出起始值和结束值之间的对应值。

我这里设置的起始值是1，结束值是0.4，和官网略有不同。官网默认看到的是缩放居中的图片，但是我默认设置了图片和文字的页面，也方便你琢磨和对比过渡模块的用途。

增加一个动态效果在缩放图片的时候，其实还有一个动态效果，Pop动态效果。现在让我们让我们添加这个动态效果。

有一个快捷，可以把鼠标悬停在点上，然后在键盘上按A，Pop动画就出来了。

然而，问题仍然是图像可以缩放后不能保持缩放状态，所以我们需要一个开关来切换状态。

开关可以记忆开关状态。它的工作原理有点类似于电灯开关。起初，它是关闭的。如果你按下它，它变成开，然后你再按下它，它变成关。例如，如果你想触摸一幅图片，当你松开手指时，它会缩小并保持这种状态。

翻转端口对于对称交互非常有用，比如你反复点击一个图像，让它从小到大缩放。例如，在一个编辑窗口中，你可能有一个编辑按钮来打开开关(在窗口中是活动)和取消和OK关闭开关的按钮。

快捷键:Shift？？

添加一个过渡来添加一个Chrome图片(图片叫Chrome，不是Chrome浏览)。

给chrome图片层添加一个带注释的透明过渡，将过渡模块的进度输入口与开关模块的开/关连接起来。

好吧，你我们结束了。在开始个视频中，演示已经完成。另一件事我我说的是QC中的层次顺序。

层序号越高，优先级越高，优先级越高。

开始玩吧。最后下载一个折纸Live，连接iPhone和Mac。这样，你才能玩得开心。

让让我们来谈谈@陈大卫的经历:

可以在没有网络的移动终端上显示，移动终端与QC的查看器的交互是同步的。

想想这个场景:

会议室里坐满了老板、研发人员。ampd、运营、销售等一系列相关人员。

你开始慷慨激昂的演讲，谈市场，谈前景，谈感受。It这就像往嘴里吐莲花一样。

但是因为长期画大饼，我的兄弟们已经饥肠辘辘，昏昏欲睡，你改变世界的想法也无人问津！

哎，世人笑我太狂，我笑别人看不透。你轻轻地闭上眼睛微笑，然后咳嗽和咳嗽和给你看一个高保真的交互原型。

就在那一瞬间，Mac已经连接上了投影仪，QuartzComposer也准备好了。一秒钟内将iPhone6Plus数据线连接到电脑…

Duang！Duang！Duang！

动态效果如丝般顺滑，又像墨水滴入水中，荡开，激起会议室里加起来有几百岁的人心中的涟漪。

这时，老板说帮我站起来试试。老板在手机上摆弄着，好像有一双眼睛在窗帘上闪闪发光，越来越专注…

是的，就这么做！老板在做最后决定的时候还在玩弄它。

嗯，它实现这一点并不容易，因此需要调整许多参数...程，一双滑板鞋，黑框眼睛，近视近500，脸上有些不情愿。

它不没关系，这能让你变得如此坚强。我我已经调整了所有的参数，所以你可以直接使用它们。你轻轻点击代码导出iOS，小伙伴们顿时惊呆了！

脸书的动画引擎POP是开源的，这里的动态效果可以实现。这时候大家开始毫不留情的夸你，你的才华好像流得到处都是…

OrigamiLive充分利用了全屏，即使在接的时候打开，也能看到正常的效果，而不是顶部有一个通话栏。

认真说，也有缺点。

不像使用Xcodes自动布局适应各种模型，Origami还是需要选择一个模型然后用这个模型打开OrigamiLive进行演示。否则，你会看到一个无序的布局。对于iPhone6机型，在iPhone5上打开OrigamiLive会显示不完整，如下图:

另外，对于设计师和工程师的合作，从现有的功能来看，设计师可以表示层调试好再交给工程师开发，也可以让工程师更关注程序逻辑的实现。