Framer 特训1

新开一个 Framer 特训专栏，希望 15 期之后能对这个软件有一个更为深入的理解。

市面上现在流行很多不同种类交互软件，Flinto, Principle, AE, InVison, Axure, Framer。 笔者都尝试过，最后选择 Framer 作为攻坚对象原因有二。一是从实用性考虑，所有交互动效最后都需要代码实现，用代码类交互软件可以让自己对逻辑有更准确的判断。二是从效率上考虑，如果所有软件相同熟练程度，代码无疑是最高效的。同时 Framer 支持导入 Sketch 文档，更大的提高了工作效率。

核心概念：Framer 动效是由 CoffeeScript (一种简易的 Javascript) 代码生成的。即可以把 Framer 想象成一个简易编程软件，注意复用性，想深入钻研代码的可以深入学习下 CoffeeScript 和 Javascript, 作为交互设计师我更注重实战中怎么用最高效，底层代码不作为重点。

交互动效本质上由三个部分组成循环：

• 初始状态
• 改变初始状态的事件
• 初始状态转为新状态

做动效的时候，笔者认为效果的准确是第二位的，第一位的是为什么要做这个效果，以及这个效果背后包含的设计思想，具体参考 如何制作符合场景的交互动效

铺垫结，正文出。

Layers 图层

Framer 中的图层我认为类似于 Html 中的 Div, 你可以给其添加任意的 CSS 属性，使用 Framer 的语法即可。有两点注意，1是高保真动效建议用 Sketch 先做所有静态的，再对 Sketch 图层进行适当改动。2是低保真动效建议直接用 Framer 绘制。

操作重点：

1. 图层的位置
2. 图层的层级

layerA = new Layer
    parent: canvas
    x: 151
    y: 129
    backgroundColor: blue
    height: height
    width: width

layerB = new Layer
    #层级:layerA 在 layerB 的下面, layerB 参考点变成了父元素   
    parent: layerA
    #位置：layerA 和 layerB 右对齐     
    x: Align.right
    #位置：layerB 下移 50%   
    y: height/2
    backgroundColor: blue
    height: height
    width: width    

Layers

注意：

1. 子元素采取的是相对定位，原点是基于父元素而言的。根元素是相对画布而言的
2. 兄弟级图层才可以改变上下顺序，父元素是不能通过操作变到子元素上方的。

Animate 动画转变

几乎所有的图层属性都可以添加动画转变，决定动画的三个关键因素：

1. 发生时间
2. 持续时间
3. 动画函数（curves）

操作重点：

1. curves 的研究
2. 动画的次序

# Animate
layerA.animate
    rotation: 180
    borderRadius: '50%'
    options: 
        time: 1 
        curve: Bezier.easeInOut
    
layerB.animate
    rotation: -180
    borderRadius: '50%'
    backgroundColor: orange 
    options: 
        time: 1.00  
        curve: Spring(damping: 1)
        delay: .5
    
layerC.animate
    rotation: -180
    borderRadius: '50%'
    backgroundColor: orange 
    options: 
        time: 1.00  
        curve: Spring(damping: 0.10)
        delay: 1    

Animate

注意：

1. 默认动画时常为 1s, 延迟为 0，动画函数为 Bezire.ease（先慢后快再慢，但比 Bezire.easeInOut 整体更急促），详见 Animating with Framer.js
2. 可以通过 delay 计算动画发生的时间，新版 spring 动效中 damp（0.1-1） 控制抖动的程度，越小抖动越剧烈。

诚挚的希望你的反馈，第二篇我们再见。

Reference

特训1 Framer 源码