动态将彩色图片动画过渡到黑白图片的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
时间: 2024-11-18 21:09:48

动态将彩色图片动画过渡到黑白图片的BlackAndWhiteView的相关文章

15款css3鼠标悬停图片动画过渡特效

分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-container"> <div class="container bs-docs-container"> <div class="row"> <div class="col-md-3

CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)

转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. 效果如下图所示: 1.当未鼠标未放到图片上的效果: 2.当鼠标放到图片上后(放大的过程是有动画过渡的,这个过渡的时间可

CSS使彩色图片就为黑白图片

<html> <head> <title>CSS使彩色图片就为黑白图片丨河北草坪-石家庄花卉租赁</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <style type="TEXT/CSS">.cool { BORDER-BOTTOM-WIDTH: 1px; BORDER

Core Animation一些Demo总结 (动态切换图片、大转盘、图片折叠、进度条等动画效果)

前一篇总结了Core Animation的一些基础知识,这一篇主要是Core Animation 的一些应用,涉及到CAShapeLayer.CAReplicatorLayer等图层的知识. 先看效果图: 1.切换图片:      2.彩票转盘 3.图片折叠 4.进度条旋转 5.粒子效果 一.切换图片 看起来很复杂的动画,通过少量的计算和编码就可以简单的实现.要做到这一步,必须是需要研究iOS开发中的Core Animation和Core Graphics框架的.日常工作中,对于很多东西不求甚解

使用 CSS3 动画实现的 3D 图片过渡特效

这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 效果演示      插件下载 您可能感兴趣的相关文章 网站开发中很有用的 j

android 将图片转换成黑白图片

先调用android的系统工具,获取图片生成bitmap文件,再使用android中的二值化技术,将图片转化成黑白图片,主界面代码: package com.example.blackwhite; import java.io.IOException; import android.media.ThumbnailUtils; import android.net.Uri; import android.os.Bundle; import android.provider.MediaStore;

动画--过渡属性 transition-property

动画--过渡属性 transition-property 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻.简单点说,就是通过鼠标的单击.获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值. 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 第一,在默认样式中声明元素的初始状态样式: 第二,声明过渡元素最终状

10款让人惊叹的HTML5/jQuery图片动画特效

1.HTML5相册照片浏览器 可连接Flickr照片服务 以前我们经常会分享一些jQuery相册浏览插件,效果不错,实用性也很强.不过如果能利用HTML5来实现相册浏览器,那么相册浏览效果肯定会更加炫酷.今天分享的这款HTML5相册浏览器可以连接到Flickr获取照片,也可以连接到youtube获取视频,照片在初始化的时候有波浪般的效果. 在线演示 源码下载 2.CSS3图片模糊效果 今天我们来分享一款利用CSS3技术让图片模糊的效果,我们只需要将鼠标滑过图片,就可以让图片产生模糊的特效,利用C

Bootstarp学习(二十二)动画过渡(Transitions)

这一小节我们先来讲"动画过渡(Transitions)"这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡效果,如果要使用,有两种方法: ? 调用统一编译的bootstrap.js: ? 调用单一的过渡动画的JavaScript插件文件transition.js(右侧第29行引入Bootstrap上对外公布的transition.js的地址). transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过