Framer 特训4
上一期讨论了 Framer 内置的 2 个常用的交互模式，本期我们讨论下 Framer 内置的四个交互组件。Flow（流程）, Scroll（滚动）, Page（页面）, Silider（滑动条）.
Flow
作为一个交互设计师，往往我们需要像别人展示一个功能完整的流程，这时候 Flow 组件就派上用场了。它可以让你把静态页面组成一个动态的流程展示给别人，快捷方便。缺点是其自定义程度不高（使用默认的交互效果）.
操作重点：
- 梳理静态流程
- 实现动态交互
静态流程
先用 Sketch 将所有的静态页面画出来，梳理所有的逻辑。点击 Next 跳入下一界面，点击 Back 返回上级界面，点击 Click 跳出弹窗等。
然后通过 Framer 的 Import 的功能，将 Sketch 直接导入到 Framer 中进行 Flow 的构建。
# Import file "Flow" (sizes and positions are scaled 1:2)
sketch = Framer.Importer.load("imported/Flow@2x")
# WRITTEN BY JOEY IN APRIL, 2017
# DEFIEN VARIABLES
layerA = sketch.pageA
layerB = sketch.pageB
layerC = sketch.pageC
nextA = sketch.nextA
nextB = sketch.nextB
nextC = sketch.nextC
backB = sketch.backB
backC = sketch.backC
overlayC = sketch.overlayC
# Change canvas background color
Framer.Device.background.backgroundColor = "#fafafa"
# Create FlowComponent
flow = new FlowComponent
# 设置第一页
flow.showNext(layerA)
# 进入第二页
nextA.on Events.Click, (e) ->
flow.showNext(layerB)
# 进入第三页
nextB.on Events.Click, (e) ->
flow.showNext(layerC)
# 第三页弹出弹窗
nextC.on Events.Click, (e) ->
flow.showOverlayCenter(overlayC)
# 返回第一页
backB.on Events.Click, (e) ->
flow.showPrevious(layerA)
# 返回第二页
backC.on Events.Click, (e) ->
flow.showPrevious(layerB)
Flow
注意
- Sketch 命名时，尽量给需要操作的元素一个有意义的名称，方便在 Framer 中调用。
- Flow 可以用于简单的流程描述，但是不适合用于页面间复杂的动画交互，自定义功能不强，展示复杂页面切换建议使用 Page.
Scroll
当你的页面超过一屏的时候，滚动控件便需要闪亮登场了。Framer 的滚动控件由两部分组成，ScrollComponent 和 ScrollComponent.content。ScrollComponent 是一个遮罩层，用来确定滑动的区域。ScrollComponent.content 用于确定滑动的内容。即 ScrollComponent.content 在 ScrollComponent 中滑动。
操作重点：
- 滑动区域的大小
- 实现动态交互
# Import file "Scroll" (sizes and positions are scaled 1:2)
sketch = Framer.Importer.load("imported/Scroll@2x")
# WRITTEN BY JOEY IN APRIL, 2017
# DEFIEN VARIABLES
content = sketch.content
pageA = sketch.pageA
navigation = sketch.Navigation_Bar_Back
# Change canvas background color
Framer.Device.background.backgroundColor = "#fafafa"
# Create ScrollComponent
scroll = ScrollComponent.wrap(sketch.content)
# 相同父元素才可以移动图层前后位置
scroll.parent = pageA
# 将Navigation移到内容层上方
scroll.placeBehind(navigation)
# 避免滑动导航栏触发滑动
scroll.y = 120
# 禁止横向滑动
scroll.scrollHorizontal = false
# 判断滚动距离
number = new TextLayer
text: "1"
fontSize: 64
fontWeight: 600
color: '#fff'
x: Align.center
y: Align.center
scroll.on Events.Scroll, (e) ->
if scroll.scrollY > 0
number.text = 1
if scroll.scrollY > Screen.height
number.text = 2
if scroll.scrollY > Screen.height * 2
number.text = 3
Scroll
注意
- 注意限定 ScrollComponent的位置，通过改变其次序和位置达到你想要的效果。默认情况下 ScrollComponent 会置于顶层，遮盖其他图层。
- scrollY 你可以理解成虽然我们感觉 ScrollComponent.content 是在往上方移动。反向思考的话，就等于 ScrollComponent 这个遮罩层在往下方移动，scrollY 就为正了。
Page
Page 组件和 Flow 比较类似，我个人理解是强化版的 Flow。它可以支持更多的自定义效果。当你需要还原高保真的页面切换效果时，Page 便体现其优势了。
操作重点：
- 页面的设定
- 页面的切换
# Import file "Page" (sizes and positions are scaled 1:2)
sketch = Framer.Importer.load("imported/Page@2x")
# WRITTEN BY JOEY IN APRIL, 2017
# DEFIEN VARIABLES
content = sketch.content
layerA = sketch.pageA
layerB = sketch.pageB
layerC = sketch.pageC
nextA = sketch.nextA
nextB = sketch.nextB
nextC = sketch.nextC
backB = sketch.backB
backC = sketch.backC
# Change canvas background color
Framer.Device.background.backgroundColor = "#fafafa"
# Create PageComponent
page = PageComponent.wrap(sketch.pageA)
page.addPage(sketch.pageB)
page.addPage(sketch.pageC)
# 禁止上下滑动
page.scrollVertical = false
page.scrollHorizontal = false
# 进入第二页
nextA.on Events.Click, (e) ->
page.snapToPage(layerB, true, curve: Spring)
# 进入第三页
nextB.on Events.Click, (e) ->
page.snapToPage(layerC, true, curve: Spring)
# 返回第一页
backB.on Events.Click, (e) ->
page.snapToPage(layerA, true, curve: Bezier.easeOut, time: .3)
# 返回第二页
backC.on Events.Click, (e) ->
page.snapToPage(layerB, true, curve: Bezier.easeOut, time: .3)
Page
注意
- Page 组建默认是滑动页面进行切换，因此如果你的交互方式不是滑动，需要禁用水平和竖直方向上的滑动。
- Page 组建相比 Flow 组建有很多可以自定义的属性，详情请参考 Framer Docs
Slider
Slider 组件是一个滑动条，通常用来控制数值的大小。该组件由 3 部分组成，总滑动条，滑动按钮，已滑过滑动条。你可以改变这三个图层的样式对组件外观进行自定义。
操作重点：
- Slider 样式的设定
- 交互效果的创建
# WRITTEN BY JOEY IN APRIL, 2017
# Change canvas background color
Framer.Device.background.backgroundColor = "#fafafa"
Screen.backgroundColor = '#00AAFF'
# Create SliderComponent
slider = new SliderComponent
x: Align.center
y: Align.center
width: 400
min: 0
max: 100
value: 20
knobSize: 40
backgroundColor: 'rgba(255,255,255,.2)'
# Customize fill
slider.fill.backgroundColor = "#fff"
# Customize knob
slider.knob.shadowY = 2
# 值变化时的交互效果
number = new TextLayer
text: slider.value
fontSize: 64
fontWeight: 600
x: Align.center
y: Align.center -100
color: '#fff'
slider.on Events.SliderValueChange, (e) ->
number.text = Math.round(slider.value)
Slider
注意
- 可以通过传递 slider.value 构建跟百分比有关的交互效果
至此，Framer 所有基本内容我们已经学习完了，下期会结合实际案例开始更高阶的学习了。诚挚的希望您的反馈，我们下期见。
Reference
特训4 Framer 源码 - Flow
特训4 Framer 源码 - Scroll
特训4 Framer 源码 - Page
特训4 Framer 源码 - Slider
