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

效果预览：

分析过程：

 

• 鼠标指针进入图片时，放大图片并且遮罩变为完全透明；
• 鼠标指针离开图片时，图片恢复原有尺寸并且遮罩变为半透明。

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

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

制作过程：

 

一、准备元件

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

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

二、添加交互

 

1、鼠标移入时

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

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

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

设置完之后咱们预览一下

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

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

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

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

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

转载麻烦标明来处：https://blog.csdn.net/TiaoZhanJi_Xian/article/details/79725320

请尊重经验，别只会照搬，谢谢，如有问题，可咨询QQ：977798066，乐意为你解答