- 本文所有圖文（除了網(wǎng)頁(yè)截圖）皆為原創(chuàng)洪乍，版權(quán)完全歸我本人所有眯杏。如有未經(jīng)允許的「任何部分或全部」的轉(zhuǎn)載、抄襲典尾、盜用役拴，全部默認(rèn)為：您已同意并接受給我本人 3 萬(wàn)元。本文「發(fā)布」時(shí)間：2015 年 11 月 08 號(hào) 16:01钾埂。
- 本系列文章將直接從實(shí)踐角度出發(fā)河闰，本著「寫(xiě)完一篇文章再砍掉一半」的原則科平，不必要的解釋和說(shuō)明沒(méi)有展開(kāi)。
- 閱讀前請(qǐng)精讀 Framer JS 官網(wǎng)的 Learn 并在閱讀中配合官方文檔實(shí)時(shí)查閱姜性。
- 本系列文章將不定期連載瞪慧，最終制作成電子書(shū)，名為《寫(xiě)給設(shè)計(jì)師看的 Framer JS》
- 需要體驗(yàn)效果就請(qǐng)點(diǎn)擊鏈接部念，?支持任何基于 Webkit 的瀏覽器弃酌，不區(qū)分平臺(tái)和設(shè)備。
在基礎(chǔ)物理交互（一）中儡炼，點(diǎn)擊文中鏈接進(jìn)行交互時(shí)可以發(fā)現(xiàn)：它只能點(diǎn)擊一次妓湘，無(wú)法通過(guò)點(diǎn)擊變化后的圖形回到原樣。
這是因?yàn)槲覀儧](méi)有定義之后的操作乌询，要定義下一次的操作結(jié)果很容易榜贴，在上面交互事件的基礎(chǔ)上按部就班再來(lái)一次即可，但是如果一個(gè)交互是來(lái)回變化的妹田，難道我們要定義無(wú)數(shù)次的操作結(jié)果么唬党？
解決這個(gè)問(wèn)題要理解它背后的原理。假設(shè)一個(gè)對(duì)象的交互結(jié)果有兩種：0 和 1鬼佣，我們將 0 和 1 看作兩種狀態(tài)驶拱，那么設(shè)定一次操作讓其在這兩種狀態(tài)之間切換，即可解決上述問(wèn)題晶衷。
再進(jìn)一步想，所有需要用到多次的狀態(tài)（交互結(jié)果）房铭，都應(yīng)該定義好之后按實(shí)際場(chǎng)景分配使用驻龟，這樣不僅讓效率更高温眉、代碼更簡(jiǎn)潔缸匪，而且有利于整理思路和邏輯關(guān)系。
綜上所述类溢，當(dāng)交互結(jié)果需要在不同場(chǎng)景使用到多次時(shí)凌蔬，都應(yīng)該使用 states 去實(shí)現(xiàn)。在 Framer 中為圖層添加狀態(tài)并指定變化時(shí)間闯冷、曲線砂心、延時(shí)等：
layer.states.add
state1:
x: 0
y: 0
scale: 1
state2:
x: 200
y: 200
scale: 1.5
state3:
x: 400
y: 400
scale: 2
...
layer.states.animationOptions =
curve: "ease"
time: 0.5
delay: 0.2
回到一開(kāi)始的例子，通過(guò) states 讓圖層實(shí)現(xiàn)循環(huán)交互：
# add states for layer
layer.states.add
rounded:
borderRadius: 15
scale: 1.5
rotation: 180
layer.states.animationOptions =
time: 0.5
curve: "ease"
# set click event
layer.on Events.Click, ->
layer.states.next ["rounded", "default"]
為之前 “1” 的狀態(tài)起個(gè)名字叫 rounded蛇耀，它的參數(shù)與之前一模一樣辩诞，唯一的不同是：它現(xiàn)在不僅是一種交互結(jié)果，同時(shí)還是一個(gè)可調(diào)用的 state纺涤。
layer.states.next 的語(yǔ)義是按照設(shè)定好的交互事件切換狀態(tài)列表译暂，["rounded", "default"] 就是它的狀態(tài)列表抠忘，相當(dāng)于兩首歌列表循環(huán)。
default 就是 layer 的初始狀態(tài)外永，F(xiàn)ramer 默認(rèn)最開(kāi)始 layer 的屬性為 default崎脉，無(wú)需我們定義。
親自體驗(yàn)：http://share.framerjs.com/h9zs7epwgz0p/
以 twitter 的發(fā)布交互進(jìn)入實(shí)戰(zhàn)伯顶，準(zhǔn)備兩張去掉狀態(tài)欄的截圖囚灼，去網(wǎng)上下載一個(gè) iOS 9 的 UI Kit 找到狀態(tài)欄素材，如圖所示：
參照第一篇文章進(jìn)行上傳操作：
完成這個(gè)效果所需的代碼：
$ = Framer.Importer.load "imported/Untitled 2"
# default states
Utils.globalLayers $
bg = new BackgroundLayer backgroundColor: "black"
post.y = 1334
# create post action respond area
postaction = new Layer
width: 88
height: 88
x: 750 - 88
y: 40
superLayer: notific
backgroundColor: false
# post action events
postaction.on Events.Click, ->
# notific page animate
notific.animate
properties:
opacity: 0.8
scale: 0.93
time: 0.4
curve: "ease"
# post page animate
post.animate
properties:
y: 0
time: 0.4
curve: "ease"
# create cancel action respond area
cancel = new Layer
width: 88
height: 88
x: 750 - 88
y: 40
superLayer: post
backgroundColor: false
# cancel action events
cancel.on Events.Click, ->
post.animate
properties:
y: 1334
time: 0.4
curve: "ease"
notific.animate
properties:
opacity: 1
scale: 1
time: 0.4
curve: "ease"
實(shí)際效果（注意看狀態(tài)欄祭衩，因?yàn)樗奈恢檬枪潭ú蛔兊脑钐澹市枰匦聹?zhǔn)備素材）：
親自體驗(yàn)：http://share.framerjs.com/lyoudbcusfo8/
新建 postaction 和 cancel 這兩個(gè)圖層用來(lái)設(shè)置操作熱區(qū)，至于 superLayer 的使用請(qǐng)查閱文檔掐暮，非常簡(jiǎn)單赃春，不再贅述。
下一篇文章講解如何進(jìn)行滑動(dòng)交互劫乱。
歡迎關(guān)注我的 dribbble：https://dribbble.com/jiaxinchen
