一种高斯模糊渐变动画的实现

作者: zmp1123 | 来源:发表于2016-08-26 11:57 被阅读782次

关于高斯模糊的方式有很多种,但是如果需要模糊渐变,那么对这种高斯模糊算法的性能要求是比较高的,今天这里重点不讨论算法,只是提供一个动画实现的思路。动画效果如下:


高斯模糊渐变动画

高斯模糊

-(UIImage *)boxblurImage:(UIImage *)image withBlurNumber:(CGFloat)blur
{
    if (blur < 0.f || blur > 1.f) {
      blur = 0.5f;
    }
   int boxSize = (int)(blur * 250);
    boxSize = boxSize - (boxSize % 2) + 1;
    CGImageRef img = image.CGImage;
    vImage_Buffer inBuffer, outBuffer;
    vImage_Error error;
    void *pixelBuffer;
    //从CGImage中获取数据
    CGDataProviderRef inProvider = CGImageGetDataProvider(img);
    CFDataRef inBitmapData = CGDataProviderCopyData(inProvider);
    //设置从CGImage获取对象的属性
    inBuffer.width = CGImageGetWidth(img);
    inBuffer.height = CGImageGetHeight(img);
    inBuffer.rowBytes = CGImageGetBytesPerRow(img);
    inBuffer.data = (void*)CFDataGetBytePtr(inBitmapData);
    pixelBuffer = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img));
    if(pixelBuffer == NULL)
        NSLog(@"No pixelbuffer");
    outBuffer.data = pixelBuffer;
    outBuffer.width = CGImageGetWidth(img);
    outBuffer.height = CGImageGetHeight(img);
    outBuffer.rowBytes = CGImageGetBytesPerRow(img);
    error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend);
    if (error) {
        NSLog(@"error from convolution %ld", error);
    }
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef ctx = CGBitmapContextCreate( outBuffer.data, outBuffer.width, outBuffer.height, 8, outBuffer.rowBytes, colorSpace, kCGImageAlphaNoneSkipLast);
    CGImageRef imageRef = CGBitmapContextCreateImage (ctx);
    UIImage *returnImage = [UIImage imageWithCGImage:imageRef];
    //clean up CGContextRelease(ctx);
    CGColorSpaceRelease(colorSpace);
    free(pixelBuffer);
    CFRelease(inBitmapData);
    CGColorSpaceRelease(colorSpace);
    CGImageRelease(imageRef);
    return returnImage;
}

高斯模糊渐变

自动渐变的过程需要加入一个定时器NSTimer,并且循环。每0.1秒循环一次,通过一个变量来计数,以改变blur值。当然,这里的参数根据需要来调整来满足不同的需求。

[NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(changeImageView1) userInfo:nil repeats:YES];

-(void)changeImageView1
{
    self.imageView1.image = [self boxblurImage:[UIImage imageNamed:@"login_bg_1"] withBlurNumber:self.count1/50.0];
    if (self.count1++ == 15) {
        [self.timer1 invalidate];
        self.timer1 = nil;
        self.count1 = 0;
        self.imageView2.image = [UIImage imageNamed:@"login_bg_2"];
        [UIView animateWithDuration:2 animations:^{
            self.imageView1.alpha = 0;
            self.imageView2.alpha = 1;
        } completion:^(BOOL finished) {
            [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(imageView2AnimationStart) userInfo:nil repeats:NO];
        }];
    }
}

动画过渡

在第一张图片模糊到一定程度时,对其做渐变处理,改变其alpha值(从1到0),同时让第二张图显现出来(从1到0)。至此,整个动画就基本完成了。

另外

需要对其他方面做些优化,比如NSTimer的开启与暂停,以及切换到其他页面后需要关闭定时器等。

相关文章

  • 一种高斯模糊渐变动画的实现

    关于高斯模糊的方式有很多种,但是如果需要模糊渐变,那么对这种高斯模糊算法的性能要求是比较高的,今天这里重点不讨论算...

  • Android图片高斯模糊动画

    前言 这里只讲高斯模糊动画的处理,不讨论高斯模糊的处理方式。想看高斯模糊处理的可以参考这个Android 图片高斯...

  • BackdropFilter

    实现高斯模糊的组件

  • 一种高斯模糊实现

    之前遇到一个高斯模糊的需求,然后最后使用的其中一种,记录如下首先要说明,我们要使用Support Library,...

  • 高斯模糊

    高斯模糊 【iOS 开发】实现毛玻璃(高斯模糊)效果 - CocoaChina_让移动开发更简单

  • UIImage扩展

    UIImage+GIF 1.封装了gif动画实现 2.imgView执行动画+图片集+重复次数 3.高斯模糊 4....

  • Cocos Creator Shader Effect 系列 -

    本章为大家带来高斯模糊的实现 首先,来点简单的,比如:高斯模糊的英文名叫 Gaussian Blur。 关于高斯模...

  • 快速模糊算法

    图片模糊算法有均值模糊和高斯模糊,均值模糊快速但效果不如高斯,高斯模糊效果好但效率慢。 一种快速模糊算法:算法取自...

  • filter(滤镜)

    filter 默认值none没有继承性支持动画效果 1.blur(px) (高斯模糊) 给图像设置高斯模糊。"ra...

  • 音视频开发之旅(39)- 高斯模糊实现与优化

    目录 高斯模糊的原理 GPUImage模糊的实现分析 高斯模糊优化 资料 收获 我们在平时的开发中模糊是非常常用的...

网友评论

  • 卟师:挺好的.我能转载分享吗?我会标注上出处和作者的
    卟师:@zmp1123 我已经分享了,在微信公众号:iOS面向编码
    zmp1123:@卟师 嗯,可以的,方便告诉我转载到什么地方么 :grin:
  • 20ed70e8f016:能提供demo吗
    zmp1123:@imyuyang 代码我可能要花段来整理,你可以按照这个思路先走一遍 :blush:

本文标题:一种高斯模糊渐变动画的实现

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