动画、事件都是添加在图层上。
有几种方法添加图层,从 Design 模式中绘制、从Code 模式中写、导入。
1. Design 模式中绘制
添加
添加方式和设计软件一样。
画板 Artborad
A
所有的画板都是一个默认的父级,画板内的元素是子级。画板可以作为一个页面也可以作为一个元素符号;Code 中调用图层时可以同时调用不同画板中的元素,所以画板不等于页面,相当于可视化存放图层的工具。矩形 Rectangle
R
矩形工具,可以设为完全不透明作为热区或部件范围来使用。椭圆形 Oval
O欧
同上。文字 Text
T
文字图层。
尺寸
响应式的,Framer 会根据摆放位置和大小自动判断适配方式,下例中左右顶边的长方形是判断为固定在顶部左右拉伸,而正方形是判断为固定在左上角。
也可以手动设置,在属性面板 Position 右侧的方框更改。鼠标移到方框内会显示适配预览。
层级
一层图层拖到另外一个图层的范围内,自动判断被包含的那个图层为子级,一般是小的拖到大的里,小的变成子级;
想把尺寸超出目标父级尺寸的图层变成子级,需要从图层面板拖。
子级继承父级的属性,子级可以被父级形状剪切。
在 Code 模式中尤其需要组织好层级。
应用
需要添加事件、动画的图层要 Target 到 Code模式。
没有 target到Code的图层可以看到图层结构和名称,是灰色的,不能被引用。
Target 过来了的图层名称是白色的,可以被引用。具体用法查看的[动画]、[事件]。
2. Code 模式
直接写:
# "图层名称" 是 新 图层
banliA = new layer
=
在代码中是 “赋值” 的意思,把右侧的内容赋予给左侧的内容;=
左侧的内容叫 “变量”。
给图层添加属性
新添加的图层默认有个样式,位于左上角的灰色方框。更改样式也需要自己写:
# 需要新建图层,才能给图层添加样式
banli = new layer
width: 120
x: 200
backgroundColor: "#95CEEF"
另起一行,按 Tab
健缩进,表示现在写的是给图层 banliA 的属性。具体有哪些属性和用法在下一节[图层的属性]。
图层类型
- 图片
给图层填充图片和添加其他属性一样,gif 格式的图片自动播放。
banli = new Layer
image: "image/图片名称.gif"
# 其他属性
自动填充图片:
# 写下面那句就可以了
banli = new Layer
image: Utils.randomImage()
- 文字
banli = new Textlayer
text: "文字"
fontSize:18
# 其他属性继续往下写
视频、图片、音频可以直接拖到代码编辑器内添加,拖进去的文件会存到 Framer 文件夹内;也可以先把素材放到文件夹内再调用。图片和视频放在 “image”文件夹、音频放在 “sounds” 文件夹。文件不会重复存放。
- 视频
banli = new VideoLayer
video: "image/视频名称.mp4"
# 属性
# 播放视频,不写是不会播的
banli.player.play()
- 音频
# 音频没啥属性
banli = new Audio("sounds/音频名称.wav")
# 播放音频
banli.play()
3. 导入
支持 Sketch、Figma、PS导入。打开要导入的设计文件,点击 Code 左下角的 Import 按钮,选择设计文件的倍数。
导入文件后会显示这样一段代码
# Import file "banli"
sketch = Framer.Importer.load("imported/banli@1x", scale: 1)
意思导入来一个叫“banli”的sketch文件,默认会把导入的文件按导入软件命名(如sketch),也可以改成其他的名称
如果需要选中调整某个图层属性,需要在前面加上文件名称:
sketch.layer01.opacity = 0.5
了解更多看 设计 Design 丨Framer 文档,翻到最下面的导入。