• GIF Animated 扩展
  • 下载链接
  • 功能概述
  • 截图
    • 扩展界面
    • 应用示例
  • 函数
  • 事件
  • 属性
  • 使用示例
    • 基础GIF加载
    • 从SD卡加载GIF
    • 获取GIF信息
    • GIF控制按钮
    • 响应GIF点击
    • 透明颜色效果切换
    • 批量加载多个GIF
    • 实时显示播放状态
  • 高级应用
    • 加载动画效果
    • 状态指示器
    • 交互式GIF菜单
  • 文件路径说明
    • 资源文件
    • SD卡文件
    • 文件存储位置
  • 透明背景设置
  • 技术规格
  • 注意事项
  • 应用场景
  • 版权信息

« 返回首页

目前AppInventor2用于显示图片的组件是“图像”组件，不过如果设置图片为gif的话，设计视图中图片预览会展示动图，但是通过AI伴侣测试或编译成apk真机测试，就会发现图片不会动，只会展示静态图片。那么问题来了，如何展示动图/动画效果呢？有2种思路参考这里。

当然，也可以使用本文介绍的这款拓展~

Gif 动画扩展，可点击，可设置透明背景，效果如下：

参考代码块：

GIF Animated 扩展

GIF Animated 扩展用于在应用程序中插入动画GIF文件。图像可以是可点击的并支持透明背景。

包名：com.KIO4_AniGif.aix / com.KIO4_AniGif10.aix（Android 10+） 技术基础：基于 GifDecoder.java 开发，包含大量修改 最后更新：2022年6月21日

下载链接

扩展文件需从外部网站获取： com.KIO4_AniGif.aix

p193A3_gif_animado_v2.aia - 完整示例项目 (1.8 MB)

更多扩展请访问：http://kio4.com/appinventor/index.htm#extensiones

功能概述

GIF Animated 扩展提供以下主要功能：

• GIF动画播放：在应用中显示动画GIF文件
• 透明背景支持：设置颜色遮罩实现透明背景效果
• 可点击交互：响应GIF图像的点击事件
• 灵活的文件路径：支持资源文件和SD卡文件
• 帧数获取：获取GIF文件的帧数信息
• 播放控制：启动、停止和循环播放控制

截图

扩展界面

应用示例

函数

LoadGif 加载GIF(图像组件,文件路径)

加载并显示GIF动画到指定的图像组件。

• 图像组件：组件类型，要显示GIF的Image组件
• 文件路径：文本类型，GIF文件路径（可以是资源文件名或SD卡绝对路径）

SetTransparentColor 设置透明颜色(颜色)

设置GIF透明背景的颜色遮罩。

• 颜色：数字类型，透明颜色的颜色值
• 提示：尝试多种颜色效果，如白色、黑色、黄色等

GetFrameCount 获取帧数(文件路径) {:.number .read-only}

获取指定GIF文件的帧数。

• 文件路径：文本类型，GIF文件路径
• 返回值：数字类型，GIF动画的总帧数

Start 开始播放()

开始播放GIF动画。

Stop 停止播放()

停止播放GIF动画。

SetLoop 设置循环(是否循环)

设置GIF动画是否循环播放。

• 是否循环：布尔类型，true表示循环播放，false表示播放一次

事件

Click 点击()

当GIF图像被点击时触发。

属性

IsPlaying 正在播放 {:.boolean .read-only}

返回当前GIF是否正在播放。

CurrentFrame 当前帧 {:.number .read-only}

返回当前正在显示的帧数。

TotalFrames 总帧数 {:.number .read-only}

返回GIF动画的总帧数。

使用示例

基础GIF加载

当 屏幕1.初始化
  调用 GifAnimated1.LoadGif 图片组件 "my_animation.gif"
  调用 GifAnimated1.SetTransparentColor 0xFFFFFF  // 设置白色为透明色
  调用 GifAnimated1.Start

从SD卡加载GIF

当 加载按钮.被点击
  设置 文件路径 = "/mnt/sdcard/animations/loading.gif"
  调用 GifAnimated1.LoadGif 动画图片组件 文件路径
  调用 GifAnimated1.SetLoop true

获取GIF信息

当 获取信息按钮.被点击
  设置 文件名 = "animation.gif"
  设置 帧数 = GifAnimated1.GetFrameCount(文件名)
  设置 信息文本 = "GIF总帧数: " & 帧数

GIF控制按钮

当 播放按钮.被点击
  调用 GifAnimated1.Start

当 停止按钮.被点击
  调用 GifAnimated1.Stop

当 循环切换.被点击
  设置 当前状态 = GifAnimated1.正在播放
  如果 当前状态 则
    调用 GifAnimated1.Stop
    设置 循环切换.文本 = "播放"
  否则
    调用 GifAnimated1.Start
    设置 循环切换.文本 = "停止"

