YYImage源码解析<一> 简单使用

YYImage学习笔记<一> 简单使用

前言

YYImage开源库包含5个类文件，分别为：YYImage、YYFrameImage、YYSpriteSheetImage、YYImageCoder、YYAnimaeImageView。

功能简介如下：
YYImage：加载单张图片，包括gif,WebP,APNG等图片(YYImageDemo里面主要测试里这三种)
YYFrameImage：加载多张图使用
YYSpriteSheetImage：加载精灵图片，就是多个图片在一张图纸上，通过计算坐标来取图
YYImageCoder：用于对图片文件进行编解码
YYAnimaeImageView：实现动画效果

简单使用

1、加载gif图(使用YYImage类)

- (void)viewDidLoad {
    // 加载图片
    YYImage * image = [YYImage imageNamed:@"niconiconi"];
    // 类似系统的UIImageView(这里作者重写用于显示gif、WebP和APNG格式图片)
    YYAnimatedImageView *imageView = [[YYAnimatedImageView alloc] initWithImage:image];
    imageView.frame = CGRectMake(0, 70, 300, 300);
    [self.view addSubview:imageView];
}

2 加载WebP格式图片(使用YYImage类)

- (void)viewDidLoad {
    // 加载图片
    YYImage * image = [YYImage imageNamed:@"wall-e"];
    // 类似系统的UIImageView(这里作者重写用于显示gif、WebP和APNG格式图片)
    YYAnimatedImageView *imageView = [[YYAnimatedImageView alloc] initWithImage:image];
    imageView.frame = CGRectMake(0, 70, 300, 300);
    [self.view addSubview:imageView];
}

3 加载APNG格式图片(使用YYImage类)

- (void)viewDidLoad {
    // 加载图片
    YYImage * image = [YYImage imageNamed:@"pia"];
    // 类似系统的UIImageView(这里作者重写用于显示gif、WebP和APNG格式图片)
    YYAnimatedImageView *imageView = [[YYAnimatedImageView alloc] initWithImage:image];
    imageView.frame = CGRectMake(0, 70, 300, 300);
    [self.view addSubview:imageView];
}

4 加载多图(使用YYFrameImage类)

- (void)viewDidLoad {
    [super viewDidLoad];
  
    // 获取图片路径
    NSString *basePath = [[NSBundle mainBundle].bundlePath stringByAppendingPathComponent:@"EmoticonWeibo.bundle/com.sina.default"];
    
    // 拼接图片路径并添加数组
    NSMutableArray *paths = [NSMutableArray new];
    [paths addObject:[basePath stringByAppendingPathComponent:@"[email protected]"]];
    [paths addObject:[basePath stringByAppendingPathComponent:@"[email protected]"]];
    [paths addObject:[basePath stringByAppendingPathComponent:@"[email protected]"]];
    [paths addObject:[basePath stringByAppendingPathComponent:@"[email protected]"]];
    [paths addObject:[basePath stringByAppendingPathComponent:@"[email protected]"]];
    [paths addObject:[basePath stringByAppendingPathComponent:@"[email protected]"]];
    [paths addObject:[basePath stringByAppendingPathComponent:@"[email protected]"]];
    [paths addObject:[basePath stringByAppendingPathComponent:@"[email protected]"]];
    
    // 加载多图
    UIImage *image = [[YYFrameImage alloc] initWithImagePaths:paths oneFrameDuration:0.1 loopCount:0];
    
    // 显示多图
    YYAnimatedImageView *imageView = [[YYAnimatedImageView alloc] initWithImage:image];
    imageView.frame = CGRectMake(30, 70, 50, 50);
    [self.view addSubview:imageView];
}

5 加载精灵图片(使用YYSpriteSheetImage类)

    NSString *path = [[NSBundle mainBundle].bundlePath stringByAppendingPathComponent:@"ResourceTwitter.bundle/[email protected]"];
    UIImage *sheet = [[UIImage alloc] initWithData:[NSData dataWithContentsOfFile:path] scale:2];
    NSMutableArray *contentRects = [NSMutableArray new];
    NSMutableArray *durations = [NSMutableArray new];
    
    
    // 8 * 12 sprites in a single sheet image
    CGSize size = CGSizeMake(sheet.size.width / 8, sheet.size.height / 12);
    for (int j = 0; j < 12; j++) {
        for (int i = 0; i < 8; i++) {
            CGRect rect;
            rect.size = size;
            rect.origin.x = sheet.size.width / 8 * i;
            rect.origin.y = sheet.size.height / 12 * j;
            [contentRects addObject:[NSValue valueWithCGRect:rect]];
            [durations addObject:@(1 / 60.0)];
        }
    }
    YYSpriteSheetImage *sprite;
    sprite = [[YYSpriteSheetImage alloc] initWithSpriteSheetImage:sheet
                                                     contentRects:contentRects
                                                   frameDurations:durations
                                                        loopCount:0];
    
    
    YYAnimatedImageView *imageView = [[YYAnimatedImageView alloc] initWithImage:sprite];
    
    imageView.frame = CGRectMake(30, 70, 50, 50);
    
    [self.view addSubview:imageView];

总结：由上面的例子可以看出，单张图片的加载都是通过YYImage类完成，只有精灵图片的加载(多个图片元素在一张图片上面)，作者重新继承了一个类YYSpriteSheetImage用于计算显示的坐标和时间等。