图片变半透明、界面淡入淡出:App Inventor 新拓展「组件透明度」

摘要： App Inventor 的图像、标签、按钮、布局都只有「可见 / 不可见」两档，做不出半透明效果。新拓展「组件透明度」给任意组件加上 0～100 的透明度：滑动条实时调、开场渐显、水印叠字、精灵淡出，画布上的图像精灵和球也支持。两个方法，即插即用，老项目导入就能用。

图片只能显示或隐藏，半透明做不出来

用 App Inventor 做界面时有个老问题：图像、标签、按钮、布局这些组件没有透明度属性。「可见」就是完完整整显示，「不可见」就是彻底消失，中间那一档——半透明——原生做不出来。

可半透明恰恰是现代 App 里到处都是的效果：

• 图片淡淡地衬在背景上，文字透出来；

• 打开 App 时界面慢慢浮现，而不是生硬地蹦出来；

• 图片上叠一层水印文字；

• 游戏里精灵被击中后慢慢淡出，而不是瞬间消失。

画布画图的颜色倒是有 &HAARRGGBB 的透明度，但那只对画布自己的笔刷有效，图片和其它组件享受不到。

新拓展「组件透明度」就补上这一块：给任意可视组件设置、读取 0～100 的透明度（0 完全透明，100 不透明）。图像、标签、按钮、布局、画布都行，画布上的图像精灵和球也支持。拓展在设计器左侧的「拓展」面板导入 aix 就能用，体积只有 12KB，不改运行时，老项目、老伴侣、编译 APK 都兼容。

快速上手：拖一下滑动条，图片实时变透明

拖一个图像（随便配一张素材图片）、一个滑动条（MinValue 设 0、MaxValue 设 100）、一个按钮、一个标签，再导入拓展：

 

▲ 滑动条实时调透明度、读取当前值

拖滑动条，图片从透明到不透明实时变化；点按钮，标签显示图片当前的透明度数值。

「设置组件透明度」的取值范围是 0～100，传超出范围的数会自动截断，不用担心传错；「获取组件透明度」和它支持的组件范围一致，没设置过的组件读回 100。

开场渐显：配个计时器就是入场动画

透明度能用代码改，就能做动画。打开 App 先把图片设成全透明，再用计时器每次加一点，图片就慢慢浮现出来：

 

▲ 计时器渐显动画

每 30 毫秒加 3，大约一秒钟从全透明淡入到完整显示。把间隔调小、步长调大就是快闪，反过来就是慢悠悠地浮现。同样的写法也能倒着做「淡出」，退出页面前先把界面淡掉再切屏，观感立刻不一样。

 

▲ 渐显动画：透明度 12 / 50 / 100（示意图）

图像精灵和球也支持

画布上的图像精灵和球不是普通组件，但拓展同样搞定了——给精灵设透明度后自动触发画布重绘，不用自己再画一遍：

 

▲ 图像精灵隐身/现身

游戏里常见的「隐身」「残影」「被击中后淡出」，现在几块积木就能做。

 

▲ 水印叠字：内容上盖一层 16% 透明度的提示文字（示意图）

两个方法，一张表看全

方法能用在哪些组件上：

三个注意事项

下载

拓展 v1.0，最低支持 Android 4.0（API 14），aix 体积约 12KB，不需要任何权限。

文档与下载（含可直接运行的示例工程 TestComponentOpacity.aia）：fun123.cn 文档站搜「组件透明度」，或直接访问 www.fun123.cn/reference/extensions/ComponentOpacity.html。

好了，是不是很简单，今天的分享就到此结束，咱们下回见；

如果觉得文章对你有帮助，记得点.赞.转.发.收.藏喔！