页面 Page丨Framer 文档 Code

Code

使用 Page 组件可以很轻松的把多个静态屏幕拼接在一起。

Page 组件可实现图层之间从任意方向相互划动。

# 添加一Page 组件
page = new PageComponent
 
# 定义图层layerA为第一个页面 
layerA.parent = page.content
 
# 定义图层layerB为第二个图层，把它放在右侧200的位置
layerB.parent = page.content
layerB.x = 200

pages-first

添加页面 Adding Pages

page.addPage()标签添加新页面，在括号内写上图层名称。新页面会放在右侧，也可以添加在底部。

# 添加一Page 组件
page = new PageComponent

# 吧图层layerA添加到右侧
page.addPage(layerA)

# 吧图层layerA添加到底部
page.addPage(layerB, "bottom")

pages-vertical

包装 Wrapping

要在设计图层中添加分页行为，可以用 PageComponent.wrap() 将它们包装在 Page 组件中。

# 包装内容图层 
page = PageComponent.wrap(content)

指令和排序 Ordering and Sorting

change:currentPage 标签检测页面切换，用于页面指示器。

# 监听所有的页面切换 
page.on "change:currentPage", ->
    page.previousPage.animate
        opacity: 0.2
        scale: 0.8
 
    page.currentPage.animate
        opacity: 1
        scale: 1

pages-current

如果不想要每次都从第一个页面打开，我们还可以还可以自动捕捉到页面图层、定义是否需要动画。

# 捕捉到图层 pageThree
page.snapTooage(pageThree)

# 捕捉到图层 pageTwo,并使用弹性动画
page.snapToPage(pageTwo, true, curve:Spring)

页面索引 Page Index

页面的索引可以保持被追踪，水平或垂直测量。索引号码是页面数减1，所以索引从0开始，而不是1。

点击 页面指示器 Page Indicator example 了解更多。

page.on "change:currentPage", ->
    for layer in indicators
        layer.animate
            opacity: 0.5
 
    current = page.currentPage
    i = page.horizontalPageIndex(current)
 
    indicators[i].animate
        opacity: 1

pages-index