本文我来尝试着用axure，将悬停时放大的效果做一下，一起来看看~
为了增加鼠标移入时的响应，一般会在鼠标手势之外另外再加一些特殊的效果突出体现，目的是告之用户“你已经碰到我了”。
常见的效果有以下几种：
1、悬停时图片放大
图1：woshipm首页轮播右侧的图片展位
图2：36Kr列表页图片展位
2、悬停时边框突出（或增加阴影）
图3：优酷视频列表 – 悬停时有阴影
图4：当当网商品列表 – 悬停时连线变化
3、悬停时浮层隐现（包括一些特殊的动画）
图5：woshipm首页的轮播图
图6：土豆网的视频列表
这一篇我们先来尝试着用axure，将悬停时放大的效果做一下。
所需要元件：
- 动态面板 * 1
- 图片元件 * 1
涉及交互事件（用例）：
- 鼠标移入时
- 鼠标移出时
涉及动作：设置尺寸。
涉及动画：线性。
一、最简达成目标
1. 新建一张图片，将其命名为“图片”（养成为元件命名的好习惯）
直接将图片拖入到编辑界面；或者拖入一个图片元件再双击导入图片。
2. 添加交互，达到以下效果
- 鼠标移入时，图片放大；
- 鼠标移出时，图片复原。
那么，就需要设置两个用例：鼠标移入时、鼠标移出时，可参照下图进行相应设置：
注意：
- 放大设置的宽高要比默认的宽高大，要不然看不到效果—— 示例中图片元件默认为400*400，设置放大后的尺寸为450*450。
- （两个动作的）锚点要选择为“中心”，即保证中心不动，默认为“左上角”。
- 可适当选择使用动画，增加一些效果—— 该阶段原型暂未使用动画。
好，现在预览先看一下效果：
可以看到，鼠标移入移出时，图片（尺寸）放大或还原的效果已经达到。但是，我们上文中提到的效果，图片并没有跑出展位的区域。所以，我们还要给这个图片，加一个展示区域 —— 动态面板。
3. 新建一个动态面板，设置宽高与图片相同，命名为“1”
示例原型为400*400
4. 图片元件“图片”剪切粘贴至动态面板“1”中
OK，再来预览一下效果，正常的情况应该如下图：
二、优化之处
（1）设置尺寸时，我们是使用的是纯数字 —— 绝对值。当我们需要使用其他图片时，这个数字很有可能需要重新调整一下（图片尺寸变了）。
主要的场景：后期维护、复用。
不小心就忘了调整，导致效果出错（图片变形）。
此处可以调整为：
a、鼠标移入时：
- 宽：[[this.width * 1.1]] —— 当前元件宽度的1.1倍
- 高：[[this.height * 1.1]] —— 当前元件高度的1.1倍
b、鼠标移出时：
- 宽：[[this.width / 1.1]] —— 当前元件宽度除于1.1（恢复后放大前）
- 高：[[this.height / 1.1]] —— 当前元件高度除于1.1（恢复后放大前）
（2）增加一定的动画，将图片放大/缩小效果更平滑一些。
此处选择的动画是：线性 500ms完成到放大/缩小后的尺寸。
以上2个优化点的设置位置如下图：
优化后的效果：
是不是看上去更舒服一些了？！
以上，图片悬停放大的制作基本完成，预览一下自己的RP，看看效果出来了没？
有问题请留言！希望大家阅文过程中发现问题，及时指出，大胆怀疑，我都会一一回复的。
后续动态预告
- 本文提到的另外两种预览效果如何实现；
- 中继器制作3级菜单。
相关阅读
Axure中继器：2级菜单最简洁的打开方式
Axure：一个简单的进度条，了解“触发事件”动作
Axure：菊花转（页面加载动画）如何制作
Axure：巧用交互样式实现多tab切换效果