本文主要是運(yùn)用全局變量，獲取鼠標(biāo)坐標(biāo)參數(shù)以及函數(shù)來判斷鼠標(biāo)入點(diǎn)的方向，最終實(shí)現(xiàn)跟隨鼠標(biāo)方向的面板滑動(dòng)動(dòng)畫效果。

當(dāng)鼠標(biāo)從元件A的【上、下、左、右】方向移入時(shí)，則元件B從對應(yīng)方向滑進(jìn)。當(dāng)鼠標(biāo)從其它方向移出時(shí)，則跟隨一起移出，效果如下：

一、頁面布局

從左側(cè)元件庫拉入一個(gè)【熱區(qū)】作為鼠標(biāo)觸發(fā)區(qū)域，一個(gè)【矩形】作為描述B和一張【圖片A】，寬高尺寸都設(shè)置為一樣，居中對齊，如下：

其次，將【描述B】設(shè)置為隱藏。

二、添加全局變量

點(diǎn)擊頂部導(dǎo)航【項(xiàng)目】-》【全局變量】，添加兩個(gè)變量，分別為【CursorX】和【CursorY】，主要是為了作為后面獲取鼠標(biāo)的坐標(biāo)參數(shù)。

三、添加交互

1. 選中【熱區(qū)】，添加【鼠標(biāo)移入時(shí)】事件。

2. 選擇左側(cè)【全局變量】-》【設(shè)置變量值】，勾選變量【CursorX】和【CursorY】，設(shè)置值分別為鼠標(biāo)的坐標(biāo)X軸【Cursor.x】和Y軸【Cursor.y】。

3. 當(dāng)鼠標(biāo)從觸發(fā)區(qū)域左邊緣滑入時(shí)，即鼠標(biāo)坐標(biāo)與左邊緣的距離為0，而與其他邊緣的距離大于0，即此距離為最小值。

因此只需要判斷【鼠標(biāo)坐標(biāo)】與四個(gè)【邊緣】的距離中，最小值為哪一個(gè)，即從哪個(gè)邊緣移入。

利用函數(shù)【Math.abs】取絕對值來計(jì)算距離，函數(shù)【Math.min】取最小值來判斷哪一邊緣最小。

4. 假設(shè)鼠標(biāo)從左邊移入，添加【鼠標(biāo)移入時(shí)】事件case2，設(shè)置元件【描述B】為顯示，動(dòng)畫為【向右滑動(dòng)】，時(shí)間：200毫秒。

添加條件，如下：

設(shè)置第一個(gè)值為：[[Math.min(Math.abs(This.left-CursorX),Math.abs(This.right-CursorX),Math.abs(This.top-CursorY),Math.abs(This.bottom-CursorY))]]等于第二個(gè)值[[Math.abs(This.left-CursorX)]]，如下：

即左邊邊緣為最小距離時(shí)，鼠標(biāo)從左邊移入。

5. 同理，為其他三個(gè)方向增加【鼠標(biāo)移入時(shí)】事件，相關(guān)判斷條件如下：

6. 最后是，添加【鼠標(biāo)移出時(shí)】的交互事件。

判斷條件原理與上面移入時(shí)一樣，即鼠標(biāo)從左邊移出時(shí)，設(shè)置元件【描述B】為隱藏，動(dòng)畫為【向左滑動(dòng)】，時(shí)間：200毫秒。

同理，其它三個(gè)移出方向的判斷條件如下：

四、交互細(xì)節(jié)調(diào)整

1. 無論是鼠標(biāo)移入還是移出，都必須重新設(shè)置全局變量值【CursorX】和【CursorY】為【Cursor.x】和Y軸【Cursor.y】。這種才能保證讓元件【描述B】跟隨鼠標(biāo)的方向運(yùn)動(dòng)。

2. 可以發(fā)現(xiàn)，上面第四個(gè)方向的交互判斷條件，我們可以省略掉，不用寫出來，直接設(shè)置元件【描述B】的交互動(dòng)畫。

五、預(yù)覽效果

歡迎大家留言評論，也可以留下你的評論，期待想看到的交互效果。

示例下載：

https://pan.baidu.com/s/14mugPY2mzI3MCVLD3YDG6w

提取碼: uyag

示例演示：

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議