今天照著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)"
