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

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

高斯模糊渐变动画

//高斯模糊
-(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的开启与暂停,以及切换到其他页面后需要关闭定时器等。

时间: 2024-10-06 06:30:41

一种高斯模糊渐变动画的实现-b的相关文章

动画特效八:渐变动画

本节将为大家介绍的动画效果是渐变动画效果.其实这个例子,大家天天能够看到,就是手机屏幕锁定是,有一句"滑动来解锁"的文字,它上面有一种渐变的动画一直在其上面走过.先看看最终的效果图. 思路分析: 1.  普通UIView不可能有这样的渐变效果,所以我们应该自定义一个UIView来实现这样的效果. 2.  普通UIView没有这样的渐变动画,所以我们可以考虑使用图层动画,并且将渐变图层添加到自定义的UIView的layer上面. 3. 渐变效果只是颜色值的过度,并没有设计到文字.所以,我

动画效果(一)-渐变动画

第1节 概述 在安卓系统中,为了界面或者其中的组件在切换.改变的时候显得自然生动.具有流动性的美感,就给它们添加了动画的效果. 例如图片切换的时候,前一张图片淡出,后一张图片淡入. 动画分了三类: frame动画(逐帧动画). property动画(属性动画). tween动画(渐变动画). 逐帧动画有点像播放电影,它把很多图片串起来,按照顺序一张一张显示,通过播放形成动画效果: 属性动画是对控件某个属性使用的动画,例如一个按钮的宽度要从窄设置到宽,而我们希望它的宽度调整的时候,能看到它从窄到宽

css3实现文字渐变动画效果

利用css3这个属性(背景剪裁): background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webkit-background-clip:text; 栗子: 1. <style> .masked{ text-align: center; background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #

巧妙地制作背景色渐变动画

有的时候,嗯,应该说某些特定场合,我们可能需要下面这样的动画效果,渐变 + animation : 假设我们渐变的写法如下: div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%); } 按照常规想法,配合 animation ,我们首先会想到在 animation 的步骤中通过改变颜色实现颜色渐变动画,那么我们的 CSS 代码可能是: div { background: linear-gradient(90deg,

文顶顶 iOS开发UI篇—iOS开发中三种简单的动画设置

iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView beginAnimations:nil context:nil]; //设置动画时长 [UIView setAnimationDuration:2.0]; self.headImageView.bounds = rect; // commitAnimations,将beginAnimation之后的所

iOS开发UI篇—iOS开发中三种简单的动画设置

iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView beginAnimations:nil context:nil]; //设置动画时长 [UIView setAnimationDuration:2.0]; self.headImageView.bounds = rect; // commitAnimations,将beginAnimation之后的所

iOS开发中三种简单的动画设置

iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView beginAnimations:nil context:nil]; //设置动画时长 [UIView setAnimationDuration:2.0]; self.headImageView.bounds = rect; // commitAnimations,将beginAnimation之后的所有动画提交并生成动

UI基础--动画(缩放动画, 渐变动画, 左右振动, 移动动画, 组合动画)(封装好)

创建一个CAAnimation的类别 CAAnimation+HCAnimation .h #import <QuartzCore/QuartzCore.h> #import <UIKit/UIKit.h> typedef NS_ENUM(NSInteger, Axis) { AxisX = 0, ///< x轴 AxisY, ///< y轴 AxisZ ///< z轴 }; typedef NS_ENUM(NSInteger, ShakeDerection) {

JS实现透明度渐变动画

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS实现透明度渐变动画</title> <style type="text/css"> *{margin:0;padding:0;} #box{width:200px;height:200px;background-color