[Framer教程]一起做个豆瓣电影滑动效果

没有写代码的命，但有一颗写代码的心，Framer就是为你而生。Framer语法类似于javascript但又有些不同，我们可以使用简单的代码实现一些动态效果。对于“望码生畏”的人来说，只要用一次就会爱上它的。甚至于，时间久了你还能对代码知晓一二。

那就和我一起来做吧！先看下效果：

动效演示

拆解一下动作，可以发现其实很简单：随着手指拖动内容上滑，海报小幅度上滑，topBar逐渐显示，当内容到达顶部时，电影名称显示出来。好了我们开始吧。

一、准备工作:

①首先点击顶部File->New创建一个新的文件，会出现一个默认工程，里面已经有一个实例了。

新建文件

②再次点击File->Save将该文件保存在某个文件夹下，默认以.framer结尾。

保存文件

③打开刚才那个文件夹，里面已经有了这些文件，其中images里面可以放一些你要用到的图片。

文件详情

④我们用到三个图片：内容、海报和顶部图标。

图片文件

二、写layers

Framer是用一个个layer（层）来组织视图的，和PS的原理类似。先生成的layer一般会在最下面，一层层叠加。Framer最新版新增了层级视图，我们可以清楚地看到该文件层级如下：

层级视图

接下来我们就一个个去写每一个层：

layers图解

模糊背景层，就是海报下方的模糊背景，命名为posterBg，代码如下：

posterBg

我们会通过一些属性来给layer布局，这段代码的意思是，新建一个layer，命名为posterBg，它的一些属性如下：

y即纵向坐标，手机屏幕上坐标原点为左上角，横向向右为X轴，纵向向下为Y轴，这里-40表示该图片向上移动40像素；width即宽度，这里为1000，比屏幕宽，主要是为了完全覆盖屏幕；height为高度，设为900；blur即模糊度；style就是它的一些样式，在其内部我们可以定义背景为一张图片，不重复，背景图片自动100%宽度，可以参考给电脑设置壁纸的选项。最后为了让这个图片居中显示，我们加了一句：posterBg.centerX(0)，表示其中心坐标在屏幕中心处。

类似的，我们可以定义poster、scroll、content、topBar、topIcon。这里要做特别说明的是scroll这个layer，这是Framer里面一种特殊的layer，主要为了方便制作可以滚动浏览的视图。它的定义方式和其他layer不一样，用new ScrollComponent来创建，里面的scrollHorizontal：false代表禁止水平滚动，directionLock：true代表锁定方向，即只可以纵向滑动。

content是滚动视图的内容页，里面的superlayer：scroll.content表示其父级layer是scroll下面的content，等于是把content嵌入到scroll的content中，就可以滚动它了。

scroll

最后，我们要给scroll的移动添加事件监控，如下：

事件监控

这里事件监控就是说在监控到有触摸事件时，要执行一定的响应动作。结合代码，这里监控的是scroll的Move（注意大小写）事件：scroll.on Events.Move表示监控scroll移动的事件。这里我们要执行的是，topBar的透明度变化，poster的位置变化，topIcon中的文字显示和隐藏。

topBar.opacity = Utils.modulate(scroll.scrollY, [0, 500], [0, 1], true)

这一句中的Utils.modulate()是Framer提供的范围转换函数，简单来说就是将scroll纵向移动的距离scrollY在0到500范围内等比例转换到0到1内，true表示超出部分使用用边界值。比如scroll.scrollY=300，处于0到500中五分之三的位置，而0到1中五分之三的位置是0.6，所以就返回0.6。而scroll.scrollY=600时，超出了0到500的范围，就返回500。

类似的，我们还要小海报poster随着滑动时改变位置，所以就使用下面这句代码给其赋予一个位置。

poster.y = Utils.modulate(scroll.scrollY, [0, 500], [150, 80], true)

同时，当内容滚动到顶部时，就要显示出电影名称，否则就不显示，于是就有了下面的代码：

if(scroll.scrollY>500)

    topIcon.html = "《夏天的尾巴》台湾青春剧"

    else topIcon.html = ""

※本文系原创文章，转载请务必注明：转载自leadream的。谢谢！※

---

最后附上源代码，如有问题欢迎一起探讨。

posterBg = new Layer({

y:-40,

width:1000,

height:900,

blur:60,

style:{

"background": "url(images/poster.png) no-repeat"

"background-size":"100%"

}

})

posterBg.centerX(0)

poster = new Layer({

y:150,

width:300,

height:500,

style:{

"background": "url(images/poster.png) no-repeat"

"background-size":"100%"

}

})

poster.centerX(0)

scroll = new ScrollComponent({

width:Screen.width,

height:Screen.height,

scrollHorizontal: false,

directionLock: true

})

content = new Layer({

y:600,

width:Screen.width,

height:1600,

superLayer:scroll.content,

style:{

"background": "url(images/content.png) no-repeat"

"background-size":"100%"

}

})

topBar = new Layer({

width:Screen.width,

height:100,

opacity:0,

style:{

"background": "#49db9c"

}

})

topIcon = new Layer({

y:25,

width:Screen.width,

height:50,

style:{

"background": "url(images/topIcon.png) no-repeat"

"background-size":"100%"

"text-align":"center"

"line-height":"1.5"

}

})

scroll.on Events.Move, ->

topBar.opacity = Utils.modulate(scroll.scrollY, [0, 500], [0, 1], true)

poster.y = Utils.modulate(scroll.scrollY, [0, 500], [150, 80], true)

if(scroll.scrollY>500)

topIcon.html = "《夏天的尾巴》台湾青春剧"

else topIcon.html = ""