沒(méi)有寫(xiě)代碼的命，但有一顆寫(xiě)代碼的心，F(xiàn)ramer就是為你而生。Framer語(yǔ)法類(lèi)似于javascript但又有些不同，我們可以使用簡(jiǎn)單的代碼實(shí)現(xiàn)一些動(dòng)態(tài)效果。對(duì)于“望碼生畏”的人來(lái)說(shuō)，只要用一次就會(huì)愛(ài)上它的。甚至于，時(shí)間久了你還能對(duì)代碼知曉一二。
那就和我一起來(lái)做吧！先看下效果：
拆解一下動(dòng)作，可以發(fā)現(xiàn)其實(shí)很簡(jiǎn)單：隨著手指拖動(dòng)內(nèi)容上滑，海報(bào)小幅度上滑，topBar逐漸顯示，當(dāng)內(nèi)容到達(dá)頂部時(shí)，電影名稱(chēng)顯示出來(lái)。好了我們開(kāi)始吧。
一、準(zhǔn)備工作:
①首先點(diǎn)擊頂部File->New創(chuàng)建一個(gè)新的文件，會(huì)出現(xiàn)一個(gè)默認(rèn)工程，里面已經(jīng)有一個(gè)實(shí)例了。
②再次點(diǎn)擊File->Save將該文件保存在某個(gè)文件夾下，默認(rèn)以.framer結(jié)尾。
③打開(kāi)剛才那個(gè)文件夾，里面已經(jīng)有了這些文件，其中images里面可以放一些你要用到的圖片。
④我們用到三個(gè)圖片：內(nèi)容、海報(bào)和頂部圖標(biāo)。
二、寫(xiě)layers
Framer是用一個(gè)個(gè)layer（層）來(lái)組織視圖的，和PS的原理類(lèi)似。先生成的layer一般會(huì)在最下面，一層層疊加。Framer最新版新增了層級(jí)視圖，我們可以清楚地看到該文件層級(jí)如下：
接下來(lái)我們就一個(gè)個(gè)去寫(xiě)每一個(gè)層：
模糊背景層，就是海報(bào)下方的模糊背景，命名為posterBg，代碼如下：
我們會(huì)通過(guò)一些屬性來(lái)給layer布局，這段代碼的意思是，新建一個(gè)layer，命名為posterBg，它的一些屬性如下：
y即縱向坐標(biāo)，手機(jī)屏幕上坐標(biāo)原點(diǎn)為左上角，橫向向右為X軸，縱向向下為Y軸，這里-40表示該圖片向上移動(dòng)40像素；width即寬度，這里為1000，比屏幕寬，主要是為了完全覆蓋屏幕；height為高度，設(shè)為900；blur即模糊度；style就是它的一些樣式，在其內(nèi)部我們可以定義背景為一張圖片，不重復(fù)，背景圖片自動(dòng)100%寬度，可以參考給電腦設(shè)置壁紙的選項(xiàng)。最后為了讓這個(gè)圖片居中顯示，我們加了一句：posterBg.centerX(0)，表示其中心坐標(biāo)在屏幕中心處。
類(lèi)似的，我們可以定義poster、scroll、content、topBar、topIcon。這里要做特別說(shuō)明的是scroll這個(gè)layer，這是Framer里面一種特殊的layer，主要為了方便制作可以滾動(dòng)瀏覽的視圖。它的定義方式和其他layer不一樣，用new ScrollComponent來(lái)創(chuàng)建，里面的scrollHorizontal：false代表禁止水平滾動(dòng)，directionLock：true代表鎖定方向，即只可以縱向滑動(dòng)。
content是滾動(dòng)視圖的內(nèi)容頁(yè)，里面的superlayer：scroll.content表示其父級(jí)layer是scroll下面的content，等于是把content嵌入到scroll的content中，就可以滾動(dòng)它了。
最后，我們要給scroll的移動(dòng)添加事件監(jiān)控，如下：
這里事件監(jiān)控就是說(shuō)在監(jiān)控到有觸摸事件時(shí)，要執(zhí)行一定的響應(yīng)動(dòng)作。結(jié)合代碼，這里監(jiān)控的是scroll的Move（注意大小寫(xiě)）事件：scroll.on Events.Move表示監(jiān)控scroll移動(dòng)的事件。這里我們要執(zhí)行的是，topBar的透明度變化，poster的位置變化，topIcon中的文字顯示和隱藏。
topBar.opacity = Utils.modulate(scroll.scrollY, [0, 500], [0, 1], true)
這一句中的Utils.modulate()是Framer提供的范圍轉(zhuǎn)換函數(shù)，簡(jiǎn)單來(lái)說(shuō)就是將scroll縱向移動(dòng)的距離scrollY在0到500范圍內(nèi)等比例轉(zhuǎn)換到0到1內(nèi)，true表示超出部分使用用邊界值。比如scroll.scrollY=300，處于0到500中五分之三的位置，而0到1中五分之三的位置是0.6，所以就返回0.6。而scroll.scrollY=600時(shí)，超出了0到500的范圍，就返回500。
類(lèi)似的，我們還要小海報(bào)poster隨著滑動(dòng)時(shí)改變位置，所以就使用下面這句代碼給其賦予一個(gè)位置。
poster.y = Utils.modulate(scroll.scrollY, [0, 500], [150, 80], true)
同時(shí)，當(dāng)內(nèi)容滾動(dòng)到頂部時(shí)，就要顯示出電影名稱(chēng)，否則就不顯示，于是就有了下面的代碼：
if(scroll.scrollY>500)
? ? topIcon.html = "《夏天的尾巴》臺(tái)灣青春劇"
? ? else topIcon.html = ""
※本文系原創(chuàng)文章，轉(zhuǎn)載請(qǐng)務(wù)必注明：轉(zhuǎn)載自leadream的簡(jiǎn)書(shū)。謝謝！※
最后附上源代碼，如有問(wèn)題歡迎一起探討。
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 = "《夏天的尾巴》臺(tái)灣青春劇"
else topIcon.html = ""
