今天照着framer官网的视频做了一个Facebook的Group的动效。
我们首先来看动效的几个点:
Group的信息可以上下查看
点击Write进入发布页面
点击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 进入发布页
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)"