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

導讀：事件是 Framer 中的一個重要概念，它是交互動效的觸發開關。它主要包括一些手勢事件（觸摸、滑動、雙擊等），還有動畫運行、狀態切換、頁面切換等事件。我們一般通過監聽事件的發生來觸發一些交互動作。

事件是什么呢？你可以想象在 Framer 中有一個小人一直在盯著屏幕，當你點擊或滑動屏幕時它就會告訴 Framer，Framer 就執行你寫的這個事件對應的處理代碼。我們經常要使用事件監聽來實現一些交互效果，最常見的就是點擊圖層時切換圖層狀態。

我們一般這樣定義一個事件監聽操作。

每個圖層對象上面都有一個 on 函數，它表示給圖層添加一個事件監聽方法。后面的 Events.Click 是事件類型，這里是點擊事件，還有 Events.LongPress 表示長按事件、 Events.Swipe 表示掃滑事件等，具體可以在事件文檔（ http://framercn.com/docs#events ）中查閱。而后面緊接著是一個函數，它里面的代碼就是當這個事件發生之后需要執行的操作。比如這里是輸出 Clicked 和圖層名稱。需要注意的是，你在定義后續操作時可以使用事件監聽方法提供給你的兩個對象： event 和 layer ，第一個是當前事件對象，里面存儲的有本次事件的鼠標坐標、鼠標移動距離等，第二個是事件發生所在的對象，這里就是 layerA 這個圖層。

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

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

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

首先繪制一個按鈕圖層：

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

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

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

第一步：

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

因為是以點擊處的坐標為圓心，我們不能直接寫它的 x 、 y 坐標值，因為這個坐標值以它的左上角為準的。這里我們使用 midX 和 midY ，即其中心坐標值來表示。它的中心坐標值是動態的，即鼠標點擊處的坐標值。這個事件監聽方法所提供的 event 對象里面包含了鼠標坐標值，即 event.point 。但是我們不能直接使用它，因為這個坐標值是相對于 Framer 中的設備屏幕的。所以我們使用 Screen 對象的 convertPointToLayer 方法把它轉換為相對于 button 圖層的坐標。

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

第二步：

給圓形波紋圖層添加狀態 bigger ，并讓它通過動畫切換到新狀態。如下面的代碼所示，在新狀態 bigger 中它的 scale 變成 4 同時 opacity 變成 0 ，動畫時間是 6 秒。最后通過 animate 方法執行狀態切換動畫。

第三步：

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

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

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

1、事件一般是發生在圖層上的，包括手勢、動畫、狀態切換事件等。
2、Framer 的事件方法一般會提供 layer 和 event 兩個對象供你使用，可以通過它們獲取事件發生的圖層以及鼠標位置等。
3、Framer 提供的事件非常詳細豐富，大大減少了設計師的設計難度。

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

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