响应GIF点击

当 GifAnimated1.点击
  显示通知 "GIF被点击了！"
  设置 点击次数 = 点击次数 + 1
  设置 点击计数标签.文本 = "点击次数: " & 点击次数

透明颜色效果切换

当 白色透明按钮.被点击
  调用 GifAnimated1.SetTransparentColor 0xFFFFFF  // 白色
  显示通知 "设置白色为透明"

当 黑色透明按钮.被点击
  调用 GifAnimated1.SetTransparentColor 0x000000  // 黑色
  显示通知 "设置黑色为透明"

当 黄色透明按钮.被点击
  调用 GifAnimated1.SetTransparentColor 0xFFFF00  // 黄色
  显示通知 "设置黄色为透明"

批量加载多个GIF

当 批量加载按钮.被点击
  设置 GIF列表 = ["loading.gif", "success.gif", "error.gif"]
  设置 图片组件列表 = [加载GIF, 成功GIF, 错误GIF]

  对于每项 文件名 在 GIF列表
    设置 索引 = 位置在列表中 文件名 在 GIF列表
    设置 当前组件 = 选择列表项 图片组件列表 索引
    调用 GifAnimated1.LoadGif 当前组件 文件名
    调用 GifAnimated1.SetTransparentColor 0xFFFFFF

实时显示播放状态

当 状态计时器.计时
  设置 正在播放状态 = GifAnimated1.正在播放
  设置 当前帧 = GifAnimated1.当前帧
  设置 总帧 = GifAnimated1.总帧

  设置 状态标签.文本 = "状态: " &
                      如果 正在播放状态 则 "播放中" 否则 "已停止"
  设置 进度标签.文本 = "进度: " & 当前帧 & "/" & 总帧

高级应用

加载动画效果

当 开始加载按钮.被点击
  设置 加载动画组件.可见 = true
  调用 GifAnimated1.LoadGif 加载动画组件 "loading.gif"
  调用 GifAnimated1.SetTransparentColor 0xFFFFFF
  调用 GifAnimated1.SetLoop true
  调用 GifAnimated1.Start

  // 模拟加载过程
  调用 计时器1.计时 3000

状态指示器

当 计时器1.计时
  调用 GifAnimated1.Stop
  设置 加载动画组件.可见 = false

  // 显示成功动画
  调用 GifAnimated2.LoadGif 成功动画组件 "success.gif"
  调用 GifAnimated2.Start

交互式GIF菜单

当 GifAnimated1.点击
  如果 点击区域 = "左侧" 则
    显示通知 "选择了左菜单项"
  否则如果 点击区域 = "右侧" 则
    显示通知 "选择了右菜单项"
  否则
    显示通知 "点击了中心区域"

文件路径说明

资源文件

"my_animation.gif"

只需写入文件名，GIF文件必须放在应用的资源文件夹中。

SD卡文件

"/mnt/sdcard/directory/file.gif"

需要写入完整的绝对路径。

文件存储位置

• Companion 模式：/storage/emulated/0/Android/data/edu.mit.appinventor.aicompanion3/files/
• 构建应用：/storage/emulated/0/Android/data/[应用包名]/files/

透明背景设置

设置透明背景时，建议尝试以下颜色：

• 0xFFFFFF - 白色（最常用）
• 0x000000 - 黑色
• 0xFFFF00 - 黄色
• 0x00FF00 - 绿色

选择哪种颜色取决于GIF文件的背景色。

技术规格

• 基础代码：基于 GifDecoder.java
• Android版本：支持普通版本和Android 10+版本
• 文件格式：仅支持 GIF 动画文件
• 透明度：支持颜色遮罩实现透明效果
• 交互性：支持点击事件响应
• 内存使用：根据GIF大小和帧数而定

注意事项

1. Image组件必需：扩展需要一个Image组件来显示GIF
2. 文件路径：资源文件只需文件名，SD卡文件需绝对路径
3. 透明效果：需要根据GIF背景色选择合适的透明颜色
4. 内存考虑：大尺寸或高帧数GIF可能消耗较多内存
5. Android 10+：使用专门的Android 10+版本
6. 文件权限：访问SD卡需要相应的存储权限

应用场景

• 加载动画和进度指示器
• 交互式按钮和菜单
• 动态图标和徽章
• 教程和演示动画
• 游戏元素和动画效果
• 状态指示器（成功/失败/警告）

版权信息

• 原作者：Juan Antonio
• 原始网址：https://community.appinventor.mit.edu/t/gif-animated-extension-clickable-transparent-background/1549
• 发布日期：2019年12月29日
• 最后编辑：2022年6月21日
• 技术来源：基于 Android 开源项目的 GifDecoder.java

文档最后更新：2025年11月19日