之前的 Framer 教程都是按照個人喜好去寫的马靠，沒有按照難易程度形成系列奄抽。為了讓大家能更好地入門蔼两，我準備由易到難寫一個系列教程，盡量保持在每周一篇的頻率逞度。

導讀：事件是 Framer 中的一個重要概念额划，它是交互動效的觸發(fā)開關。它主要包括一些手勢事件（觸摸档泽、滑動俊戳、雙擊等），還有動畫運行馆匿、狀態(tài)切換抑胎、頁面切換等事件。我們一般通過監(jiān)聽事件的發(fā)生來觸發(fā)一些交互動作甜熔。

事件是什么呢圆恤？你可以想象在 Framer 中有一個小人一直在盯著屏幕突倍，當你點擊或滑動屏幕時它就會告訴 Framer腔稀，F(xiàn)ramer 就執(zhí)行你寫的這個事件對應的處理代碼。我們經常要使用事件監(jiān)聽來實現(xiàn)一些交互效果羽历，最常見的就是點擊圖層時切換圖層狀態(tài)焊虏。

我們一般這樣定義一個事件監(jiān)聽操作。

每個圖層對象上面都有一個 on 函數(shù)秕磷，它表示給圖層添加一個事件監(jiān)聽方法诵闭。后面的 Events.Click 是事件類型，這里是點擊事件澎嚣，還有 Events.LongPress 表示長按事件疏尿、 Events.Swipe 表示掃滑事件等，具體可以在事件文檔（ http://framercn.com/docs#events ）中查閱易桃。而后面緊接著是一個函數(shù)褥琐，它里面的代碼就是當這個事件發(fā)生之后需要執(zhí)行的操作。比如這里是輸出 Clicked 和圖層名稱晤郑。需要注意的是敌呈，你在定義后續(xù)操作時可以使用事件監(jiān)聽方法提供給你的兩個對象： event 和 layer ，第一個是當前事件對象造寝，里面存儲的有本次事件的鼠標坐標磕洪、鼠標移動距離等，第二個是事件發(fā)生所在的對象诫龙，這里就是 layerA 這個圖層析显。

Framer 提供的事件種類非常豐富，甚至包括兩指旋轉签赃、3D touch 等谷异，完全可以滿足各種原型的交互浑侥。

接下來我將用一個完整的例子具體講解事件該如何使用。安卓 Material Design 里面的點擊水波紋效果大家一定都知道：

那么用 Framer 怎么實現(xiàn)這個效果呢晰绎？我們先用中文描述一下這個過程：有一個按鈕寓落，當用鼠標點擊它時，以點擊時的位置為圓心繪制一個很小的圓荞下，同時將其放大并不斷降低透明度直至消失伶选。接下來我們將其翻譯成 Framer 的語言。

首先繪制一個按鈕圖層：

通過新建圖層我們就在界面上繪制出了這個按鈕尖昏。需要注意的是仰税，我們要設置它的 clip 屬性為 true ，這樣才能保證點擊時出現(xiàn)的水波紋超出按鈕的部分被隱藏抽诉。 Utils.labelLayer(button, 'CLICK ME') 是快速給按鈕設置文字并讓其在按鈕正中間陨簇； button.style.fontSize = '24px' 則是通過 CSS Style 將其字號變成 24 像素； button.center( ) 則是將該圖層快速居中于屏幕中央迹淌。此時在屏幕正中間就出現(xiàn)了這個按鈕河绽。

接下來就是給它添加一個點擊事件。當鼠標點擊它時唉窃，會發(fā)生以下幾件事：

1耙饰、在按鈕中，以鼠標點擊的坐標點為圓心纹份，畫一個圓形圖層（水波紋）
2苟跪、將這個圓形圖層逐漸變大（scale）且逐漸隱去(opacity)
3、當這個圓形圖層不透明度變成0時蔓涧，移除這個圖層

第一步：

當鼠標點擊它時件已，需要在點擊處畫一個圓形的圖層作為水波紋。通過新建圖層對象 ripple 元暴，并設置它的一系列屬性讓它表現(xiàn)為一個圓形篷扩。需要注意的是，它的寬高（ 這里是 240px ）要比按鈕大昨寞，然后我們再設置它的 scale 屬性為 0.05 瞻惋，即縮小至原大小的5%，這樣它剛出現(xiàn)時就是一個小圓點援岩。為什么要先設置很大的寬高再通過 scale 讓它顯示很小歼狼，而不是設置很小的寬高點擊時增大 scale 讓它蕩漾開呢？是因為第二種方式會導致放大后邊緣模糊且有毛邊享怀。

因為是以點擊處的坐標為圓心羽峰，我們不能直接寫它的 x 、 y 坐標值，因為這個坐標值以它的左上角為準的梅屉。這里我們使用 midX 和 midY 值纱，即其中心坐標值來表示。它的中心坐標值是動態(tài)的坯汤，即鼠標點擊處的坐標值虐唠。這個事件監(jiān)聽方法所提供的 event 對象里面包含了鼠標坐標值，即 event.point 惰聂。但是我們不能直接使用它疆偿，因為這個坐標值是相對于 Framer 中的設備屏幕的。所以我們使用 Screen 對象的 convertPointToLayer 方法把它轉換為相對于 button 圖層的坐標搓幌。

然后通過 button 的 addChild 方法讓這個圓形波紋變成它的子圖層杆故。

第二步：

給圓形波紋圖層添加狀態(tài) bigger ，并讓它通過動畫切換到新狀態(tài)溉愁。如下面的代碼所示处铛，在新狀態(tài) bigger 中它的 scale 變成 4 同時 opacity 變成 0 ，動畫時間是 6 秒拐揭。最后通過 animate 方法執(zhí)行狀態(tài)切換動畫撤蟆。

第三步：

圓形波紋的狀態(tài)切換也是一個事件，我們可以通過 onStateDidSwitch （這是一種事件簡寫形式投队，具體請看參考文檔）來監(jiān)聽它在何時“切換完畢”枫疆，當切換完畢時將該圓形波紋刪除。

其實不刪除也可以敷鸦，反正每個圓形波紋最終不透明度都變成 0 了，看不見了寝贡。但是點一次生成一個子圖層扒披，點擊很多次就會生成很多子圖層，會影響性能圃泡。關鍵是我是強迫癥碟案，不能忍。

這樣我們就完成了安卓點擊水波紋效果颇蜡，總結一下事件的要點：

1价说、事件一般是發(fā)生在圖層上的，包括手勢风秤、動畫鳖目、狀態(tài)切換事件等。
2缤弦、Framer 的事件方法一般會提供 layer 和 event 兩個對象供你使用领迈，可以通過它們獲取事件發(fā)生的圖層以及鼠標位置等。
3、Framer 提供的事件非常詳細豐富狸捅，大大減少了設計師的設計難度衷蜓。

點擊此處，獲取示例的源文件尘喝。

如需轉載請注明：
** 來自 leadream 的簡書 **