Framer.js是一个用于原型事件触发器动画的Javascript框架。它拥有多种特性,其中之一是作为一个内置生成器,可以处理来自于自身的 PSD文件的图层组并输出图层中的每个群组以形成项目基础。

sp160909_150235

在设计流程中,原型构建是关键部分。可交互原型的好处是,你可以观察使用者的交互方式,较为逼真的模拟出实际情况,从而优化设计。我们Tack Blog曾经提到过《基于纸质隐喻的动效》,以及Adobe Edge Animate这样直接生成HTML5动画的原型工具。

Framer.js 是一个可交互原型框架,基于JavaScript,较为诱人的有以下几点:支持手势、动效、状态、基于网页、容易实现、可在任何设备上浏览。

4196_140728095002_1

仅需一点点编码知识,便可以将多种手势支持、交互效果、动效加入到设计中,还可以在手机或平板中预览。而且Framer还提供了 Framer Generator (Framer生成器)插件,可以快速导入Photoshop和Sketch中的图像并根据图层分层,一期 Framer Studio这款可预览编辑器。如果你有任何问题,请去Framer Facebook社区——Framer Facebook group.

让我们通过一个案例来了解Framer.js的核心功能。

图层

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

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

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

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

4196_140728095143_1

// 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}) 

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

状态

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

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

4196_140728095207_1

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

动效

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

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

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

4196_140728095243_1

// 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

4196_140728095329_1

敲击交互效果:

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

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

原型模板

在使用Framer进行移动原型设计时,我们额外在HTML和JavaScript文件中添加了一小段,以便在iOS环境下效果更佳真实。

首先我们关闭了设备中默认滚动效果:

// Disable default scrolling 
document.ontouchstart = function(e){ 
 e.preventDefault(); 
} 

这样Framer就能更好地处理拖移事件,避免和浏览器的滚动操作有所冲突

在一些原型设计中,当用户倾斜设备时,我们提供了视差滚动效果。这需要代码支持,下面这段代码会根据设备的倾斜来移动背景图像:

// Shift background image based on device tilt 
window.addEventListener('deviceorientation', function(eventData) { 
 eventData.alpha 
 eventData.beta 
 eventData.gamma 
}); 
 
window.addEventListener('deviceorientation', function(eventData) { 
 var yTilt = Math.round((-eventData.beta + 90) * (40/180) - 40); 
 var xTilt = Math.round(-eventData.gamma * (20/180) - 20); 
 if (xTilt > 0) { 
 xTilt = -xTilt; 
 } else if (xTilt < -40) { 
 xTilt = -(xTilt + 80); 
 } 
 myBackground.y = yTilt * 1.5; 
 myBackground.x = xTilt * 2.5; 
 
}, false); 

除了浏览器外,也可以考虑添加应用图标,启动屏、状态栏样式等等,让原型可以从用户的主屏中启动,而无需浏览器浏览,这样原型看起来更加像是原生应用。在iOS中,可以通过在HTML中添加源标签和合适尺寸的图像来实现。

这样,当用户在手机Safari中打开原型时,他们可以将原型添加到主屏幕中,大家若想实现,可以参考这篇文章——check out this post.

总结
在用Framer.js中花费时间进行原型制作并成功后。我们可以迭代、产生不同版本,并能快速从用户处获取反馈。而且用户、测试者可以直接在多种设备中与操作我们制作的原型。

原型工具有很多,解决问题的面向也不同。Framer是一款强力工具,值得学习。

视频教程

FramerJS: Framer Studio官方入门指南讲解1 图层

Framer Studio FramerJS官方入门指南讲解 2 动画与状态

Framer Studio FramerJS官方入门指南讲解 3 事件与拖拽 Events and Drag

FramerJS 官方网站教程地址:http://framerjs.com/learn/basics/

如果有英文不是很好的童鞋,国内有大神已经将它全文翻译成中文了,地址如下:http://framerjscn.github.io/

-完-