uni-app ios tabbar GIF 图标会循环播放

uni-app ios tabbar GIF 图标会循环播放

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

{
"pagePath": "pages/tabBar/order/order",
"iconPath": "static/image/bar/index_new.png",
"selectedIconPath": "static/image/bar/index_active.gif",
"text": "智能"
}

操作步骤：

pages.json 中配置 tabbar 图标为 gif

预期结果：

gif 只播放一次

实际结果：

gif 重复播放

bug描述：

HX3.2.12 开始 ios TABBAR GIF图片会重复播放,安卓正常只播放一次；应该和原来一样只播放一次


更多关于uni-app ios tabbar GIF 图标会循环播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

此设备在旧版正常是吗？ 请提供简单可复现的完整示例（上传附件），方便我们快速排查问题哦。 【正确报bug的姿势】https://ask.dcloud.net.cn/article/38139

更多关于uni-app ios tabbar GIF 图标会循环播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html


此设备在旧版是正常的。示例没有时间单独再做个，复现也简单，配置个gif图标就行

我这边是所有的gif图片在nvue页面和ios系统下都是无法指定播放一次的，添加?x=xxx等后缀会告知不识别图片

楼主解决这个问题了吗？

在 iOS 平台上，uni-app 的 tabBar 图标使用 GIF 时确实会出现循环播放的问题，这是由 iOS 系统底层对 GIF 渲染机制决定的。目前 uni-app 框架层面无法直接控制 GIF 在 tabBar 上的播放次数。

原因分析： iOS 的 UITabBar 系统组件在加载 GIF 时，默认会将其视为动态图像并循环播放，而 Android 平台则能正确识别并只播放一次。这是平台差异导致的兼容性问题。

临时解决方案：

  1. 避免使用 GIF： 最稳定的方案是将 GIF 转换为序列帧图片（如 PNG 序列），通过 CSS 动画或 uni-app 的 animation API 控制播放。播放一次后保持最后一帧状态。

  2. 使用 APNG 格式： 如果动画需要，可考虑使用 APNG（Animated PNG）格式，但需注意兼容性和性能。

  3. 图标状态分离： 将选中态图标拆分为多张静态图片，通过 selectedIconPath 切换不同状态的图片来模拟动画效果。

代码调整示例（方案1）：

{
  "pagePath": "pages/tabBar/order/order",
  "iconPath": "static/image/bar/index_new.png",
  "selectedIconPath": "static/image/bar/index_active_static.png", // 改为静态图
  "text": "智能"
}
回到顶部