沒有寫代碼的命，但有一顆寫代碼的心，Framer就是為你而生。Framer語法類似于javascript但又有些不同，我們可以使用簡單的代碼實現一些動態效果。對于“望碼生畏”的人來說，只要用一次就會愛上它的。甚至于，時間久了你還能對代碼知曉一二。
那就和我一起來做吧！先看下效果：
拆解一下動作，可以發現其實很簡單：隨著手指拖動內容上滑，海報小幅度上滑，topBar逐漸顯示，當內容到達頂部時，電影名稱顯示出來。好了我們開始吧。
一、準備工作:
①首先點擊頂部File->New創建一個新的文件，會出現一個默認工程，里面已經有一個實例了。
②再次點擊File->Save將該文件保存在某個文件夾下，默認以.framer結尾。
③打開剛才那個文件夾，里面已經有了這些文件，其中images里面可以放一些你要用到的圖片。
④我們用到三個圖片：內容、海報和頂部圖標。
二、寫layers
Framer是用一個個layer（層）來組織視圖的，和PS的原理類似。先生成的layer一般會在最下面，一層層疊加。Framer最新版新增了層級視圖，我們可以清楚地看到該文件層級如下：
接下來我們就一個個去寫每一個層：
模糊背景層，就是海報下方的模糊背景，命名為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的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 = ""
