• QQ空间
  • 收藏

Axure:图片切换放大、缩小效果展示

| 2020-12-08

下面分享一个常见的图片切换效果(放大缩小的感觉),要学会该效果,需掌握两个知识点:改变组件尺寸和移动组件位置。

先看下完成的效果:

step1:基础知识点掌握

1. 改变图片尺寸

(1)缩小效果

【缩小效果】点击“缩小”按钮时,以左上角为中心,缩小图片尺寸为原图片长宽的80%,[[Target.width*0.8]]中,Target指目标组件,因为该事件改变的是图片组件,所以Target指原型中图片,Target.width即为原图片的宽度,[[Target.height*0.8]]与之同理。

写法如下:

(2)放大效果

点击“放大”按钮时,以右上角为中心,放大图片为原图片长宽的125%,即*1.25,写法如下:

大家也可以尝试以不同锚点的放大缩小效果。

2. 移动组件位置

(1)移动到相对位置

点击“固定移动x+30,y+30”按钮时,图片相对于原位置x+30,y+30移动,x,y为原图片组件的位置,即图片左上角点的x,y坐标,写法如下:

(2)移动到绝对位置(到达)

点击“移动到(0,0)”按钮时,图片移动到gu固定原点位置(0,0)写法如下:

掌握以上两个知识点,即开始下面效果的制作。

step2:初始组件准备

初始组件准备与排布

如下图,为了方便使用,大图尺寸为500*300,小图为大图尺寸的80%,即400*240;从左到右,位置分别为(300,100)、(500、70)、(800、100),根据图片内容,分别命名为su、wx、co。

如下图:

step3:交互事件写法

1. 第一个向左事件(默认状态下)

默认状态下中间展示wx图片,点击向左时,wx图片缩小为400*240,co图片放大为500*300,同时移动三个图片位置wx(300,100),co(500,70),su(800,100);容易被忘记的事,还要设置将co图片置顶(若没有该事件,默认还是wx图片在顶部会挡住co图片)。

写法如下:

2. 增加条件判断

点击左边按钮,当wx居中展示时,则co居中;当co居中时,则su居中;当su居中时,则wx居中。因此点击左边按钮时,需要增加判断,这里我们拖入一个文字组件记录当前图片居中状态,默认判断文字组件文字为wx,点击时,改变判断组件文字,并在上述1事件中添加判断条件,当判断文字=wx时,如下图:

3. 记录当前状态

在上述事件中,新增设置”判断“文字为变化后的状态,即co,到此即完成了状态为wx时,左边按钮的完整事件,如下图:

4. 编辑状态为co时,左边按钮事件

同样为左边按钮,复制上述完整case1事件,编辑判断文字为co时,点击向左时,co图片缩小为400*240,su图片放大为500*300,同时移动三个图片位置co(300,100),su(500,70),wx(800,100),置顶su图片,设置判断文字为su,事件如下图:

5. 编辑状态为su时,左边按钮事件

同样为左边按钮,复制上述完整case2事件,编辑判断文字为su时,点击向左时,su图片缩小为400*240,wx图片放大为500*300,同时移动三个图片位置su(300,100),wx(500,70),co(800,100),置顶wx图片,设置判断文字为wx,事件如下图:

操作到此,即完成了左边按钮的全部事件。

6. 编辑右边按钮case1事件(当判断=wx时)

当判断=wx时,点击右边按钮,wx图片缩小为400*240,su图片放大为500*300,同时移动三个图片位置co(300,100),su(500,70),wx(800,100),置顶su图片,设置判断文字为su,事件如下图:

7. 编辑右边按钮case2、case3事件(当判断=su、co时)

同样的方法,编辑当判断=su、co时右边按钮的事件,则完整的右边按钮事件,如图:

到此为止,则完成了整个骚气的图片切换放大缩小效果(把判断文字组件隐藏),预览如下:

有想要做的效果或者想知道的知识点,可以留言,如果我会,可以下次出~

 

作者:五月,微信公众号:五月频道(wuyuepd)

本文由 @五月 原创发布于人人都是产品经理。未经许可,禁止转载

2021-01-13
图片 微博或推独立图片社交产品
增哥导读:虽然Instagram已经证明了图片社交可以单独成为一款产品,但国内似乎仍然没有特别成功的例子,尤其是朋友圈、微博本身已经承载大量图片发布的前提下,而... <详情>
2021-01-13
图片 分享鼻子假体图片大全 让你拥有坚挺丰满的鼻子
鼻子位于脸部中心点,也是脸上最凸出的器官,所以看一个人时鼻子最容易成为视觉的焦点推荐鼻子由低变高时需要在鼻部的组织中埋入一定厚度的填充物,这个填充物我们称为假体... <详情>
2021-01-13
图片 2017春季美甲图片 潮人最爱的款式都在这!
2017年春季美甲图片来了,潮人最爱的款式都在这了,赶紧跟上潮流,为自己换一款时尚的美甲吧!我们来看看T台上的美甲,就知道今年流行什么元素了!指甲可是很重要的哦... <详情>
2021-01-13
图片 超大胸肌最壮肌肉男图片 5个方法教你练就完美胸肌
胸肌,顾名思义,胸肌就是胸部的肌肉,由左右两部分构成,又称胸大肌原文胸肌一般指男人的胸部肌肉。发达的胸肌是男人性感特征的重要组成部分。胸肌组成……   胸肌,顾... <详情>
2021-01-13
图片 秋装减龄搭配图片 引领秋季时尚
  蓝色格纹的半身裙,是减龄良品之一,搭配纯净的白T、深灰袜子,活力又很甜美。外搭一件保暖有型的外套,也很重要呢。秋季天气的特征是早晚温差大,出门记得穿件外套哦... <详情>
2021-01-13
图片 Axure RP9 案例:京东与淘宝的商品图片是如何被放大的?
在电商的商品详情页中我们经常会看到图片放大器的运用,我们以京东商品详情页为例来制作这样的原型效果。案例中综合运用了鼠标移入事件、鼠标移动事件,元件的移动、元件的... <详情>