中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

感謝羅羅諾亞索作者分享的【Axure教程：圖片局部開燈交互動效】文章；由于該原型是用AxureRP9實現的，因此本文將結合文章實現方法，使用AxureRP8.0實現，并升級實現方法，引用全局變量，使原型不被位置限制，可以更靈活的復制應用。在此，感謝羅羅諾亞索作者的分享。

效果如下：

一、界面布局

（1）拉入一張圖片2作為底圖，再拉入一個矩形，命名為黑層，大小與圖片寬高一致。填充色為黑色，不透明度為60%。

（2）復制圖片2，命名為圖片1。從左側元件庫的基本元件中拉入一個矩形，寬高設置為80*80，從元件庫的Icons中拉入一個心型矩形，寬高設置為60*60，兩個矩形的填充色都為黑色，不透明度為60%。選中這兩個矩形，運用布爾運算將去頂層，得到空心的矩形。

（3）將【圖片1】和空心矩形【心】選中，右鍵轉為動態面板，命名為燈，寬高為80*80。雙擊動態面板【燈】，將【心】移動到（0，0）位置。如下圖所示：

靜態原型如下：

二、交互實現

1. 拖動事件

選中動態面板【燈】，添加【拖動時】交互事件，元件 》選擇“當前元件”，移動為：拖動，動畫：無。

注意：為了不讓面板【燈】移出黑層邊界，需要給界限添加上下左右四個邊界，即頂部 大于等于[[LVAR1.top]]，其中LVAR1為元件黑層，同理，底部小于等于 [[LVAR1.bottom]]，左側大于等于[[LVAR1.left]]，右側小于等于[[LVAR1.right]]。

2. 動態面板中圖片1的移動

按照作者的做法即選擇【圖片1】，移動為：絕對位置，X軸為：[[-LVAR1.x]]，Y軸為：[[-LVAR1.y]]。

當原型的位置不是位于（0，0）位置時，會出現下面的異常情況，及圖片1的位置偏移：

因此，為了使原型的位置不被限制，可以更靈活的應用。本文將引用全局變量，從頂部菜單【項目】》【全局變量】，添加變量dengX和dengY作為獲取動態面板【燈】的位置參數。

選中動態面板【燈】，添加【載入時】，設置全局變量dengX等于[[LVAR1.x]]，dengY等于[[LVAR1.Y]]。其中，LVAR1為元件This。

接下來，只需要將元件【圖片1】的拖動交互事件改為，X軸為：[[dengX-LVAR1.x]]，Y軸為：[[dengY-LVAR1.y]]。即需要減去初始的位置。

最終效果如下：

3. 呼吸動效

選中矩形【心】，添加【載入時】，尺寸的大小變化，并控制循環即可。如下圖所示：

三、作品鏈接

鏈接：https://pan.baidu.com/s/1KV2lZm_lkFewybSs2hTF4Q

提取碼：uqx6

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

本文由 @火星人～艾斯 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議