移动开发平台(Framer Studio for mac)

Framer Studio for mac是Mac os平台上的一款功能非常强大的Mac开发软件，Framer“是给“具有前端开发能力的设计师”打造的交互设计工具”这部分结论（甚至我觉得，由于选择了Coffee做工程语言，这根本就是给前端用来做Prototype的），但是不认同要使用 Framer 必须要学习JS 再学Coffee的观点。

Framer Studio for mac可以方便的让设计师把 Photoshop 或 Sketch 里的设计图导入到 Framer.js 里面，而这次 Framer Studio 的发布，让这一创作过程更加简便了，极大了方便了设计师。

软件背景

Framer.js 的创始人 Koen Bok 和 Jorn van Dijk 分别是之前 Mac 平台著名的软件开发公司 Sofa 的创始人和设计总监，随着 Sofa 几年前被 Facebook 收购，他们也都加入到 Facebook 做起了产品设计，但最近两人离职后创立了 Podium，专注于打造小而美的生产力工具，当然目前还只是针对 Mac 平台，可以说是建立了第二个 Sofa 吧。

其实 Framer.js 很早就推出并且开源了，随着最近 3.0 的发布，底层代码已经重新全写了，功能和动画效果也更加完善了，官网上的教程和例子也很丰富，可以看到利用它可以创造出和 Carousel，Google Now 这些 app 一样的复杂交互。另外它还提供了一个 The Framer Generator，可以方便的让设计师把 Photoshop 或 Sketch 里的设计图导入到 Framer.js 里面，而这次 Framer Studio 的发布，让这一创作过程更加简便了，极大了方便了设计师，并且之前内测时也得到了包括 Facebook，Dropbox 等公司的顶级设计师们的一致好评。

Framer.js 由于是需要手写代码来实现交互效果的，对于单纯只做设计的设计师可能很难上手，而且它的代码是 CoffeeScript，这让设计师尤其是交互设计师学习的成本更大了…

Framer.js介绍：

Framer.js 是一个可交互原型框架，基于JavaScript，较为诱人的有以下几点：支持手势、动效、状态、基于网页、容易实现、可在任何设备上浏览。最近，我们用Framer.js制作了 Aurora的应用原型。

仅需一点点编码知识，便可以将多种手势支持、交互效果、动效加入到设计中，还可以在手机或平板中预览。而且Framer还提供了 Framer Generator （Framer生成器）插件，可以快速导入Photoshop和Sketch中的图像并根据图层分层，一期 Framer Studio这款可预览编辑器。

图层

Framer中的一切都基于图层。图层指的是区域有限的、有颜色的文本或图像。除此之外，每个图层都有一系列属性可以调整，例如不透明度、宽度、高度、比例、模糊等等。在原型制作中，我们用以下两种方式来使用图层：

1.图像图层，例如UI设计中得标题、按钮等等。在分层导出之前，我们需要考虑哪些部分需要添加效果，哪些无需，无需的部分就不用分的那么仔细了，否则太多的图层做起来会很麻烦。

2.热区图层（类似QC中的Hit Area），设置热区图层后，我们可以通过点击来触发交互动效。在调试过程中，热区透明度要设置为50%。当设置完热区后，透明度设置为0%。

下图便是一个案例，图像为一个图层，可见的热区又是一个图层。 

// IMAGE myPanel = new Layer({x:20, y:100, width:280, height:200, image:"images/panel.png", opacity:1})  // HOTSPOT myHotspot = new Layer({x:20, y:100, width: 76, height: 50, backgroundColor: "lime", opacity:.5})

图层里面也可嵌图层，处理成组元素比较方便

状态

图层可以有一系列的状态，在触发时会有不同的属性改变。在应用的不同状态下，图层显示不同的状态，例如菜单的侧滑，标签栏悬停时的高亮等等。通过交互来触发状态的改变。

既然状态和图层有所关联，那么可以通过定义隐藏面板的状态。

// STATES myPanel.states.add({   hide: {y:600,rotationX:90} })

动效

我们所创建的每个原型在需要的场合都设置了动效，无论是直接交互，或是触发事件。实际上，好的动效能够处理转场过程中大多数问题，首先能够引导用户，也能适时的展现内容。

动效有很多属性可以设置，例如设置物体状态A Y轴位置是0，状态B Y轴位置为100，可以选择默认效果，也可以修改持续时间、延迟以及动效的其他属性。而且，你还可以选择触发动效的交互方式。

除了标准的交互->动效，也可以设置无需交互而显示的动效。例如，你先让元素如下图般扩大进入视窗。

// ANIMATIONS myPanel.animate({   properties: {     scale: 1   },   time: .2,   curve: "spring(100,10,0)" });

Framer的动效弹性十足，不过你也可以非常方便的动态调整。可以设置动效的曲线，如下。

// ANIMATION OPTIONS myPanel.states.animationOptions = {   curve: "spring(100,12,0)" }

Framer中，大部分动效属性都可调节。Framer相当于一个大沙盒，想做动效？随便玩！

交互

Framer提供了一系列交互设置，称之为事件，包括了敲击、双击、拖移等更多。虽然手势不是很多。但是可以扩展——Prototyping swipe and drag gestures with Framer 3

敲击交互效果：

// INTERACTIONS myPanel.on(Events.Click, function(event) {  myPanel.states.next("hide"); })

当在图层上侦测到交互事件，就可以触发很多东西，例如状态改变产生动效果。