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

时间:2024-05-21 08:30:40

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

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

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

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

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

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

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

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

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

5、效果图如下

图片放大缩小图1

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

6、实现图片对内放大(即把图片拉近的效果),图片整体大小不变的效果。

拖入一个动态面板“放大缩小”,在State1状态加入一个动态面板“放大图”,设置一个状态State2。设置动态面板“放大缩小”大小为370*280(大小*根据需要设置)。

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

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

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

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

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

9、预览效果图如下。

图片放大缩小图2

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

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

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

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

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

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

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

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

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

11、效果如下图

图片放大缩小图3

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

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

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

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

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

13、效果如下图

图片放大缩小图4

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

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