iOS加载Gif图片的N种方式

本文介绍了在iOS开发中实现GIF动画的多种方法,包括使用系统UIImageView类组合多张图片制作动画、采用不同第三方库如YFGIFImageView、SCGIFImageView等来高效展示GIF动画,并展示了如何为MBProgressHUD添加加载动画。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.系统UIImageView 多张图片组成动画

/**   *   UIImageView 动画   *   Memory-23M   */  -(void)gifPlay1  {  //    NSArray  *array=@[@"image0.png",@"image1.png",@"image2.png"];  //    UIImageView  *imgview= [UIImageView imageViewAnimation:CGRectMake(50,80, 550/2, 200)  imageNames:array duration:1];            UIImageView* animatedImageView = [[UIImageView alloc] initWithFrame:CGRectMake(50,80, 550/2, 200)];      animatedImageView.animationImages =@[[UIImage imageNamed:@"image0"],                                           [UIImage imageNamed:@"image1"],                                           [UIImage imageNamed:@"image2"],                                           ];      animatedImageView.animationDuration = 1.0f;      animatedImageView.animationRepeatCount = 0;      [self.view addSubview: animatedImageView];      [animatedImageView startAnimating];  }  

 

2.利用第三方库

1)IImageView-PlayGIF  YFGIFImageView

/**   *  UIImageView-PlayGIF 是 UIImageView 子类,用来显示 GIF。UIIMageView-PlayGIF 性能高,而且占用的内存很低。   *  https://github.com/yfme/UIImageView-PlayGIF   *  Memory-21.9M   *  #import "YFGIFImageView.h"   */  -(void)gifPlay2  {      NSString  *gifPath=[[NSBundle mainBundle] pathForResource:@"test" ofType:@"gif"];      YFGIFImageView  *gifview=[[YFGIFImageView alloc]init];      gifview.backgroundColor=[UIColor clearColor];      gifview.gifPath=gifPath;      gifview.frame=CGRectMake(50, 100,550/2, 200);      [self.view addSubview:gifview];      [gifview startGIF];  }  

 

 

2)SCGIFImageView

/**   *  摘要: SCGIFImageView是一个开源的GIF图片动画显示控件,通过将GIF的每一帧都取出来生成UIImage对象存放在一个数组中,然后使用NSTimer进行动画轮转。   *  https://github.com/shichangone/SCGifExample   *  Memory-22.5M   *  #import "SCGIFImageView.h"   */  -(void)gifPlay3  {      NSString* filePath = [[NSBundle mainBundle] pathForResource:@"test.gif" ofType:nil];      NSData* imageData = [NSData dataWithContentsOfFile:filePath];      SCGIFImageView* gifImageView = [[SCGIFImageView alloc]init];      [gifImageView setData:imageData];      gifImageView.frame = CGRectMake(50,100, gifImageView.image.size.width, gifImageView.image.size.height);      [self.view addSubview:gifImageView];  }  

 

3)YLGIFImage

/**   *  YLGIFImage 是异步 GIF 图像解码器和图像查看器,支持播放 GIF 图像,而且使用很少的内存。   *  https://github.com/liyong03/YLGIFImage   *  Memory-22.7M   *  #import "YLImageView.h"   *  #import "YLGIFImage.h"   */  -(void)gifPlay5  {      YLImageView* imageView = [[YLImageView alloc] initWithFrame:CGRectMake(0, 160, 320, 240)];      [self.view addSubview:imageView];      imageView.image = [YLGIFImage imageNamed:@"test.gif"];  }  

 

 

4)SDWebImageView里的UIImage+GIF

提供接口:

+ (UIImage *)sd_animatedGIFNamed:(NSString *)name;
+ (UIImage *)sd_animatedGIFWithData:(NSData *)data;
- (UIImage *)sd_animatedImageByScalingAndCroppingToSize:(CGSize)size;

