GIF Animated 扩展

« 返回首页

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

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

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

扩展界面1

参考代码块：

扩展界面1

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文件的帧数信息
播放控制：启动、停止和循环播放控制

截图

扩展界面

扩展界面1 扩展界面2 扩展界面3

扩展界面4 扩展界面5

应用示例

应用示例图形示例屏幕截图示例

函数

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加载

when Screen1.Initialize() {
  KIO4_AniGif1.LoadGif(图片1, "animation.gif", 16777215)
  KIO4_AniGif1.MoveStart(1)
}

when KIO4_AniGif1.ImageUp(x, y, inside) {
  Label1.Text = "GIF已点击"
}

从SD卡加载GIF

when Screen1.Initialize() {
  KIO4_AniGif1.LoadGif(图片1, "animation.gif", 16777215)
  KIO4_AniGif1.MoveStart(1)
}

when KIO4_AniGif1.ImageUp(x, y, inside) {
  Label1.Text = "GIF已点击"
}

获取GIF信息

when Screen1.Initialize() {
  KIO4_AniGif1.LoadGif(图片1, "animation.gif", 16777215)
  KIO4_AniGif1.MoveStart(1)
}

when KIO4_AniGif1.ImageUp(x, y, inside) {
  Label1.Text = "GIF已点击"
}

GIF控制按钮

when Screen1.Initialize() {
  KIO4_AniGif1.LoadGif(图片1, "animation.gif", 16777215)
  KIO4_AniGif1.MoveStart(1)
}

when KIO4_AniGif1.ImageUp(x, y, inside) {
  Label1.Text = "GIF已点击"
}

响应GIF点击

when Screen1.Initialize() {
  KIO4_AniGif1.LoadGif(图片1, "animation.gif", 16777215)
  KIO4_AniGif1.MoveStart(1)
}

when KIO4_AniGif1.ImageUp(x, y, inside) {
  Label1.Text = "GIF已点击"
}

透明颜色效果切换

when Screen1.Initialize() {
  KIO4_AniGif1.LoadGif(图片1, "animation.gif", 16777215)
  KIO4_AniGif1.MoveStart(1)
}

when KIO4_AniGif1.ImageUp(x, y, inside) {
  Label1.Text = "GIF已点击"
}

批量加载多个GIF

when Screen1.Initialize() {
  KIO4_AniGif1.LoadGif(图片1, "animation.gif", 16777215)
  KIO4_AniGif1.MoveStart(1)
}

when KIO4_AniGif1.ImageUp(x, y, inside) {
  Label1.Text = "GIF已点击"
}

实时显示播放状态

when Screen1.Initialize() {
  KIO4_AniGif1.LoadGif(图片1, "animation.gif", 16777215)
  KIO4_AniGif1.MoveStart(1)
}

when KIO4_AniGif1.ImageUp(x, y, inside) {
  Label1.Text = "GIF已点击"
}

高级应用

加载动画效果

when Screen1.Initialize() {
  KIO4_AniGif1.LoadGif(图片1, "animation.gif", 16777215)
  KIO4_AniGif1.MoveStart(1)
}

when KIO4_AniGif1.ImageUp(x, y, inside) {
  Label1.Text = "GIF已点击"
}

状态指示器

when Screen1.Initialize() {
  KIO4_AniGif1.LoadGif(图片1, "animation.gif", 16777215)
  KIO4_AniGif1.MoveStart(1)
}

when KIO4_AniGif1.ImageUp(x, y, inside) {
  Label1.Text = "GIF已点击"
}

交互式GIF菜单

when Screen1.Initialize() {
  KIO4_AniGif1.LoadGif(图片1, "animation.gif", 16777215)
  KIO4_AniGif1.MoveStart(1)
}

when KIO4_AniGif1.ImageUp(x, y, inside) {
  Label1.Text = "GIF已点击"
}

文件路径说明

资源文件

when Screen1.Initialize() {
  KIO4_AniGif1.LoadGif(图片1, "animation.gif", 16777215)
  KIO4_AniGif1.MoveStart(1)
}

when KIO4_AniGif1.ImageUp(x, y, inside) {
  Label1.Text = "GIF已点击"
}

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

SD卡文件

when Screen1.Initialize() {
  KIO4_AniGif1.LoadGif(图片1, "animation.gif", 16777215)
  KIO4_AniGif1.MoveStart(1)
}

when KIO4_AniGif1.ImageUp(x, y, inside) {
  Label1.Text = "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大小和帧数而定

注意事项

Image组件必需：扩展需要一个Image组件来显示GIF
文件路径：资源文件只需文件名，SD卡文件需绝对路径
透明效果：需要根据GIF背景色选择合适的透明颜色
内存考虑：大尺寸或高帧数GIF可能消耗较多内存
Android 10+：使用专门的Android 10+版本
文件权限：访问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日

GIF Animated 扩展：可点击透明背景动画GIF播放器