Framerjs 挖坑笔记 No.1

由于一些不可抗力，必须开始使用 Framerjs 这个难缠的小妖精了~为了辅助记忆 + 方便回头查阅，故将制作步骤记录下来。

第一步肯定不能做太难的，我就从最简单的模型开始尝试。制作一个滚动视图，内部插入三个当滚动到顶部时可以固定住的 titlebar。这里是完成的效果 http://share.framerjs.com/qo8gjsp4l9e2/

stickyheader (00.00.00.000).gif

ps：有什么可以直接录屏成 GIF 的软件捏？找了半天没找到好用的...

开始码起来~创建一个状态栏

statusbar = new Layer
    width: 750
    height: 40
    image: "images/status.png"

这句的意思是：创建一个新的图层，名字就叫做“statusbar”，它的宽度是 750px，高度是 40px，放一张图片在这个图层里，图片的位置是images文件夹下的status.png这个文件。

扯一句：framer 现在加入了 Autocode 功能，创建图层，修改属性这些变得非常简单，但这些本来就不难，正真难写的东西，却又偏偏无法 “autocode” 。这或许就是代码这东西的不可替代性吧。

好，继续。创建一个滚动视图。

scrollview = new ScrollComponent
    y: 40
    width: 750
    height: 1294
    backgroundColor: "fff"
    scrollHorizontal: false
scrollview.contentInset = bottom:98

这句话的意思是：创建一个滚动视图，叫做scrollview ,这个视图距离屏幕顶部40px，宽度750px，高度1294px，背景颜色是白色，禁用掉水平方向的滚动。最后设置一个距离滚动视图底部98px的高度（为了不被tabbar挡住内容）

list = new Layer
    image: "images/list.png"
    width: 750
    height: 2794
    parent: scrollview.content

设置一个新的图层，叫做“list”，里面放上图片，高度750px，宽度2794px，设置父图层为“scrollview.content”（这里的content，是前面建立“ScrollComponent”时，带有的一个属性，每一个“ScrollComponent”都会有默认的“content”现在要做的就是把新建好的list视图嵌入到ScrollComponent 的 content视图下，这样list这个图层就可以滚动了~）

bannerA = new Layer
    width: 712
    height: 418
    y: 234-40
    x: 19
    image: "images/banner1.png"
    parent: list

上面这部分是想把“banner”单独布局出来，可能以后有空可以做下page的切换。大意同上。

最后放上tabber。完成布局。

tabber = new Layer
    width: 750
    height: 98
    y: 1236
    image: "images/tabber.png"

至此，滚动视图完成。

那如何制作 stickyheader 呢？官方有一个例子来教如何制作。不过流程稍显复杂（但也有优势）。我这里记录下一个别人写的 modules，使用起来也很方便。放上Github传送门 https://github.com/72/StickyHeaders-for-Framer，按照上面的方法来完成 stickyheader 的制作

下载好后，将上面写好的代码保存一下，将下载下来的文件夹里有一个“StickyHeaders.coffee”的文件，拷贝，黏贴在原型文件的“modules”文件夹下。

回到framer。

首先，需要在代码的顶上加上一句话

{StickyHeaders} = require "StickyHeaders"

这句就不是 coffeescript 的语句了，所以打的时候会发现没有代码提示了 =_=，这句话的大概意思是，加载 “StickyHeaders”这个 module，到变量“StickyHeaders”里

接着，放上三个需要固定的图层，我这里就是下面这三个。

healthtitle = new Layer
    y: 642-40
    width: 750
    height: 112
    image: "images/health.png"
    parent: list
    name: "StickyHeader"

focustitle = new Layer
    y: 713*2-40
    width: 750
    height: 112
    image: "images/focus.png"
    parent: list
    name: "StickyHeader"

happinesstitle = new Layer
    y: 1105*2-40
    width: 750
    height: 112
    image: "images/happiness.png"
    parent: list
    name: "StickyHeader"

这里的图层设置属性并没有和上面有什么不同，摆好位置插好图片后，唯一最关键的是记得要写“name”这个属性，这是要告诉程序，这个东西是我要固定的。还有注意这里的“stickyheader”是没有s的。只有这里是不加s的。

好了，离最终完成只差最后一步，

StickyHeaders.enableFor scrollview

当当当_完成