/**   *  利用SDWebImageView 库播放gif   *  Memory-22.6M   *  #import "UIImage+GIF.h"   */  -(void)gifPlay6  {      UIImage  *image=[UIImage sd_animatedGIFNamed:@"test"];      UIImageView  *gifview=[[UIImageView alloc]initWithFrame:CGRectMake(50,80,image.size.width, image.size.height)];      gifview.backgroundColor=[UIColor orangeColor];      gifview.image=image;      [self.view addSubview:gifview];  }  

 

 

为MBProgressHUD 添加加载动画

/**   *  MBProgressHUD 添加加载动画   *  Memory-23.8M   *  #import "UIImage+GIF.h"   *  #import "MBProgressHUD.h"   */  -(void)gifPlay6  {      UIImage  *image=[UIImage sd_animatedGIFNamed:@"test"];      UIImageView  *gifview=[[UIImageView alloc]initWithFrame:CGRectMake(0,0,image.size.width/2, image.size.height/2)];      gifview.image=image;            MBProgressHUD *hud = [MBProgressHUD showHUDAddedTo:self.view animated:YES];      hud.color=[UIColor grayColor];//默认颜色太深了      hud.mode = MBProgressHUDModeCustomView;      hud.labelText = @"加载中...";      hud.customView=gifview;  }  

 

其它

微博客户端 VVebo 的作者开源了他自己为VVebo写的GIF解决方案 VVeboImageView, 占用内存很小。(iOS移动开发周报-第4期)

 

 \

 
Demo下载
http://yunpan.cn/cj6JBN7mfETWE (提取码:226f)
 
 
 

### 处理 React Native 中的 GIF 文件 在 React Native 中处理 GIF 文件可以通过多种方法实现。以下是几种常见的解决方案: #### 使用 `Image` 组件加载本地或远程 GIF React Native 的原生 `Image` 组件支持显示静态图片以及动态 GIF 图片。无论是来自网络资源还是本地存储,都可以通过简单的配置来展示 GIF。 ```javascript import React from 'react'; import { Image, StyleSheet } from 'react-native'; const App = () => { const gifSource = require('./path/to/local.gif'); // 加载本地 GIF const remoteGifUrl = 'https://example.com/path/to/remote.gif'; // 远程 GIF URL return ( <> {/* 展示本地 GIF */} <Image source={gifSource} style={styles.image} /> {/* 展示远程 GIF */} <Image source={{ uri: remoteGifUrl }} style={styles.image} /> </> ); }; const styles = StyleSheet.create({ image: { width: 200, height: 200, }, }); export default App; ``` 这种方法简单易用,适合大多数场景[^1]。 --- #### 使用第三方库增强功能 如果需要更高级的功能(如控制播放、暂停等),可以考虑引入专门用于处理动画图像的第三方库。以下是一些常用的库及其特点: ##### 1. **lottie-react-native** 虽然该库主要用于渲染 JSON 格式的矢量动画,但它也可以间接替代某些 GIF 动画需求。不过需要注意的是,它并不直接支持 GIF 文件格式[^3]。 ##### 2. **react-native-gifted-image** 此插件专注于提供更加灵活的方式管理各种类型的媒体文件,包括 GIF。它可以轻松集成到项目中并扩展更多交互选项。 安装命令如下所示: ```bash yarn add react-native-gifted-image ``` 随后按照官方文档完成初始化设置即可开始使用[^2]。 ##### 3. **react-native-animated-gif** 这是一个专门为解决复杂 GIF 渲染而设计的小型工具包。相比默认组件提供了更好的性能优化和支持更多的自定义参数调整机会。 同样先执行依赖添加操作: ```bash npm install --save react-native-animated-gif npx pod-install ios # 如果涉及 iOS 平台则需额外同步 CocoaPods 配置 ``` 接着参照其 GitHub 页面说明实例化控件对象[^4]。 --- ### 总结 对于基本应用场合推荐优先尝试内置方案即利用标准 API 实现快速部署;而对于追求极致用户体验或者特殊业务逻辑定制,则建议选用合适的外部模块辅助开发工作流。每种方式各有优劣,请依据实际需求权衡取舍。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值