美文网首页
YYWebImage渐变模糊效果研究

YYWebImage渐变模糊效果研究

作者: 独孤流 | 来源:发表于2020-06-22 17:00 被阅读0次

前言

项目中有jpg图片支持progressive支持图片从模糊到清晰的加载方式,然后YYWebImage实现了该效果

主要实现方式及技术点:
一、改方式只有jpg模式支持,同时jpg模式的特点是没有透明通道,所以检测是否完整加载第一帧使用检测下载的data转换的图片里是否有透明的点

1、将data解析成图片

.....省略代码....
if (!_progressiveDecoder) {
            _progressiveDecoder = [[YYImageDecoder alloc] initWithScale:[UIScreen mainScreen].scale];
        }
        [_progressiveDecoder updateData:_data final:NO];
.....省略代码....
YYImageFrame *frame = [_progressiveDecoder frameAtIndex:0 decodeForDisplay:YES];
 UIImage *image = frame.image;
.....省略代码....

2、检测图片中是否有透明点,如果有透明点说明第一帧还没加载完成

!YYCGImageLastPixelFilled(image.CGImage)
/// Returns YES if the right-bottom pixel is filled.
static BOOL YYCGImageLastPixelFilled(CGImageRef image) {
    if (!image) return NO;
    size_t width = CGImageGetWidth(image);
    size_t height = CGImageGetHeight(image);
    if (width == 0 || height == 0) return NO;
    CGContextRef ctx = CGBitmapContextCreate(NULL, 1, 1, 8, 0, YYCGColorSpaceGetDeviceRGB(), kCGImageAlphaPremultipliedFirst | kCGBitmapByteOrderDefault);
    if (!ctx) return NO;
    CGContextDrawImage(ctx, CGRectMake( -(int)width + 1, 0, width, height), image);
    uint8_t *bytes = CGBitmapContextGetData(ctx);
    BOOL isAlpha = bytes && bytes[0] == 0;
    CFRelease(ctx);
    return !isAlpha;
}

3、加载到第一帧图后,将图片进行模糊化

[image yy_imageByBlurRadius:radius tintColor:nil tintMode:0 saturation:1 maskImage:nil];

4、在设置图片模糊化并将该图片设置到imageView上的同时,设置imageView的fade动画

if (showFade) {
    CATransition *transition = [CATransition animation];
     transition.duration = stage == YYWebImageStageFinished ? _YYWebImageFadeTime : _YYWebImageProgressiveFadeTime;
     transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
     transition.type = kCATransitionFade;
     [self.layer addAnimation:transition forKey:_YYWebImageFadeAnimationKey];
  }
 self.image = image;

在走3+4的这个流程中,需要设置两次回调的最小时间,如果回调的最小时间小于动画的0.4s,则当次回调不做处理


根据1~4的流程,实现正常的图片渐变加载效果,然后改用加载其他类型的图片,如webp先加载一个模糊的缩略图,然后再加载大图,也能一样实现jpg的progressive的效果了

相关文章

  • YYWebImage渐变模糊效果研究

    前言项目中有jpg图片支持progressive支持图片从模糊到清晰的加载方式,然后YYWebImage实现了该效...

  • 李涛 绘画5

    渐变工具:用在调色,控制图层显示范围。 杂色渐变不能控制颜色是随机产生的。配合背后模式可以制作光芒效果。 模糊工具...

  • 为你的文本框添加进度提示模糊层

    对于渐变模糊效果我们要通过CAGradientLayer类进行实现。推荐一篇文章CAGradientLayer的一...

  • YYWebImage使用方法(转载自官方)

    YYWebImage YYWebImage is an asynchronous image loading fr...

  • iOS-生成颜色图片(纯色,渐变,模糊效果)

    创建一张纯色图片 创建一张渐变色图片 创建一张模糊效果图片

  • 2017IFE-鼠标悬浮模糊效果

    前言 2017-百度前端技术学院编码任务:鼠标悬浮模糊效果 任务描述 实现图示效果 点击查看 实现文字的流光渐变动...

  • 文字阴影

    如果给UILabel直接设置下面的代码,效果仅仅只是多了层黑色的阴影而没有渐变模糊的效果 所以推荐下面这段代码,可...

  • 图片慢慢显示

    YYWebImage框架 1 UIImageView+YYWebImage.m 2 CALayer+YYW...

  • 模糊效果

    // 首先创建一个模糊效果 let blurEffect =UIBlurEffect(style:...

  • 模糊效果

    //导入第三方库头文件UIImage+ImageEffects //创建模糊对象并指定模糊类型毛玻璃类 UIBlu...

网友评论

      本文标题:YYWebImage渐变模糊效果研究

      本文链接:https://www.haomeiwen.com/subject/yrfffktx.html