[framerjs文档翻译]原型还可以用代码写——简介（0）

framerjs工作界面

首先介绍一下framerjs这款软件。这是一款mac下的交互设计软件，主要使用类似于javascript的语言来实现交互效果。对于想要转产品设计师或交互设计师的前端工程师来说，是一款再好不过的工具。相对于其它交互设计工具来说，它有以下特点：

• 代码编写 ：framerjs可以全程使用代码编写原型中的动效和交互，它是基于CoffeeScript的。
• 实时预览 ：在左侧编写代码，右侧可以实时预览，看还可以在移动设备中查看。
• 可以交互 ：使用状态转换定义原件属性，可以完成复杂的交互，对各种手势都支持。
• 动画特效 ：使物体在3D空间中实现弹性的物理运动，同时采用60 FPS硬件加速。

同时，framerjs还支持photoshop和sketch的文件导入，把图层变成带有属性的js对象处理，省去了繁琐步骤。在手机（Android或IOS）上装上framerjs预览软件，在同一个局域网下就可以实时预览和操作你的原型。你还可以发现它的这些特性：

• 编辑器
• 基于COFFEESCRIPT：让javascript代码在书写时更加清晰、简单。
• 代码片段：由一段段可以复用的代码块组成，工作效率更高。
• 错误提示：自带浏览器元素审查器，实时检查错误。
• 自动补全：编码时会自动补全你定义的函数、特性、变量。
• 预览器
• 视觉反馈：改变能够立即呈现在预览器或移动设备上。
• 实时展现：开启全屏模式实时体验你的动效界面。
• 多预览模式：可以创建各种桌面、pad、手机原型。
• 预览变换：可以调整显示比例，以适应不同屏幕。
• 特效
• 滤镜：拥有模糊、亮度、对比度、色调、饱和度等多种滤镜。
• 动画曲线：支持线性、缓动曲线，使用三个物理参数控制运动曲线。
• 3D效果：在3D空间中随意使用各种动画变换。
• 状态转换：定义不同状态，使用各状态之间的属性变换来创建复杂交互。
• 工作流程
• 分享 ：一键上传并分享你创建的动效原型。
• 镜像 ：使用镜像功能，在你的安卓或苹果设备上实时预览原型。
• WEBKIT 2.0 ：使用最新的web技术。
• 拖动拖放 ：图片可以直接拖动到界面上。

最近我使用该软件做了一些小的原型，感觉还很顺手。如果你和我一样曾经是一个前端工程师，还是很推荐你使用这个软件的。目前该软件只支持mac，有14天的试用期，价格是79.99美元。下一篇文章我就开始边翻译官方文档边写教程啦，欢迎关注。

※本文系翻译文章，转载请务必注明：转载自leadream的简书。谢谢！※