Framer 中的概念

Framer 为了方便没有代码基础的用户，有 Design 模式和 Code 模式。

界面里有什么

点击顶部 Tab 切换模式（版本 V 101）

Design 模式从左到有四列分别是工具面板、图层面板、视图面板、属性面板：

• 工具：添加形状、文字，底部有 Material 图标库；
• 图层：显示图层的层级，拖动图层更改排序和层级关系；
• 视图：编辑和显示区域；可以将图片拖入视图面板添加图片，.gif 格式自动播放；
• 属性：调整图层样式，包含适配方式。

Code 模式从左到右分别是工具面板、图层面板、代码编辑器、预览窗口：

• 工具：上面是给图层添加动画、状态、事件、预设代码（Snippet不知道准确的翻译是什么），下面是导入设计文件、打开官方文档、打开检查窗口（跟Chrome的检查差不多吧）；
• 图层：显示 Design 模式中的图层及在Code模式中添加的图层；可以在代码中引用的图层名称显示为白色，不可引用显示为灰色；Design 模式中的图层要先 target 到 Code 模式了才能被引用；
• 编辑器：通过编写代码的方式添加图层、设置图层属性、给图层添加动画、状态、事件等；可以以拖入的方式添加多视频、音频；
• 预览：查看最终效果，模拟手机屏幕可以进行交互；预览可以拖到窗口外成为一个单独的窗口。

开始介绍概念了

Design&Code
Design 模式和设计软件类似，可以添加图层、更改图层样式和属性、组织层级结构；可以把 Design 模式想象成 Code 的一个可视化图层添加工具，Design 模式中能完成的事 Code模式也能完成，而且Code模式中的样式可以覆盖 Design 模式中的样式；给图层添加动画、事件只有 Code模式中才有。

1. 相对值
举个绝对值例子：

A：x = 100   y = 100
B：x = 200   y = 200

再举个相对值例子：

A：居中与屏幕的 x 、y
B：对齐A的左上角

当然不是上面例子那样写，有标准的格式。甚至还能写【B的y = 屏幕高度 - A的高度】。其他属性也可以用绝对值这里不一一例举。
有相对值是因为Framer支持自适应，并且可以根据图层的大小和位置智能猜测适配方式。

2. 值单位
主要是 Code 模式用到：

x: 20
height: 100
opacity: 1
rotation: 90

所有的数字都不用写单位，由前面的属性决定。

3. 层级和命名
层级在 Framer 中是一个很重要的因素，比如一个卡片上一张图片一个icon一个文字加一个底色，在设计软件中可以不编组选中全部图层一起移动，但是在 Framer 中没有全选好么，只能把他们组织到同一个父级图层下。
写代码时通过图层名称引用图层，所以要求准确的命名，组织好层级结构。

4. 状态

State

一个图层从蓝色的方形旋转45度并变成粉色，蓝色时和粉色时就是这个图层的两种状态。

5. 动画

Animate

从蓝的到粉色的过程就是动画，Framer 自动添加过渡动画。动画和状态是不可分离的。

6. 事件

Event

添加动画时动画会自动播放，如果不需要自动播放则需要定义为点击图层后切换状态，那“点击后切换状态”就是一个事件。

小结
我们生活中使用的APP就是图层、状态、事件组成，需要学习的是怎么组织好这些