学习用FramerJS制作交互动画

前几天与WeShare同仁一起按照任务要求学习使用 FramerJS 制作交互效果,心得如下:

优点

  1. FramerJS 使用 CoffeeScript 语言,易于上手,且自己封装了几个库内置于 Framer Studio 中,使得制作成本大大降低。
  2. 在制作动画的目的上充分发挥 JS 的设计模式,如整个动画的元素拆分可以包括图片路径、起止点坐标、宽高、是否可滑动、透明度、模糊度、坐标偏移量、时间、动画曲线等,按阶段分可以包括起始控件属性设定、状态节点设定、过场设定等。
  3. 编码效率高,可以直接生成带有js和图片资源文件夹的目录,只要有 http 服务器支持即可进行演示。
  4. 与 Photoshop 、 Sketch 的交互友好。

缺点

  1. 无法导出为视频,也就是无法以常见的媒体格式进行传播。
  2. 从 Sketch 导入时会将每一个最终不可拆分的 group 导出为一个图片,这样亲近开发,但在对于一整个画面中只需要展现一两个元素的动画效果时就显得很不友好,除非将其他不动元素都拟合在一个 backgroud group 下。
  3. 控件大小不一样的时候,调整一些需要对齐的动画效果就要按像素调整,不太方便——这点应该可以通过使用 layer.midX/layer.centerX 等函数来优化。