Framer 10天交互动效特训 - 4

Framer 特训4

上一期讨论了 Framer 内置的 2 个常用的交互模式，本期我们讨论下 Framer 内置的四个交互组件。Flow（流程）, Scroll（滚动）, Page（页面）, Silider（滑动条）.

Flow

作为一个交互设计师，往往我们需要像别人展示一个功能完整的流程，这时候 Flow 组件就派上用场了。它可以让你把静态页面组成一个动态的流程展示给别人，快捷方便。缺点是其自定义程度不高（使用默认的交互效果）.

操作重点：

1. 梳理静态流程
2. 实现动态交互

静态流程

先用 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

注意

1. Sketch 命名时，尽量给需要操作的元素一个有意义的名称，方便在 Framer 中调用。
2. Flow 可以用于简单的流程描述，但是不适合用于页面间复杂的动画交互，自定义功能不强，展示复杂页面切换建议使用 Page.

Scroll

当你的页面超过一屏的时候，滚动控件便需要闪亮登场了。Framer 的滚动控件由两部分组成，ScrollComponent 和 ScrollComponent.content。ScrollComponent 是一个遮罩层，用来确定滑动的区域。ScrollComponent.content 用于确定滑动的内容。即 ScrollComponent.content 在 ScrollComponent 中滑动。

操作重点：

1. 滑动区域的大小
2. 实现动态交互

# 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

注意

1. 注意限定 ScrollComponent的位置，通过改变其次序和位置达到你想要的效果。默认情况下 ScrollComponent 会置于顶层，遮盖其他图层。
2. scrollY 你可以理解成虽然我们感觉 ScrollComponent.content 是在往上方移动。反向思考的话，就等于 ScrollComponent 这个遮罩层在往下方移动，scrollY 就为正了。

Page

Page 组件和 Flow 比较类似，我个人理解是强化版的 Flow。它可以支持更多的自定义效果。当你需要还原高保真的页面切换效果时，Page 便体现其优势了。

操作重点：

1. 页面的设定
2. 页面的切换

# 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

注意

1. Page 组建默认是滑动页面进行切换，因此如果你的交互方式不是滑动，需要禁用水平和竖直方向上的滑动。
2. Page 组建相比 Flow 组建有很多可以自定义的属性，详情请参考 Framer Docs

Slider

Slider 组件是一个滑动条，通常用来控制数值的大小。该组件由 3 部分组成，总滑动条，滑动按钮，已滑过滑动条。你可以改变这三个图层的样式对组件外观进行自定义。

操作重点：

1. Slider 样式的设定
2. 交互效果的创建

# 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

注意

1. 可以通过传递 slider.value 构建跟百分比有关的交互效果

至此，Framer 所有基本内容我们已经学习完了，下期会结合实际案例开始更高阶的学习了。诚挚的希望您的反馈，我们下期见。

Reference

特训4 Framer 源码 - Flow
特训4 Framer 源码 - Scroll
特训4 Framer 源码 - Page
特训4 Framer 源码 - Slider