- 本文所有圖文（除了網(wǎng)頁截圖）皆為原創(chuàng)喳坠，版權(quán)完全歸我本人所有。如有未經(jīng)允許的「任何部分或全部」的轉(zhuǎn)載茂蚓、抄襲壕鹉、盜用，全部默認(rèn)為：您已同意并接受給我本人 3 萬元聋涨。本文「發(fā)布」時間：2015 年 11 月 06 號 22:22晾浴。
- 本系列文章將直接從實踐角度出發(fā)，本著「寫完一篇文章再砍掉一半」的原則牍白，不必要的解釋和說明沒有展開脊凰。
- 閱讀前請精讀 Framer JS 官網(wǎng)的 Learn 并在閱讀中配合官方文檔實時查閱。
- 本系列文章將不定期連載茂腥，最終制作成電子書狸涌，名為《寫給設(shè)計師看的 Framer JS》
- 需要體驗效果就請點擊鏈接切省，?支持任何基于 Webkit 的瀏覽器，不區(qū)分平臺和設(shè)備杈抢。
設(shè)計師開始制作原型的基本交互数尿，也是現(xiàn)實世界基礎(chǔ)的物理交互主要有：
- 點擊（Tap）
- 滑動（Scroll）
- 按茁匦浴（Hold）
- 輕掃（Swipe）
- 拖拽（Drag）
1. 點擊
在 Framer Studio 中與點擊相對應(yīng)的是 Click惶楼，鑒于 Framer Studio 并不只是為手機制作原型的工具（可在任何基于 Webkit 的瀏覽器上進(jìn)行交互），使用 Click 來表示點擊顯然是更加合理的诊杆。
當(dāng)我們要完整走一次「點擊交互」的時候歼捐，需要這些東西：
- 交互的圖層（對象）
- 交互事件
- 交互的結(jié)果
在 Framer Studio 中它是這樣的：
# step 1
layer = new Layer
width: 200
height: 200
borderRadius: 100
backgroundColor: "#39f"
layer.center()
# step 2
layer.on Events.Click, ->
# step 3
layer.animate
properties:
borderRadius: 15
scale: 1.5
rotation: 180
time: 0.5
curve: "ease"
- Step 1：新建一個圖層，設(shè)定好寬高度晨汹、圓角大小和顏色
- Step 2：給圖層
layer新建一個點擊事件 - Step 3：設(shè)定點擊事件的結(jié)果
xxx.on Events.Click, -> 是固定寫法豹储，區(qū)分大小寫。-> 即 Function淘这，中文意思是「函數(shù)」剥扣。我們用經(jīng)典的 y = f(x) 來解釋：
在一個變化過程中，有兩個變量 x铝穷、y钠怯，如果給定一個 x，相應(yīng)的就確定唯一的一個 y曙聂，那么就稱 y 是 x 的函數(shù)晦炊，其中 x 是自變量，y 是因變量
回到我們的代碼（牢記 Framer 以縮進(jìn)來表示繼承關(guān)系）宁脊，Step 2 下断国、-> 前的一行代碼就是自變量 x，-> 后Step 3 下的所有代碼就是因變量 y榆苞。故 layer 的 Click 事件就是 x稳衬，因 Click 而引起 layer 的一系列變化就是 y。layer.animate 是告訴 Framer 對 layer 做一些動效坐漏，properties 告訴它具體做哪些性質(zhì)的變化薄疚，即：
- 圓角大小變?yōu)?15
- 縮放 1.5 倍
- 旋轉(zhuǎn) 180 度
- 為以上三個變化設(shè)定時間為 0.5 秒
- 變化曲線為 “ease”
最終效果：
親自體驗：http://share.framerjs.com/y8nr4jrg6cg1/
疑問來了，為什么要多輸入不必要的代碼呢仙畦？為啥不可以這樣：
layer.on Events.Click, ->
layer.borderRadius = 15
layer.scale = 1.5
layer.rotation = 180
原因是：這樣的變化是沒有過程的输涕。上面的代碼沒有通過 animate 去實現(xiàn)變化，故其不可設(shè)定變化時間慨畸、變化曲線莱坎、變化次數(shù)等等。也就是說寸士，它是立即生效的檐什，我們不想要沒有自然過渡的動效碴卧。這是上面代碼的呈現(xiàn)效果：
親自體驗：http://share.framerjs.com/npm8moz0w4ok/
下一篇講解如何實現(xiàn)更加復(fù)雜、更加符合真實場景的點擊交互效果乃正。
歡迎關(guān)注我的 dribbble：https://dribbble.com/Acmenyz
