iOS开发之仿照LinkedIn登录界面效果

作为App开发者，如何让你的App能够更加的去吸引用户呢！首先你要保障你的App功能能方便大家的生活，类似于打车软件，社交软件能丰富大家的生活，另外一个方面就是要提高你App的用户体验程序，当然界面美观是最重要的咯！今天我们就来实现一个登录界面的效果，这个效果也是我下了一款国外的社交软件LinkedIn后发现的，当然外面做的好的App登录界面多的去了，为什么单要模仿它！只是最近楼主工作的需要简单的模仿了一下，现在就在此跟大家分享一下。

首先来两张LinkedIn的登录效果图，由于楼主没对设备越狱，所以装不了免费的屏幕录像软件，所以就以图片代替吧！

他的效果是打开App,首先显示一张背景图，然后背景图过2秒开始模糊，最后从右边飞入登录的视图，很简洁是但是又很美妙吧！

实现这个效果其实很简单，三个定时器，再加上一个图像模糊的算法就搞定啦！

接下来把源码附上：

 

#import <UIKit/UIKit.h>

@interface LoginViewController : UIViewController

@property (retain, nonatomic) IBOutlet UIImageView *bkImage;

@property (retain, nonatomic) NSTimer *timer;

@property (retain, nonatomic) NSTimer *timerload;

@property (retain, nonatomic) NSTimer *timerLogin;

@property (assign) float blurLevel;
@property (assign) int count;

@property (retain, nonatomic) IBOutlet UIView *loginPane;

@property (assign) BOOL canAutorotate;
@end

 

#import "LoginViewController.h"
#import "ImageBlurView.h"

@interface LoginViewController ()

@end

@implementation LoginViewController
@synthesize timer = _timer;
@synthesize blurLevel = _blurLevel;
@synthesize count = _count;
@synthesize timerload = _timerload;
@synthesize timerLogin = _timerLogin;
@synthesize canAutorotate = _canAutorotate;

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //初始化迷糊级别
    self.blurLevel = 0.1;
    //可翻转标示
    self.canAutorotate = NO;
    //两秒后出发定时器
    self.timerload = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(loadBlurFunc) userInfo:nil repeats:NO];
}

//背景图模糊定时器触发
- (void)loadBlurFunc{
    self.timer = [NSTimer scheduledTimerWithTimeInterval:0.0001 target:self selector:@selector(timerTrigger) userInfo:nil repeats:YES];
}

- (void)timerTrigger{
    
    if(_count == 10){
        [_timer invalidate];
        //进入登陆界面 每次模糊等级为0.0001 肉眼看上你就很自然
        self.timerLogin = [NSTimer scheduledTimerWithTimeInterval:0.00001 target:self selector:@selector(showTheLoginPane) userInfo:nil repeats:YES];
        return;
    }
    
    UIImage *img = [ImageBlurView blurryImage:_bkImage.image withBlurLevel:_blurLevel];
    [_bkImage setImage:img];
    _blurLevel = _blurLevel + 0.005;
    _count++;
}

//进入登陆界面，每次向左减一像素
- (void)showTheLoginPane{
    UIInterfaceOrientation orientation = [[UIApplication sharedApplication] statusBarOrientation];
    if(orientation == UIDeviceOrientationPortrait || orientation == UIDeviceOrientationPortraitUpsideDown){
        //竖屏
        if(([UIScreen mainScreen].bounds.size.width - _loginPane.frame.size.width)/2 == _loginPane.frame.origin.x){
            [_timerLogin invalidate];
            _canAutorotate = YES;
            return;
        }
        
        [_loginPane setFrame:CGRectMake(_loginPane.frame.origin.x - 1, _loginPane.frame.origin.y, _loginPane.frame.size.width, _loginPane.frame.size.height)];
        
        
    }else if(orientation ==UIDeviceOrientationLandscapeLeft || orientation == UIDeviceOrientationLandscapeRight){
        //横屏
        if(([UIScreen mainScreen].bounds.size.height - _loginPane.frame.size.width)/2 == _loginPane.frame.origin.x){
            [_timerLogin invalidate];
            _canAutorotate = YES;
            return;
        }
        
        [_loginPane setFrame:CGRectMake(_loginPane.frame.origin.x - 1, ([UIScreen mainScreen].bounds.size.width - _loginPane.frame.size.height)/2, _loginPane.frame.size.width, _loginPane.frame.size.height)];
    }
}


- (NSUInteger)supportedInterfaceOrientations{
    return UIInterfaceOrientationMaskAll;
}

- (BOOL)shouldAutorotate{
    UIInterfaceOrientation orientation = [[UIApplication sharedApplication] statusBarOrientation];
    
    if(orientation == UIDeviceOrientationPortrait || orientation == UIDeviceOrientationPortraitUpsideDown){
        NSLog(@"竖屏");
        if(_canAutorotate){
            [_loginPane setFrame:CGRectMake(([UIScreen mainScreen].bounds.size.width - _loginPane.frame.size.width)/2, ([UIScreen mainScreen].bounds.size.height - _loginPane.frame.size.height)/2, _loginPane.frame.size.width, _loginPane.frame.size.height)];
        }
    }else if(orientation ==UIDeviceOrientationLandscapeLeft || orientation == UIDeviceOrientationLandscapeRight){
        NSLog(@"横屏");
        if(_canAutorotate){
            [_loginPane setFrame:CGRectMake(([UIScreen mainScreen].bounds.size.height - _loginPane.frame.size.width)/2, ([UIScreen mainScreen].bounds.size.width - _loginPane.frame.size.height)/2, _loginPane.frame.size.width, _loginPane.frame.size.height)];
        }
    }
    
    return YES;
}


- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation{
    
    return YES;
}


- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


- (void)dealloc {
    [_bkImage release];
    [_timer release];
    [_timerload release];
    [_timerLogin release];
    [_loginPane release];
    [super dealloc];
}
@end

因为比较简单，我就不做多的解释了，看看注释就懂了。下面是模糊函数的源码，需要加入系统库“Accelerate.framewok”.

 

 

+ (UIImage *)blurryImage:(UIImage *)image withBlurLevel:(CGFloat)blur {
    if ((blur < 0.0f) || (blur > 1.0f)) {
        blur = 0.5f;
    }
    
    int boxSize = (int)(blur * 100);
    boxSize -= (boxSize % 2) + 1;
    
    CGImageRef img = image.CGImage;
    
    vImage_Buffer inBuffer, outBuffer;
    vImage_Error error;
    void *pixelBuffer;
    
    CGDataProviderRef inProvider = CGImageGetDataProvider(img);
    CFDataRef inBitmapData = CGDataProviderCopyData(inProvider);
    
    inBuffer.width = CGImageGetWidth(img);
    inBuffer.height = CGImageGetHeight(img);
    inBuffer.rowBytes = CGImageGetBytesPerRow(img);
    inBuffer.data = (void*)CFDataGetBytePtr(inBitmapData);
    
    pixelBuffer = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img));
    
    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,
                                             CGImageGetBitmapInfo(image.CGImage));
    
    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;
}

附上几张模仿后App跑起来的图：

 

 

横屏的就不上传效果了，看上面linkedIn的效果就可以。

工程文件我会长传到下载，或者加我QQ：2058294890，好了，本篇博客就到此，希望大家批评指正 ：）。