品牌型号:联想Yoga 14Sitl
系统:Windows 10 64位专业版
软件版本:Axure PR 9
在Axure RP中,把图片变成其他形状可以制作多种特殊的图片效果,让页面设计更加丰富和灵活。而让图片一直旋转,可以增加视觉的动态感,用来制作模拟动画,起到吸引用户注意的作用。以下为大家介绍Axure怎么把图片变成其他形状,Axure怎么让图片一直旋转的相关内容。
一、Axure怎么把图片变成其他形状
在Axure中我们无法通过直接改变图片元件本身的设置来达到改变形状的目的,得使用辅助的方式来实现对图片形状的改变。如果我们要制作的不是非常复杂的图片形状,可以利用Axure中预设好的形状来制作。
1、设置目标形状
对于矩形等基本形状元件,我们拖拽进入画布后,通过鼠标右键,在上下文菜单的【选择形状】中,可以快速将矩形变为三角形、五角星等常用形状。

点击【选择形状】后会出现可选形状的列表,点击选中合适的形状,矩形就会变成对应的形状。

例如,这里我点选【五角星】形状,Axure会按照原本矩形元件的长宽比例变成一个【五角星】形状。

通过拖拽四周的锚点,把五角星缩放到合适的大小,解决直接变换图像被压缩的问题。
2、图片填充形状
在右侧样式面板中,找到填充项目,使用其中的【图片】填充命令。

点击【选择】可以打开电脑本地的图片,Axure会把图片作为外框形状的填充内容。

右侧的九宫格指的是对齐的点位位置。可以使用居左、居中、居右等方式对齐。常用的是中心位置对齐。

列表中可以选多种图片显示方式。【不重复】是默认的选择,针对的是形状比图片小时,会显示图片的一个部分,例如这时候五角星中只显示了图片的一部分。常配合点位位置进行设置,决定了把图片哪个部分显示出来。例如当我把左上对齐位置改为居中对齐位置后,显示出来的图像是不一样的。

【重复图片】、【水平重复】、【垂直重复】,这三项针对的是当形状比图片要大时,为了不留白要进行的重复填充方式。
【适应】会根据图片的长宽比例缩放图片,以适应形状的大小。例如在圆形形状中,如果使用【适应】命令,可以把图片缩小进行显示,但是图片会依旧保持原本的长宽比例,露出空白区域,因此是否用【适应】命令需要结合具体的形状来选用。

【填充】会根据形状的大小自动缩放图片到合适的大小,达到最佳的显示,是最常用的选项。例如将【不重复】改为【填充】后,能够在五角星中呈现完整的图片。

【拉伸】是当图片小于形状大小时,强行拉伸图片填充满整个形状空间,容易导致图片大小比例失衡。
在Axure中,用到复杂图片形状的频次不是很高,最常见的是制作圆形的图片,例如头像显示。做法是类似的,我们先置入一个圆形元件,按照键盘Shift键,控制它是一个正圆。也可以观察右侧样式面板中的W(宽度)和H(高度)值是否一致,进行正圆确认。

之后同样在样式面板中,把准备好的用户头像图片填充进圆形形状,选择【居中】和【填充】,就能快速得到用户的头像。

通过先置入形状,再填充图片的方式,我们能够把常规的矩形图片形状改变为多样化的形状样式。如果需要更加复杂的图片形状,建议在Photoshop等专门的图像编辑软件中制作完成后通过png的方式导入Axure中使用。
二、Axure怎么让图片一直旋转
图片一直旋转是一种动态的效果,有多种使用的场景,例如音乐软件中播放音乐时,专辑封面一直在旋转。图片一直旋转是我们要达成的交互目标。在动手设置之前,我们可以先展开一轮分析。
1、 明确交互主体
在这个问题中,主体是明确的,即是图片。我们通过往画布中拖拽一个图片元件,双击图片元件选择电脑本地的图片置入,得到一张图片。

2、 找到触发条件
我们需要思考一个问题:什么情况下图片要进行旋转。也就是什么触发了图片,让图片开始旋转。回到我们的交互目标——让图片一直旋转。可以想象制作完成后,我们一打开页面,图片就在旋转了。因此,我们的触发条件是【页面载入时】。这是Axure中的一个交互触发条件,针对的是页面一打开的情况。需要注意的是,为了设置这个条件,鼠标的锚点不要选中任一元件,这时候才是选中页面本身,【页面载入时】是一个发生在页面上的事件。

如果你找到的交互事件里没有【页面载入时】,大概率是你把鼠标锚点点在了图片元件上,元件上只有【载入时】事件。

3、进行动作设置
接下来,我们要处理的问题是怎么让图片转起来。我们要选择合适的动作。动作中预设好有【旋转】。

我们的旋转目标是图片元件。旋转可以根据需要设置【顺时针】或【逆时针】旋转。要让图片一直转下去,我们可以让旋转度数尽可能地大,并且是360度的倍数。动画可以根据需要选择【线性】、【弹跳】等,线性是比较柔和的方式。秒数控制的是旋转的速度,时间数值越大,旋转速度越慢。

4、 预览测试
我们需要在预览模式下测试设置效果。点击【预览】后,可以看到图片在慢慢的转动,说明设置是正确的,交互目标完成。

以上就是Axure怎么把图片变成其他形状,Axure怎么让图片一直旋转的全部内容。把图片变成其他形状,可以让页面设计更有创意,适合用在展示头像、图标或者特殊图片效果的场景。图片旋转则能增加视觉动态感,吸引用户注意,还能模拟动画效果,比如加载图标或者指针旋转等。两者结合使用,可以让原型设计更生动、更贴近真实的使用体验。