[原型设计]Axure制作图像的放大与缩小效果的四种方式

1、新建Axure RP项目，取名“Axure制作图像的放大与缩小效果”

2、拖入动态面板控件，取名“放大缩小”。设置大小为560*330px。坐标为x：300，Y：300。



3、在动态面板控件“放大缩小”State1状态设置背景图片，选择Repeat为Stretch to Cover



4、添加OnMouseEnter和OnMouseOut事件，要求鼠标滑上图片时放大1.2倍，672px*396px，鼠标滑出图片时图片缩小到原560*330px的效果。

Animate：None图片瞬间放大，图片左上角左边不变，沿对角放大。

Linear图片逐渐放大，图片左上角左边不变，沿对角放大。





5、效果图如下

图片放大缩小图1



6、实现图片对内放大（即把图片拉近的效果），图片整体大小不变的效果。

拖入一个动态面板“放大缩小”，在State1状态加入一个动态面板“放大图”，设置一个状态State2。设置动态面板“放大缩小”大小为370*280（大小自由根据需要设置）。



7、设置State2背景图片，设置Repeat为Stretch to Contain。



8、在State2状态页面设置动态面板“放大图”的鼠标事件。OnMouseEnter和OnMouseOut事件。如下图。



9、预览效果图如下。

图片放大缩小图2



10、设置以图片中心为中心放大和缩小效果。

动态面板2个，分别取名1、2。动态面板1状态11，动态面板2状态22。如下图。



设置状态22背景图片，并选择Repeat为Stretch to Contain。



设置动态面板1的Dynamic Panel状态为勾选Fit Content（此处一定要勾选）。设置动态面板1的OnMouseEnter和OnMouseOut事件。

图片放大0.2倍，即图片向上移动300*0.2/2=30px，向左移动400*0.2/20=40px。则设置事件设置如下图



11、效果如下图

图片放大缩小图3



12、对于步骤10，还有另外一种方式，以比例的形式放大和缩小。



通过添加局部变量获取当前控件This，设置为变量LVAR1。以上表示鼠标移动到图片上时，向左和向向上分别移动10%，图片放大20%。鼠标移出时由于当前图片已经变大，则向右和向下移动距离为现在的1/11，而大小为现在的5/6。



13、效果如下图

图片放大缩小图4



如需素材包及RP源文件，请联系作者获取。