没有写代码的命，但有一颗写代码的心，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 = ""
网友评论