1星著、新建Axure RP項目购笆，取名“Axure制作圖像的放大與縮小效果”
2、拖入動態(tài)面板控件虚循，取名“放大縮小”同欠。設(shè)置大小為560*330px。坐標為x：300横缔，Y：300铺遂。
3、在動態(tài)面板控件“放大縮小”State1狀態(tài)設(shè)置背景圖片茎刚，選擇Repeat為Stretch to Cover
4须眷、添加OnMouseEnter和OnMouseOut事件间影，要求鼠標滑上圖片時放大1.2倍争拐，672px*396px艘绍，鼠標滑出圖片時圖片縮小到原560*330px的效果。
Animate：None圖片瞬間放大初狰，圖片左上角左邊不變莫杈，沿對角放大。
Linear圖片逐漸放大跷究，圖片左上角左邊不變姓迅，沿對角放大。
5俊马、效果圖如下
圖片放大縮小圖1
6丁存、實現(xiàn)圖片對內(nèi)放大（即把圖片拉近的效果），圖片整體大小不變的效果柴我。
拖入一個動態(tài)面板“放大縮小”解寝，在State1狀態(tài)加入一個動態(tài)面板“放大圖”，設(shè)置一個狀態(tài)State2艘儒。設(shè)置動態(tài)面板“放大縮小”大小為370*280（大小自由根據(jù)需要設(shè)置）聋伦。
7夫偶、設(shè)置State2背景圖片，設(shè)置Repeat為Stretch to Contain觉增。
8兵拢、在State2狀態(tài)頁面設(shè)置動態(tài)面板“放大圖”的鼠標事件。OnMouseEnter和OnMouseOut事件逾礁。如下圖说铃。
9、預(yù)覽效果圖如下嘹履。
圖片放大縮小圖2
10腻扇、設(shè)置以圖片中心為中心放大和縮小效果。
動態(tài)面板2個砾嫉，分別取名1幼苛、2。動態(tài)面板1狀態(tài)11焕刮，動態(tài)面板2狀態(tài)22舶沿。如下圖。
設(shè)置狀態(tài)22背景圖片济锄，并選擇Repeat為Stretch to Contain暑椰。
設(shè)置動態(tài)面板1的Dynamic Panel狀態(tài)為勾選Fit Content（此處一定要勾選）霍转。設(shè)置動態(tài)面板1的OnMouseEnter和OnMouseOut事件荐绝。
圖片放大0.2倍，即圖片向上移動300*0.2/2=30px避消，向左移動400*0.2/20=40px低滩。則設(shè)置事件設(shè)置如下圖
11、效果如下圖
圖片放大縮小圖3
12岩喷、對于步驟10恕沫，還有另外一種方式，以比例的形式放大和縮小纱意。
通過添加局部變量獲取當前控件This婶溯，設(shè)置為變量LVAR1。以上表示鼠標移動到圖片上時偷霉，向左和向向上分別移動10%迄委，圖片放大20%。鼠標移出時由于當前圖片已經(jīng)變大类少，則向右和向下移動距離為現(xiàn)在的1/11叙身，而大小為現(xiàn)在的5/6。
13硫狞、效果如下圖
圖片放大縮小圖4
如需素材包及RP源文件信轿，請聯(lián)系作者獲取晃痴。
