axure中心放大图片与改变遮罩透明度

发布网友发布时间：2022-10-13 08:25

共1个回答

热心网友时间：2023-11-02 01:24

效果预览：

分析过程：

鼠标指针进入图片时，放大图片并且遮罩变为完全透明；

鼠标指针离开图片时，图片恢复原有尺寸并且遮罩变为半透明。

最后，以上交互的主体、触发、动作以及动作的目标都是什么？

鼠标指针进入图片时，实际上是进入了遮罩层，所以交互的主体是遮罩层，触发为鼠标移入时，动作是设置图片尺寸和设置遮罩层的透明度。

鼠标指针离开图片时，实际上是离开了遮罩层，所以交互的主体还是遮罩层，触发为鼠标移出时，动作同样是是设置图片尺寸和设置遮罩层的透明度。

制作过程：

一、准备元件

上面的分析中，提到了图片和遮罩层，所以我们先在画布中，放入图片元件和矩形元件，因为整个过程是遮罩层为主，所以矩形元件放在图片原件之上

接下来，再给矩形填充颜色设置为50%不透明

二、添加交互

1、鼠标移入时

第一个动作：设置图片的尺寸，宽度为“320，高度为“320，锚点选择【中心】，动画选择【线性】，时间为“500”毫秒。

第二个动作：设置矩形的不透明度为0

2、鼠标移出时则相反，参照上边的步骤，图片宽高恢复原状，矩形的不透明度为50%

设置完之后咱们预览一下

感觉不对劲，整个图片尺寸都变大了

这个比较好解决，动态面板能够只显示状态内容的部分区域，我们只需要把这些做好的内容放入动态面板，并固定动态面板的尺寸就可以了

全选所有元件，右键转化为动态面板

将自动调整为内容尺寸取消掉就可以了

到这里，我们就完成了这个案例的制作。