iOS加载WebP

遇到场景:首先直播需要展示 礼物(会动的礼物)

解决:按之前的考虑是 加载 gif , 但是gif 会产生锯齿导致礼物不好看,最后我们想到了webp , 我们将 UI 设计好的 png 几个帧数 合成了webp 格式。

加载webp 我使用的是 YYWebImage
首先加载执行

	pod 'YYWebImage', '~> 1.0.5'

跟着执行

    pod 'YYImage/WebP'

先执行第一步不然第二个 webp 加载不出来。
最后我们打开项目查下 是否有WebP.framwork 这个
iOS加载WebP

其实WebP 有两种,一种是静态,一种是动态(类似gif 很多张合成一个会动的图)

  • 这个是静态的webp
	YYAnimatedImageView *imgView = [[YYAnimatedImageView alloc] init];
    imgView.frame = CGRectMake(10.f, 80.f, width, width);
    imgView.backgroundColor = [UIColor purpleColor];
    [self.view addSubview:imgView];
    
    NSURL *url = [NSURL URLWithString:@"http://xx/app/test.webp"];
    [imgView yy_setImageWithURL:url placeholder:nil];
  • 这加载 动态的webp
	YYAnimatedImageView *imgView2 = [[YYAnimatedImageView alloc] init];
    imgView2.frame = CGRectMake(CGRectGetMaxX(imgView.frame) + 10.f, CGRectGetMinY(imgView.frame), width, width);
    imgView2.backgroundColor = [UIColor purpleColor];
    [self.view addSubview:imgView2];
    
    NSURL *url2 = [NSURL URLWithString:@"http://pia2njyxv.bkt.clouddn.com/out.webp"];
    [imgView2 yy_setImageWithURL:url2 placeholder:nil];
    
  • 这个是加载gif (为了对比记载一个gif 看看)
	YYAnimatedImageView *imgView3 = [[YYAnimatedImageView alloc] init];
    imgView3.frame = CGRectMake(10.f, CGRectGetMaxY(imgView.frame) + 20.f, width, width);
    imgView3.backgroundColor = [UIColor purpleColor];
    [self.view addSubview:imgView3];
    
    NSURL *url3 = [NSURL URLWithString:@"http://xx/pre/gifts/gift_send_5_1541749467.gif"];
    [imgView3 yy_setImageWithURL:url3 placeholder:nil];

最后看看 效果图
iOS加载WebP

后面会继续写 怎样将png合成一个webp (假设的前提是你们的UI 不会,如果会就忽略过就好)
下午继续写