Framer动效15

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