今天照著framer官網(wǎng)的視頻做了一個Facebook的Group的動效。

我們首先來看動效的幾個點：

Group的信息可以上下查看

點擊Write進入發(fā)布頁面

點擊Cancle回到Group頁面

01 ?制作上下滑動的動效

這里我們使用scroll=ScrollComment.wrap( )，官方文檔對此命令的解釋是

將一個層放在一個新的scroll容器中，具體代碼如下：

sketch = Framer.Importer.load("imported/view-transition@1x")

scroll=ScrollComponent.wrap(sketch.group)

scroll.scrollHorizontal=false ?#禁止左右滑動，只允許上下滑動

scroll.contentInset=

? bottom:90 ? #限制離開底部的距離

scroll.on Events.Scroll,->

? if scroll.scrollY<=0 then? scroll.scrollY=0 ?#向下拉時，頂部不會被拉下來

02 ?進入發(fā)布頁

postLayer=new Layer

? width: Screen.width

? height: Screen.height

? image: sketch.post.image

? y: Screen.height

sketch.write.on Events.Click,->

? postLayer.animate

? properties:

? ?y:0

?curve: "spring(400,35,3)"

03 ?cancle回到Group界面

cancelButton=new Layer

subLayer:postLayer

x: 8

y: 30

width: 140

height: 100

backgroundColor:null

cancelButton.on Events.Click ,->

postLayer.animate

properties:

y: Screen.height

curve: "spring(400,35,3)"