ldehai

让每个人都能接受平等的教育

嗨,我是@ldehai,iOS / Mac 独立开发者,现居南京。我创建了AventLabs,一个在线学习编程和设计的平台,主要面向初学者。


我正在写一本书《每个人都会编程》

Framer简介

Framer是一个开源项目,一个基于JavaScript的原型工具,专为设计师打造。现在的应用更注重交互设计,它可以让你效率更高。项目地址http://www.framerjs.com,使用Framer包括4个步骤:

  1. 用Photoshop设计原型图
  2. 用Framer.app从Photoshop中导出设计图
  3. 在app.js里写视图展示及交互代码,可以加各种特效
  4. 用浏览器打开index.html文件就可以查看和调试了

Framer项目的代码结构是这样的:

app.js          //【重要】用来写视图和交互代码
framer/         //Framerjs的框架,app.js里用到的功能都是它提供的
  framer.js     //framer核心文件
  framerps.js   //根据views.app.js生成frame对象
  views.app.js  //根据psd文件的结构导出的文件,用来记录图片属性和图层关系(用json格式表示),app.js中要用到
images/         //从photoshop导出的图片都在这里
index.html      //预览时的首页

Framer可以说是由三部分组成:

1. 图片导出工具

支持从photoshop和sketch导出图片。 这里从photoshop导出设计图。实际上是使用了Adobe ExtendScript脚本。Adobe ExtendScript脚本语言可以操纵photoshop执行一些自动化操作。 Mac下作者用Framer.app包装了脚本代码,windows下则直接提供了脚本

导出工具不仅导出了图片,还生成了一个上面目录结构的完整工程,用浏览器打开index.html就可以了。

在原型设计的过程中,可能会需要多次导出图片,而导出工具不会覆盖app.js文件,所以不用担心你写的代码会被覆盖。它只会在没有文件的情况下才自动生成。

2. JS类库

这里提供了View(视图),animation(动态特效),event(事件绑定)等类,可供使用者调用。详见最后一部分介绍,或直接至官网查看。

3. app.js

Framer默认生成app.js文件。在使用Framer的过程中,除了用Photoshop设计原型图之外,这里也是花时间最多的地方。前面准备的素材就看你怎么组织了。视图的创建、切换、动态特效、手势、事件绑定,都可以在这个文件里完成。</p>

Framejs框架介绍

它包括View(视图),animation(动态特效),event(事件绑定)。下面的代码可以在线修改,马上就能看到效果。

View:

基本视图 http://www.framerjs.com/editor/index.html?path=lessons/views.js

嵌套视图 http://www.framerjs.com/editor/index.html?path=lessons/hierarchy.js

其他视图类型 http://www.framerjs.com/editor/index.html?path=lessons/viewtypes.js

特效:

官方文档

支持的手势:https://medium.com/building-potluck/2e405d50b600

事件绑定:

http://www.framerjs.com/editor/index.html?path=lessons/events.js

结语

Framer拉近了设计师与开发者的距离,从另一个层面来讲,我觉得设计师也在逐渐侵入开发者的领地,要抢饭碗的节奏。 Framer目前只侧重于前端展示,如果加上数据处理,那么一个完整的Html5的应用开发框架就成型了。

最近的文章

用Base64嵌入图片

一天冷似一天,阴冷的空气无声无息的悬在城市的上空,纷飞的落叶也在述说着岁月更替的故事。在使用wxPython写程序时,如果用到了图标,而打包的时候又想嵌到程序里,就要使用base64对图片进行编码,然后把生成的字符串直接写到程序里就好了,废话不多说,上代码:{% highlight python %}-- coding:utf-8 --#导入需要的库import wxfrom wx.lib.embeddedimage import PyEmbeddedImage #用于嵌入经过base64...…

wxPython继续阅读
更早的文章

File Already Exists but Should Not Pyconfig

接上一篇,python项目用到了scipy计算模块,之后用pyinstaller打包后,每次运行就会报警告file already exists but should not:……./pyconfig.h。虽然不影响运行,还是觉得有必要解决这个问题,在搜索到stackoverflow这个帖子后,问题解决。问题的原因是pyinstaller打包时pyconfig.h多打了一次,所以会报已经存在了。这个解决方案就是把多余的pyconfig.h去掉。下面开始详细说明如何修改:上一篇讲到使用如下命...…

pyinstaller继续阅读