Axure教程:圖片局部開燈交互動效

8 評論 3264 瀏覽 13 收藏 6 分鐘

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

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

首先看看效果:

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

Axure教學(xué)之圖片局部開燈交互動效

第一步:理清思路

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

第二步:繪制所需元素

首先找一張帥氣的自拍

Axure教學(xué)之圖片局部開燈交互動效

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

Axure教學(xué)之圖片局部開燈交互動效

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

Axure教學(xué)之圖片局部開燈交互動效

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

Axure教學(xué)之圖片局部開燈交互動效

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

Axure教學(xué)之圖片局部開燈交互動效

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

Axure教學(xué)之圖片局部開燈交互動效

第三步:制作交互

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

Axure教學(xué)之圖片局部開燈交互動效

大家看看效果:

Axure教學(xué)之圖片局部開燈交互動效

我們發(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與照片相對靜止的錯覺。

Axure教學(xué)之圖片局部開燈交互動效

Axure教學(xué)之圖片局部開燈交互動效

看看效果,有沒有恍然大悟呢:

Axure教學(xué)之圖片局部開燈交互動效

第四步:加呼吸燈動效

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

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

Axure教學(xué)之圖片局部開燈交互動效

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

Axure教學(xué)之圖片局部開燈交互動效

最終效果:

Axure教學(xué)之圖片局部開燈交互動效

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

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

提取碼:t2lm

 

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 哈,看完還是不太會?你可能需要從Axure基礎(chǔ)開始學(xué)

    ?? 這里推薦你加Axure實戰(zhàn)班的助教小可愛@CC-起點學(xué)院(微信:qidiancc520),回復(fù)關(guān)鍵詞:原型禮包

    領(lǐng)取適合產(chǎn)品新人的原型設(shè)計大禮包哦,cc還會不定期分享Axure免費視頻課程呢!

    來自廣東 回復(fù)
  2. 卡在第四步,尺寸效果沒有顯示出來

    來自廣東 回復(fù)
    1. 在沒選中任何東西的情況下,點擊右側(cè)的交互,設(shè)置頁面載入時,循環(huán)動態(tài)面板

      來自福建 回復(fù)
    2. 載入、頁面載入都試過了,不行 ??

      來自廣東 回復(fù)
    3. 你動態(tài)面板是不是沒有添加兩個狀態(tài)

      來自福建 回復(fù)
  3. Axure8打不開

    來自福建 回復(fù)
    1. 對呀 要9才能打開

      來自福建 回復(fù)
  4. 我從未見過如此厚顏無恥之徒

    來自福建 回復(fù)