1. 主页 > 行业资讯 > 设计文章 >

Axure9教程:滑块控制图片放大和缩小效果

编者按:在前一篇文章中,作者展示了用Axure9拖动滑块确定得分区间的效果,“Axure9教程:拖动滑块确定得分区间效果”。在本文中,作者使用Axure9来显示缩放滑块控件图片的效果。让我们一起看看。

放大和缩小图片是网站上常见的效果。在前面的教程中,我们已经谈到了制作滑杆的方法。今天我们以网站中常见的头像编辑功能为例,用Axure9做一个滑块来滑动,控制图片的缩放效果。

一、相互作用效应的解释

拖动滑块,滑块可在灰色背景条的范围内滑动,并且图片随着滑块滑动的距离等比例放大缩小。在中间头像预览区域内可以拖动图片在一定范围内拖动,以便用户选取所需的头像部分。

二、组件准备

01

拖到一个名为“拖动区域”的动态面板中,并将大小调整为300 * 300像素,填充颜色为CCCCCC。

双击进入动态面板,拖入一个名为“pic”的[图片]组件。设置尺寸为300*150px,坐标为(0,75)。

02

只有中间的区域是头像效果的预览区域,所以我们可以拖拽四个填充颜色为ffffff、透明度为80%的【矩形】组件,放在“拖拽区域”的顶部作为遮罩。

03

拖动一个[圆形]组件,调整它的颜色和大小,右击它,变成一个名为“滑块”的动态面板。

拖动一个长度为300px的[矩形]组件,放在“滑块”的下层。选择此组件,右键单击“滑块”,将其转换为名为“滑块”的动态面板。

第三,添加互动效果

01

将[拖动时]的效果添加到动态面板的“拖动区域”。目标是图片“pic”。选择[跟随拖动]。

点击【更多选项】,添加【左侧:225】边界,顶部:225。

02

向滑块添加【拖动时】交互,移动滑块【水平拖动】,点击【更多选项】,添加边界【左≥0】【右≤330】。

03

在“滑块”【拖动时】的交互中继续添加【设置大小】的动作。目标是图片“pic”,宽度值为[[This.x*2+300]],高度值为[[pic.width/2]]。

这里我们把图片的最大值设置为初始大小的3倍,即900*450px,我们可以得到一个方程,滑块的x坐标值/灰色背景条的总长度=图片的最大宽度-图片的当前宽度/图片宽度的最大变化值。

可以得出结论,画面的宽度总是[[This.x*2+300]]随滑随拖。

因为宽度总是两倍于高度,所以图片的高度是[[pic.width/2]]。

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/500.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息