[Framer教程]在Windows下如何使用Framer?

本教程翻译自prototypingwithframer,作者Kenny Chen,用户体验设计师。prototypingwithframer是Kenny的博客,会不定期的分享他使用Framer的教程和心得。

在Framer社区里经常会被提起的一个问题是:Windows电脑用户如何使用Framer?目前为止,Framer软件只有Mac版本,但是其核心引擎Framer.js框架却是免费和开源的。这意味着如果你使用的是Windows、Linux系统,或者使用Mac但暂时还没有购买软件的打算,你仍然可以创建Framer原型。

framerjs-github

对于大多数人来说,我们期望尽可能少的做一些配置工作,Atom就是为此而生的。Atom是Github(Github是最受欢迎的代码托管网站)旗下的免费代码编辑器,你可以通过简单的设置来自由定制一些功能用以处理复杂的任务。

atom-logo

Framer.js是使用Javascript编写的,而Framer软件内编程使用的是CoffeeScript,它和Javascript有略微的不同,但最终都会被编译成Javascript。你看到的很多Framer示例原型都是使用CoffeeScript写的,如果你想要深入了解,可以把代码转换成Javascript,使用Framer.js运行它。

通过Atom,我们可以简单的使用CoffeeScript来创建Framer原型并在Windows、Linux和Mac设备上预览。让我们开始吧!

1、下载并安装Atom

打开Atom官网,找到下载按钮,在不同系统上应该会显示不同的格式。

atom-download

如果你使用的是Mac,下载的是zip文件,解压后把它移到应用程序文件夹里,就可以运行啦。

如果你是用的是Windows系统,运行安装器,安装成功之后就可以打开啦。

如果你是用的是Linux系统,下载并安装Debian或RPM安装包。

2、安装插件包

当你第一次启动Atom,你看到的应该是导览页。

atom-welcome

点击右侧面板中的“Install a Package”按钮,打开插件安装器。

atom-welcome-open-installer

此时就会出现插件安装器的界面。在以后你也可以通过Preferences->Install进入插件安装器。

atom-settings-install

搜索“coffee-compile”插件包并安装它。它能够保存你的CoffeeScript代码并将其转化成Javascript。你会发现搜索结果中有很多类似的插件,应该都能用但我没有试过。

atom-coffee-compile

搜索“atom-html-preview”插件包并安装它,它的作用是让你在改动代码时实时查看效果。

安装完成后再次点击Packages标签,会发现Community Packages一栏多了两个你刚刚安装的插件。

community-packages

3、更新插件设置

如果你已经安装好coffee-compile插件,点击Settings按钮,勾选“Compile on Save without Preview”选项,这样就会在你保存文件时自动编译,而不会让你看到Javascript文件。

compile-on-save-no-preview

4、下载Framer.js项目模板

你可以在这里下载项目模板,或者去Framer.js的github主页进入“Get Started”这一段,点击下载按钮下载。

framerjs-template

下载完成之后,解压文件并打开这个Framer文件夹。

framer-js-template

Framer Generator是一个和Framer.js打包在一起的Mac应用程序,它可以让你直接导入Photoshop和Sketch文件,这是Framer Studio的特性。

下面解释一下这些文件分别都是做什么用的:

  • /framer/framer.js — 这就是你创建交互动效原型的核心引擎,一般不要动它,除非你要替换一个新版本。

  • /framer/framer.js.map**** —这是资源地图文件。这些文件记录着从源文件到压缩的最终文件的位置路径,方便你调试压缩文件。就像framer .js文件一样,一般也不用动它。

  • /images/background.png & /images/icon.png — 这个icon图标用在了默认的原型里,背景图片是CSS代码里用到的的黑色背景。

  • app.js — 如果你要使用JavaScript来编写原型,这就是你要编辑的文件。不过一般我们都是直接写CoffeeScript代码,再编译生成这个文件。

  • index.html — 使用一个WebKit内核的浏览器(谷歌的Chrome浏览器或苹果的Safari)打开这个文件,来预览你的原型。它引用了前面提到的framer.js和app.js文件。

5、在Atom中打开该项目文件夹

点击菜单栏中的File –> Add Project Folder 打开刚才的项目文件夹。

atom-project-js

6、将app.js重命名为app.coffee

右击app.js文件,选择rename将其重命名。

atom-rename

将文件后缀名从 .js (JavaScript) 改成 .coffee (CoffeeScript)。

atom-rename-coffee

7、开始写你的CoffeeScript代码吧

因为app.js里的代码是Javascript,所以先删掉它。现在你可以打开app.coffee来编写CoffeeScript代码啦。如果你还不知道如何开始,复制并粘贴下面这段示例代码先熟悉一下。

# Prototyping with Framer
# 创建背景图层
new BackgroundLayer backgroundColor: "#151517"
# 使用Framer logo创建一个图层
logo = new Layer
       width: 128
       height: 128
       image: "images/icon.png"

logo.center()

# 添加一个的状态(原始状态是'default')
logo.states.add
     second:
          y: 200
          scale: 1.5
          rotation: 225
     third:
          y: 300
          scale: 0.5
          blur: 25
# 创建一个弹性动画
logo.states.animationOptions =
     curve: "spring(250,25,0)"
# 当点击时播放动画
logo.on Events.Click, ->
     logo.states.next()

做完后Ctrl+S保存文件,你会发现在你的项目文件夹下多出一个app.js文件。

atom-compile-js

8、预览你的原型

点击侧边栏的index.html文件,接着点击Packages –> Preview HTML –> Enable Preview开始预览。

atom-enable-preview

现在你应该可以看见你的可交互Framer原型啦。

framer-atom

需要注意的是,尽管这可以实时预览,但更新app.coffee并不会触发浏览器刷新。所以当你更新app.coffee并生成app.js之后,还需要额外的一步——打开index.html代码在最后回车或者删除一个空白行,你的原型就会刷新同步到最新的代码啦。

※本文系原创翻译文章,转载请务必注明:转自leadream的简书并附简书主页链接,谢谢!侵权必究。※

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容