动态将彩色图片动画过渡到黑白图片的BlackAndWhiteView

简介:

动态将彩色图片动画过渡到黑白图片的BlackAndWhiteView

效果如下:

 BlackAndWhiteView.h 与 BlackAndWhiteView.m

//
//  BlackAndWhiteView.h
//  BlackAndWhiteView
//
//  Created by YouXianMing on 14-10-4.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface BlackAndWhiteView : UIView

@property (nonatomic)         float    blackAlpha;
@property (nonatomic, strong) UIImage *image;

- (void)startImageProcessing;

@end


//
//  BlackAndWhiteView.m
//  BlackAndWhiteView
//
//  Created by YouXianMing on 14-10-4.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "BlackAndWhiteView.h"

@interface BlackAndWhiteView ()

@property (nonatomic, strong) UIImageView *normalView;
@property (nonatomic, strong) UIImageView *blackView;

@property (nonatomic, strong) UIImage     *blackImage;

@end

@implementation BlackAndWhiteView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        _normalView = [[UIImageView alloc] initWithFrame:self.bounds];
        _blackView  = [[UIImageView alloc] initWithFrame:self.bounds];
        _blackView.alpha = 0.f;
        
        [self addSubview:_normalView];
        [self addSubview:_blackView];
    }
    return self;
}

- (void)startImageProcessing
{
    if (_image) {
        _normalView.image = _image;
        
        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
            
            if (_blackImage == nil) {
                _blackImage = [self grayScale:_image];
            }
            
            dispatch_async(dispatch_get_main_queue(), ^{
                _blackView.image = _blackImage;
            });
        });
    }
}

#pragma mark - 私有方法
- (UIImage *)grayScale:(UIImage *)inputImage
{
    int width = inputImage.size.width;
    int height = inputImage.size.height;
    
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();
    
    CGContextRef context = CGBitmapContextCreate(nil,
                                                 width,
                                                 height,
                                                 8, // bits per component
                                                 0,
                                                 colorSpace,
                                                 kCGBitmapByteOrderDefault);
    
    CGColorSpaceRelease(colorSpace);
    
    if (context == NULL) {
        return nil;
    }
    
    CGContextDrawImage(context,
                       CGRectMake(0, 0, width, height), inputImage.CGImage);
    CGImageRef image = CGBitmapContextCreateImage(context);
    UIImage *grayImage = [UIImage imageWithCGImage:image];
    CFRelease(image);
    CGContextRelease(context);
    
    return grayImage;
}

#pragma mark - 重写setter方法
@synthesize blackAlpha = _blackAlpha;
- (void)setBlackAlpha:(float)blackAlpha
{
    _blackAlpha      = blackAlpha;
    _blackView.alpha = blackAlpha;
}

- (float)blackAlpha
{
    return _blackAlpha;
}

@end

使用的源码:
//
//  ViewController.m
//  BlackAndWhiteView
//
//  Created by YouXianMing on 14-10-4.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "ViewController.h"
#import "BlackAndWhiteView.h"

@interface ViewController ()

@property (nonatomic, strong) BlackAndWhiteView *blackView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
 
    UIImage *image   = [UIImage imageNamed:@"red.jpg"];
    _blackView = [[BlackAndWhiteView alloc] initWithFrame:CGRectMake(0, 0,
                                                                     image.size.width,
                                                                     image.size.height)];
    _blackView.image  = image;
    _blackView.center = self.view.center;
    [_blackView startImageProcessing];
    [self.view addSubview:_blackView];
    
    [self performSelector:@selector(run) withObject:nil afterDelay:8];
}

- (void)run
{
    [UIView animateWithDuration:2 animations:^{
        _blackView.blackAlpha = 1.f;
    }];
}

@end

目录
相关文章
|
4月前
Framer 使用滚动变体创建动画
Framer 使用滚动变体创建动画
39 0
|
7月前
|
XML 前端开发 JavaScript
CSS中动画、过渡、定位、浮动的作用
CSS中动画、过渡、定位、浮动的作用
|
移动开发 前端开发 JavaScript
【前端动画】实现动画的6种方式
【前端动画】实现动画的6种方式
1212 0
An动画基础之按钮动画与基础代码相结合
An动画基础之按钮动画与基础代码相结合
758 0
An动画基础之按钮动画与基础代码相结合
|
XML 图形学 数据格式
Animation组合动画踩坑-实现循环播放动画,可控制次数
Animation组合动画踩坑-实现循环播放动画,可控制次数
|
JavaScript 开发者
动画-使用过渡名实现动画|学习笔记
快速学习动画-使用过渡名实现动画
动画-使用过渡名实现动画|学习笔记
|
存储 JavaScript 算法
系统带你学习 WebAPIs —— 动画篇(第六讲)
系统带你学习 WebAPIs —— 动画篇(第六讲)
系统带你学习 WebAPIs —— 动画篇(第六讲)
|
前端开发
CSS(七)元素过渡、变化、动画
CSS(七)元素过渡、变化、动画
173 0
CSS(七)元素过渡、变化、动画
|
Dart 开发者
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )(三)
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )(三)
183 0
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )(三)