图层 Layers丨Framer 文档 Code

Code

要是用过任何一个设计软件儿,那对图层的概念应该很熟悉了。没有给图层添加内容前,一个图层就是一个矩形。图层里也可以包含图片、视频、音频、文本等。

指定 Inserting & Targeting

插入图层跟在设计模式中画个东西,再切回代码模式一样简单。
在设计模式中添加了图层并指定 targetable 后,就已经开始写代码了。要定位在Framer中添加的图层,只用给图层插入名称,添加要添加的图层。

# 给my_layer图层指定一个动画
my_layer.animate
  y: 200
  options:
    time: 1
   curve: Bezier.ease 

属性 Properties

图层在Framer中属性种类还是挺多的。所有的属性都可以直接用代码写。在设计模式中创建的图层定义属性后,在代码模式中还可以覆盖原来的属性的。比如设计模式创建了画板A,并且给背景填充了红色,在代码模式中你可以再覆盖成蓝色:

A.backgroundColor = "#28affb"

浏览窗口中看到的背景色就变成了蓝色。

图层的属性都可以做成可交互动画,定义两个不同的角度、缩放值、透明度就可以实现旋转、缩放、隐藏等。

# 图层layerB的圆角4pt
layerB.borderRadius = 4

# 图层layerB的角度是45度
layerB.rotation = 45

# 图层layerB的不透明度是50%
layerB.opacity = 0.5

# 图层layerB的缩放是50%大
layerB.scale = 0.5

一个熟悉图层属性的方法是使用自动代码,自动代码什么意思呢,就是说Framer已经把动画、交互等变成了选项,只需要从窗口最左侧的 Animate、State、Event、Snippet里选中你需要的动画、状态、事件等,代码那儿就会自动写好你刚选的操作和属性。

位置 Positioning

图层位置可以直接使用x、y定义,这俩属性是指图层左上那点到屏幕左上的距离。

# 图层layerA的位置
layerA.x = 200
layerA.y = 200

图层也可以用动态属性定位。假设你想定图层B相对与图层A的位置,又不想手动计算俩图层的中心点,可以用 midXmidY这类属性,文档中又全部关于定位属性的说明。

# 图层B的X轴对齐图层A的x轴中心 
layerB.x = layerA.midX
 
# 图层B的y轴对齐图层A的y轴中心 
layerB.y = layerA.midY

Align 属性可以在父层级内居中 (center),如果图层没有父级那使用Align 标签时对齐的是屏幕 。parent-child(父级 - 子级)层级关系可以在设计模式中定义,代码模式中同样可以覆盖。图层还可以只定水平方向或垂直方向的相对位置。下面是所有的对齐属性:

  • Align.left (x)
  • Align.right (x)
  • Align.top (y)
  • Align.bottom (y)
  • Align.center (x and y)
# layerB 父级是 layerA 
layerB.parent = layerA
 
# 定义 layerB 对齐父级的右下角 
layerB.x = Align.right
layerB.y = Align.bottom

层级 Hierarchy

设计模式中的组对应代码模式中的层级,同样代码模式中的层级可以覆盖设计模式中的层级。被放在一个图层中的图层是子级 child,上层容器是父级 parent,图层从父层级继承属性,如不透明度、位置。

# 两个方法定义层级:layerB的父级是layerA、layerA添加一个子级layerB
layerB.parent = layerA
layerA.addChild(layerB)

如果需要把一个图层放在另一个图层的前面,可以用placeBefor,放在后面用 placeBehind

layerA = new Layer
layerB = new Layer
 
# layerB 在 LayerA 上面 
layerB.placeBefore(layerA)

暂时没看到啥变化

图层类型 Layer Types

图层几乎可以是背景、图片、视频、文字等等。在设计模式中可以添加标准图层(就是指容器啦),然后在设计模式中将视频、音频插入到图层。
例如要插入一个视频,直接将文件拖拽到Framer的代码编辑其中。

# 视频
video = new VideoLayer
  video: "fish.mp4"

文本图层 Text Layers

可以直接在设计模式中添加文本,要给文本添加交互改变文字或颜色之类的,在代码模式中用 TextLayer 图层。文本图层又自己的属性,宽度高度可以自动计算也可以手动设置,取决于文字和样式。

# 新建一个文本图层
title = new TextLayer
  text: "Hello!"

基本上文字样式来源CSS。全部属性查看文档

# 创建文本图层
title = new  TextLayer
  text: "Hello!"
  fontSize: 64
  fontWeight: 600
  x: Align.center
  y: Align.center

可以用强大的模版控制文字的某一部分,或者做动画。用{ }标签框出文本的值。

# 用模板标签创建文本图层,speed 是可以被替换的值
layerA = new TextLayer
  text: "{speed}KM/h"

# 再设置要用一个什么值替换 speed 
layerA.template =
  speed: 50

# 如果只有一个值可以用这个写法,如果是有多个值就必需用👆的写法,不然不知道对应的值是什么
layerA.template = 50

# 用这个两个写法预览窗口中都会显示 "50KN/h"

文本模版还可以用来设置固定的格式和计算各种值。

# 创建个文本图层模板,这次来定两个值
  layerA = new TextLayer
  text:"{speed}{unit}/h"

# 设置模板的格式,值有两位小数点
layerA.templateFormatter =
  speed: (value) ->
    Utils.round(value, 2)

# 值的动画从 0 到 100
layerA.animate
  template:
    speed: 100
    unit: "KM"

单个标签可以用简写

layerA.templateFormatter = (value) ->
  Utils.round(value, 2)

看完也不知道别的格式要咋定义啊!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容