如何利用Axure制作圖片局部開燈交互動效呢？來文中看看~

本期教學(xué)由于是用作者本人的自拍照片進行制作教學(xué)，所以大家請勿亂傳播，以免暴露本人帥的事實，話不多說，教學(xué)開始！

首先看看效果：

大家先別往下看，先抓破頭皮想想有什么辦法可以做出這個效果。算了，我知道大家想不出來，因為大家已經(jīng)被我?guī)洉灹恕?/p>

第一步：理清思路

1. 這個思路太清奇了，我直接講步驟大家比較容易理解
2. 所以第一步就這樣跳過了

第二步：繪制所需元素

首先找一張帥氣的自拍

然后畫一個和照片一樣大小的矩形做蒙版：黑色，不透明度40%。

畫一個矩形120*120、黑色、不透明度40%，然后畫一個愛心減去。

接下來把上面的圖形命名為：心，創(chuàng)建為動態(tài)面板命名為：燈。設(shè)置動態(tài)面板尺寸為100*100，移動“心”在動態(tài)面板里的位置為：（-10，-10）

打開動態(tài)面板“燈”，復(fù)制一張自拍進來，命名；自拍2，移動到（0，0）位置。

然后回到剛剛的界面，這時候大家有沒有有點思路了，原型繪制準備完成。

第三步：制作交互

拖動動態(tài)面板“燈”時，移動動態(tài)面板“燈”。

大家看看效果：

我們發(fā)現(xiàn)自拍2是跟隨動態(tài)面板“燈”移動的，如果要實現(xiàn)不跟隨動態(tài)面板“燈”移動，根據(jù)《相對論》那么當動態(tài)面板X方向移動距離時，自拍2要反方向移動一樣的距離，Y方向同理。

添加動態(tài)面板“燈”動作，變量LVAR1為動態(tài)面板“燈”，取動態(tài)面板”燈”坐標的原因是，如果動態(tài)面板“燈”向右移動10個像素，那么自拍2向左移動10個像素，這樣就照成了自拍2與照片相對靜止的錯覺。

看看效果，有沒有恍然大悟呢：

第四步：加呼吸燈動效

老方法新建一個動態(tài)面板，命名“控制”，設(shè)置兩個狀態(tài)。

設(shè)置動態(tài)面板“控制”狀態(tài)改變時，設(shè)置尺寸“心”為100*100，動畫線性1000ms→等待1000ms→設(shè)置尺寸“心”為120*120。

設(shè)置頁面載入時，動態(tài)面板“控制”每隔2000ms循環(huán)一次。

最終效果：

終于寫完了，好累T T，不說了，下期做點簡單又帥氣的交互。

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

提取碼：t2lm

本文由 @索大佩羅娜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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