在百度旗下的零售大数据平台首页，底部的合作伙伴栏目中，每一个合作伙伴的图标都能够在鼠标指针进入时逐渐变为彩色。
我们曾经在《Axure的7种交互样式（1）-鼠标的交互样式》中学过，使用鼠标悬停的交互样式达到指针进入时改变图片的效果。
但是，在这里不能使用。
因为彩色图片不是直接呈现，而是是逐渐显示。
这就需要我们在原型中准备灰色和彩色两张图片，鼠标指针进入灰色图片时显示彩色图片，并带有逐渐显示的动画。
鼠标指针离开彩色图片时，再逐渐隐藏彩色的图片。
在本案例的素材中，我只提供了彩色的图片。
灰色的图片如何获取呢？
我们可以将彩色图片放入画布后，点击页面空白处，在页面样式面板中，将原型设置为[低保真度]。
此时，画布中的图片就变成了灰色。
然后，我们按快捷键[F5]预览原型，浏览器中就能看到这张灰色图片。
在图片上点击鼠标右键，菜单中选择将图片另存，保存到本地。
最后，就可以把保存下来的灰色图片放入画布中，再将页面样式取消[低保真度]的设置。
这样，我们就有了灰色和彩色两张图片了。
这样做其实是个笨办法。
聪明的办法是点中画布中的彩色图片，在样式面板中点击[调节]的按钮，启用[调整颜色]后，直接将图片的[饱和度]设置为“0”，就可以了。
我们给彩色图片命名为“彩图”，然后给元件添加交互。
灰色图片的交互是[鼠标移入时][显示][彩图]，并带有“500”毫秒的[逐渐]显示动画。
彩色图片默认是隐藏状态，它的交互是[鼠标移出时][隐藏][当前]元件，并带有“500”毫秒的[逐渐]隐藏动画。
最后，我们将“彩图”隐藏，覆盖在灰色的图片上。
到这里，我们就完成了案例的交互需求。
多张图片的话，我们只需要将做好的内容全选复制为多份后，逐一重新导入每一个图片元件的图片，就可以了。
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 逐渐变色的图片