Axure原型制作案列--圖片放大縮小(基於動態面板)


本篇案列的效果圖:一張圖片,鼠標移動到圖片上時,圖片以中心為原點,向四周放大;當鼠標離開圖片時,圖片還原到初始狀態。

 

准備工作:一台電腦,安裝Axure軟件(安裝包請自行百度下載,我的Axure 版本是RP8)。

 軟件圖標

哦,需要軟件的及漢化包的,網上找不到,可以加我微信 luckybobo0606,免費分享。

長篇大論的理論我在這里先不寫了,因為是案例,所以直接上制作步驟吧,不會的小主位,希望你們按着我的步驟能出效果圖,謝謝各位。

 

第一步:在“原件庫”中,選擇“動態面版”原件,鼠標拖動到頁面編輯區,命名為 img。(我將圖片放到 x:100, y: 100 的位置),動態面板根據圖片尺寸調整,本例中大小為 200*200大小。

 

第二步:鼠標選中頁面中的 動態面板img,在右側選擇“樣式”頁簽,背景圖片欄中 導入一個圖片,並在下面的長框中選擇“填充”項。

第三步:鼠標選中頁面中的 動態面板img, 鼠標右鍵,選擇“轉換為動態面板”,並給面板起名為 outter。

(本例中要實現以中心點為核心的動圖,是需要二個動態面板的,即動態面板中嵌套動態面板)

第四步:選中頁面中的動態面板,在右側“屬性”欄,交互下的“更多事件>>>”中選擇 “鼠標移入時” 添加觸發事件,1,鼠標移入到圖片中時,設置圖片的尺寸大小;2,讓外層的動態面板移動。注意:圖片的坐標是心圖片的 左上定點為原點的。

(因圖片大小為 200*200,原始坐標為 100*100,其中心點坐標為 200*200,圖片要放大一倍,即圖片放大后的尺寸為 400*400,圖片需要向四周各放大100,所以移動的距離就應該是100,那么圖片移動后的原點坐標就應該是 0,0。)

選擇鼠標事件

 

1、設置內層圖片動態面板的尺寸為 400*400,並設置動畫為 線性,時間 1000毫秒。

2、移動外面的動態面板到 絕對位置(to) 0,0 上,動畫選擇 線性,時間為 1000毫秒。設置完成后點擊【確定】按鈕。

 第五步:設置鼠標移出時事件。選中頁面中的動態面板,在交互中給“鼠標移出時”添加事件。1、設置圖片大小為 200*200;2、移動動態面板到初始坐標 100*100.

(發現沒:鼠標移出事件與鼠標移入時的事件動作剛好相反。)

 

ok, 設置完成后,點擊 預覽,或在菜單中選擇 發布--> 預覽(快捷鍵是 F5),去見證奇跡吧。

初次寫案列教程,還原其效果的自己制作過程,肯定有很多不足之處,請小主們踴躍指出,在下會盡快改正的。謝謝!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM