什么是Framer

Framer是国外一套交互设计工具,底层的动画实现依赖javascript,目前仅支持Mac,它有以下几个优点:

  1. 可以直接导入sketch或PS的源文件进行设计,做到UI到交互的无缝斜街。
  2. 完全用coffeescript和已经封装好的类JS函数进行编写,使用灵活,发挥空间极大,基本上能想到的效果都可以做出来。
  3. 支持在线预览,可以在手机上浏览设计稿,还原用户使用场景。

如何学习Framer

  1. 首先,你要会一点点js,推荐W3C的js教程
  2. 接下来,看一下Framer的官方教程
  3. 最后,开始临摹一个效果,随时查找文档

“开眼”App中的幻灯切换效果

这里我选择了“开眼”中一个幻灯切换的效果进行临摹,具体效果如下:

刚开始一切从简,不考虑屏幕下方的文字变化,不考虑播放按钮的变化,只考虑两个视频头图之间的切换效果。

首先,我们需要理解这个动画:

初始状态:图片1占据整个屏幕,图片2处于图片1的右端,屏幕之外。

开始左滑:开始左滑时,图片2比图片1更快地像左滑动,并且覆盖在图片1的上方。

即将结束左滑:图片2快要占据整个屏幕时,图片1向左偏移的距离接近它的宽度的1/5。

结束左滑:滑动结束后,图片2占据整个屏幕,图片1处于图片2的左端,屏幕之外。

理解了这个交互效果以后,我们开始用Framer来还原它啦~用Framer来进行交互设计一般只涉及一下三步:

1.声明Layer

搜集好自己需要的图片素材后,我们将需要的元素放进去,并且声明好每个Layer的属性(坐标,宽高,是否可拖动等)。这里声明好了每个元素的初始属性。

2.添加状态

给每个声明好的Layer添加静止时的所有可能状态,比如图片1有两种状态:占据整个屏幕及紧贴整个屏幕的左边;同时可以定义状态切换时的过度效果。

3.绑定事件,定义事件内容

这个交互中主要的事件类型为drag,跟drag相关的主要事件有:DragStart,Move,DragEnd,每个事件都绑定上,然后制定好每个事件发生过程中会发生的事情,放入每个事件中。

4.结果

最后做出来的结果如下:
需要高度还原还需要更精细地调整才行。

总结

开头说了Framer的优点,接下来说一下缺点吧,如有错误,还望指正:

  1. Framer不支持自定义函数,许多流程化的东西需要重复用单句命令实现。
  2. Framer不支持多文件通信,一个交互的代码只能存在一个文件中,想要在一个文件中完成整套交互太难维护。
  3. 保存的文件再打开以后效果就加载不出来了,要新建个文件复制一次代码...这应该是个bug。

不过对于懂一些前端代码的设计师来说,这个工具应该是用得相当顺手的~有时间的都可以试一试~