App Inventor 2 AnimatedGif扩展教程 - 显示GIF动画

概述
为什么需要扩展？
KIO4_AnimatedGif扩展
替代方案：WebView显示GIF
常见问题
总结

概述

App Inventor内置的Image组件只能显示静态图片（第一帧）。KIO4_AnimatedGif扩展可以播放GIF动画。

为什么需要扩展？

组件	GIF支持	说明
Image	❌ 仅第一帧	内置组件
AnimatedGif	✅ 完整动画	KIO4扩展
WebView	✅ 原生支持	用HTML显示

KIO4_AnimatedGif扩展

下载

来源：http://kio4.com/appinventor/132B_extensiones_animatedgif.htm

基本用法

当 Screen1.初始化
  设 AnimatedGif1.图片 = "animation.gif"
  设 AnimatedGif1.播放 = true

当 按钮_暂停.被点击
  设 AnimatedGif1.播放 = false

当 按钮_继续.被点击
  设 AnimatedGif1.播放 = true

控制播放

设 AnimatedGif1.循环 = true       ' 循环播放
设 AnimatedGif1.速度 = 1.0        ' 播放速度倍率

当 按钮_快进.被点击
  设 AnimatedGif1.速度 = 2.0

当 按钮_慢放.被点击
  设 AnimatedGif1.速度 = 0.5

GIF文件放置位置

GIF文件需要上传到App Inventor的Media中：

Designer → Media → Upload File → 选择.gif文件
设置扩展的图片属性为文件名

也可以从网络加载：

当 按钮_加载网络.被点击
  设 AnimatedGif1.图片 = "https://example.com/animation.gif"

替代方案：WebView显示GIF

如果不想用扩展，可以用WebView直接显示GIF：

当 Screen1.初始化
  设 WebView1.主页地址 = "file:///android_asset/gif_viewer.html"

gif_viewer.html:

<body style="margin:0;background:#000;display:flex;justify-content:center;align-items:center;height:100vh">
<img src="animation.gif" id="gif" style="max-width:100%;max-height:100%">
<script>
setInterval(function(){
  var msg = window.AppInventor.getWebViewString();
  if(msg && msg !== ""){
    document.getElementById('gif').src = msg;
    window.AppInventor.setWebViewString("");
  }
},100);
</script>
</body>

当 按钮_换图.被点击
  设 WebView1.WebView字符串 = "new_animation.gif"

常见问题

Q1: GIF不显示动画？

确认文件是GIF格式（不是静态PNG）
文件大小不要太大（建议 < 2MB）
检查扩展版本是否兼容

Q2: GIF播放卡顿？

缩小GIF尺寸和帧数
降低分辨率
减少颜色数

Q3: 可以从网络加载GIF吗？

可以，但需要网络权限和稳定的连接。建议先下载到本地再显示。

总结

方案	推荐度	说明
AnimatedGif扩展	⭐⭐⭐⭐	专用扩展，功能完整
WebView显示	⭐⭐⭐	无需扩展，够用

版权声明：MIT App Inventor 官方文档采用 CC BY-SA 4.0 授权，本文档由 ai2claw 🐝 整理。