本篇案列的效果圖:一張圖片,鼠標移動到圖片上時,圖片以中心為原點,向四周放大;當鼠標離開圖片時,圖片還原到初始狀態。
准備工作:一台電腦,安裝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),去見證奇跡吧。
初次寫案列教程,還原其效果的自己制作過程,肯定有很多不足之處,請小主們踴躍指出,在下會盡快改正的。謝謝!