熟悉iOS平滑滾動(dòng)吧？要達(dá)到這個(gè)恰到好處感覺涉及很多物理學(xué)。
Framer 中的 Scroll 組件會(huì)為保留這些屬性，在此基礎(chǔ)上還支持自定義。
一個(gè)Scroll 組件是由兩個(gè)層構(gòu)建的。首先，Scroll 組件本身，用作蒙版層。其次，內(nèi)容層，已啟用的拖動(dòng) draggable 和預(yù)定的約束范圍。根據(jù)子級(jí)的大小計(jì)算內(nèi)容層大小。
# 創(chuàng)建 Scroll 組件
scroll = new ScrollComponent
size: 120
# 指定內(nèi)容層
layerA.parent = scroll.content
layerB.parent = scroll.content
和拖動(dòng)圖層一樣，也可以限制滾動(dòng)方向。
scroll.scrollHorizontal = true
scroll.scrollVertical = false
包裝 Wrapping
給圖層添加滾動(dòng)交互用，可以用 ScrollComponent.wrap() 標(biāo)簽將他們包裝在 Scroll組件中。
# 封裝內(nèi)容圖層
scroll = ScrollComponent.wrap(content)
插入內(nèi)容 Content Inset
用 contentInset 屬性給內(nèi)容添加間距，用于將內(nèi)容放置在可滾動(dòng)區(qū)域時(shí)，周圍需要留一些額外的邊距。如頂部有導(dǎo)航欄的列表，默認(rèn)狀態(tài)下，頂部的間距是要算上導(dǎo)航欄的高度的，這個(gè)導(dǎo)航欄的高度就是額外的邊距啦。
案例 iOS Twitter
# 添加一個(gè)滾動(dòng)組件并禁用水平滾動(dòng)，容器寬120高120
scroll = new ScrollComponent
width: 120
height: 120
scrollHorizontal: false
# 插入額外邊距，上下各加40
scroll.contentInset =
top: 40
bottom: 40
right: 0
left: 0
Events
三個(gè)基本事件 scrollStart、scroll、scrollEnd。在 Scroll 事件中，可以檢索可滾動(dòng)圖層的位置。例如，可以用 scroll.scrollY 屬性定義基于垂直滾動(dòng)距離開始的動(dòng)畫。
# 添加滾動(dòng)組件，并禁用水平滾動(dòng)
scroll = new ScrollComponent
scrollHorizontal: false
# 監(jiān)聽滾動(dòng)事件：滾動(dòng)到Y(jié)小于-10時(shí)，圖層 layerA 縮放到100%
scroll.onScroll ->
if scroll.scrollY < -10
layerA.animate
scale: 1
滾動(dòng)動(dòng)畫 Scroll Animation
和拖動(dòng)圖層一樣，當(dāng)啟用動(dòng)量和反彈時(shí)，會(huì)出現(xiàn)兩個(gè)特定事件：ScrollAnimationDidStart、ScrollAnimationDidEnd。發(fā)生在滾動(dòng)結(jié)束后。
# 滾動(dòng)結(jié)束后，開始 ScrollAnimation
scroll.onScrollAnimationDidStart ->
layer.animation
width: 100
# ScrollAnimation結(jié)束后的動(dòng)畫
scroll.onScrollAnimationDidEnd ->
layer.animate
width: 120
