最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

逐渐变色的图片

教程 小楼一夜听春语 7437浏览

在百度旗下的零售大数据平台首页,底部的合作伙伴栏目中,每一个合作伙伴的图标都能够在鼠标指针进入时逐渐变为彩色。

地址:https://retail.baidu.com/

我们曾经在《Axure的7种交互样式(1)-鼠标的交互样式》中学过,使用鼠标悬停的交互样式达到指针进入时改变图片的效果。

但是,在这里不能使用。

因为彩色图片不是直接呈现,而是是逐渐显示。

这就需要我们在原型中准备灰色和彩色两张图片,鼠标指针进入灰色图片时显示彩色图片,并带有逐渐显示的动画。

鼠标指针离开彩色图片时,再逐渐隐藏彩色的图片。

在本案例的素材中,我只提供了彩色的图片。

灰色的图片如何获取呢?

我们可以将彩色图片放入画布后,点击页面空白处,在页面样式面板中,将原型设置为[低保真度]。

此时,画布中的图片就变成了灰色。

然后,我们按快捷键[F5]预览原型,浏览器中就能看到这张灰色图片。

在图片上点击鼠标右键,菜单中选择将图片另存,保存到本地。

最后,就可以把保存下来的灰色图片放入画布中,再将页面样式取消[低保真度]的设置。

这样,我们就有了灰色和彩色两张图片了。

这样做其实是个笨办法。

聪明的办法是点中画布中的彩色图片,在样式面板中点击[调节]的按钮,启用[调整颜色]后,直接将图片的[饱和度]设置为“0”,就可以了。

我们给彩色图片命名为“彩图”,然后给元件添加交互。

灰色图片的交互是[鼠标移入时][显示][彩图],并带有“500”毫秒的[逐渐]显示动画。

彩色图片默认是隐藏状态,它的交互是[鼠标移出时][隐藏][当前]元件,并带有“500”毫秒的[逐渐]隐藏动画。

最后,我们将“彩图”隐藏,覆盖在灰色的图片上。

到这里,我们就完成了案例的交互需求。

多张图片的话,我们只需要将做好的内容全选复制为多份后,逐一重新导入每一个图片元件的图片,就可以了。

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:iaxure.com » 逐渐变色的图片