滚动 Scroll丨Framer 文档 Code

Code

熟悉iOS平滑滚动吧？要达到这个恰到好处感觉涉及很多物理学。
Framer 中的 Scroll 组件会为保留这些属性，在此基础上还支持自定义。

一个Scroll 组件是由两个层构建的。首先，Scroll 组件本身，用作蒙版层。其次，内容层，已启用的拖动 draggable 和预定的约束范围。根据子级的大小计算内容层大小。

# 创建 Scroll 组件 
scroll = new ScrollComponent
    size: 120
 
# 指定内容层 
layerA.parent = scroll.content
 
layerB.parent = scroll.content

scrolling

和拖动图层一样，也可以限制滚动方向。

scroll.scrollHorizontal = true
scroll.scrollVertical = false

包装 Wrapping

给图层添加滚动交互用，可以用 ScrollComponent.wrap() 标签将他们包装在 Scroll组件中。

# 封装内容图层 
scroll = ScrollComponent.wrap(content)

插入内容 Content Inset

用 contentInset 属性给内容添加间距，用于将内容放置在可滚动区域时，周围需要留一些额外的边距。如顶部有导航栏的列表，默认状态下，顶部的间距是要算上导航栏的高度的，这个导航栏的高度就是额外的边距啦。
案例 iOS Twitter

# 添加一个滚动组件并禁用水平滚动，容器宽120高120
scroll = new ScrollComponent
    width: 120
    height: 120
    scrollHorizontal: false
 
# 插入额外边距，上下各加40
scroll.contentInset =
    top: 40
    bottom: 40
    right: 0
    left: 0

scrolling-inset

Events

三个基本事件 scrollStart、scroll、scrollEnd。在 Scroll 事件中，可以检索可滚动图层的位置。例如，可以用 scroll.scrollY 属性定义基于垂直滚动距离开始的动画。

# 添加滚动组件，并禁用水平滚动 
scroll = new ScrollComponent
    scrollHorizontal: false
 
# 监听滚动事件：滚动到Y小于-10时，图层 layerA 缩放到100%
scroll.onScroll ->
    if scroll.scrollY < -10
 
        layerA.animate
            scale: 1

scrolling-scrolly.gif

滚动动画 Scroll Animation

和拖动图层一样，当启用动量和反弹时，会出现两个特定事件：ScrollAnimationDidStart、ScrollAnimationDidEnd。发生在滚动结束后。

# 滚动结束后，开始 ScrollAnimation
scroll.onScrollAnimationDidStart ->
  layer.animation
    width: 100

# ScrollAnimation结束后的动画
scroll.onScrollAnimationDidEnd ->
  layer.animate
    width: 120

scrolling-didstart