渐变显示渐变消失的BackgroundView

效果如下:

源码:

BackgroundView.h 与 BackgroundView.m

//
//  BackgroundView.h
//  TestHUD
//
//  Created by YouXianMing on 14-9-30.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface BackgroundView : UIView

@property (nonatomic, assign) NSTimeInterval  startDuration; // 动画开始时持续时间
@property (nonatomic, assign) NSTimeInterval  endDuration;   // 动画结束时持续时间

- (instancetype)initInView:(UIView *)view;

// 开始附加到view中
- (void)addToView;

// 将自己从view中移除掉
- (void)removeSelf;

@end
//
//  BackgroundView.m
//  TestHUD
//
//  Created by YouXianMing on 14-9-30.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "BackgroundView.h"

#ifdef DEBUG
#define BackgroundView_DLog(fmt, ...) NSLog((@"BackgroundView.m:%s:%d" fmt), __PRETTY_FUNCTION__, __LINE__, ##__VA_ARGS__);
#else
#define BackgroundView_DLog(...)
#endif

@interface BackgroundView ()

@property (nonatomic, weak) UIView   *inView;

@end

@implementation BackgroundView

- (instancetype)initInView:(UIView *)view
{
    self = [super initWithFrame:view.bounds];
    if (self) {
        _inView              = view;
        self.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5f];
        self.alpha           = 0;
    }
    return self;
}

- (void)addToView
{
    // 添加到view中
    [_inView addSubview:self];

    // 开始执行动画
    NSTimeInterval duration = 0.2;
    if (_startDuration > 0) {
        duration = _startDuration;
    }
    [UIView animateWithDuration:duration animations:^{
        self.alpha = 1.f;
    }];
}

- (void)removeSelf
{
    // 开始执行动画
    NSTimeInterval duration = 0.2;
    if (_endDuration > 0) {
        duration = _endDuration;
    }
    [UIView animateWithDuration:duration animations:^{
        self.alpha = 0.f;
    } completion:^(BOOL finished) {
        [self removeFromSuperview];
    }];
}

- (void)dealloc
{
    BackgroundView_DLog(@" 安全释放");
}

@end

category文件:

//
//  UIView+BackgroundView.h
//  BackgroundView
//
//  Created by YouXianMing on 14-10-3.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "BackgroundView.h"

typedef void (^ConfigBackgroundViewBlock)(BackgroundView *configView);

@interface UIView (BackgroundView)

- (void)showBackgroundViewAndConfig:(ConfigBackgroundViewBlock)block;
- (void)removeBackgroundView;

@end
//
//  UIView+BackgroundView.m
//  BackgroundView
//
//  Created by YouXianMing on 14-10-3.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "UIView+BackgroundView.h"

#define TAG_DATA  0x3d2894

@implementation UIView (BackgroundView)

- (void)showBackgroundViewAndConfig:(ConfigBackgroundViewBlock)block
{
    if (self == nil) {
        return;
    }

    BackgroundView *backView = [[BackgroundView alloc] initInView:self];
    backView.tag = TAG_DATA;
    block(backView);

    [backView addToView];
}

- (void)removeBackgroundView
{
    BackgroundView *backView = (BackgroundView *)[self viewWithTag:TAG_DATA];
    if (backView) {
        [backView removeSelf];
    }
}

@end

使用的源码:

//
//  ViewController.m
//  BackgroundView
//
//  Created by YouXianMing on 14-10-3.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "ViewController.h"
#import "UIView+BackgroundView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 添加手势
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self
                                                                          action:@selector(tapEvent:)];
    [self.view addGestureRecognizer:tap];

    UILabel *label      = [[UILabel alloc] initWithFrame:self.view.bounds];
    label.text          = @"YouXianMing";
    label.textAlignment = NSTextAlignmentCenter;
    label.font          = [UIFont fontWithName:@"HelveticaNeue-Thin" size:40.f];
    label.textColor     = [UIColor redColor];
    [self.view addSubview:label];
}

- (void)tapEvent:(UITapGestureRecognizer *)tap
{
    // 显示
    [self.view showBackgroundViewAndConfig:^(BackgroundView *configView) {
        configView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.6];
        configView.startDuration = 0.4f;
        configView.endDuration   = 0.4f;
    }];

    // 延迟3s执行
    [self performSelector:@selector(affterDelay)
               withObject:nil
               afterDelay:3.f];
}

- (void)affterDelay
{
    // 隐藏
    [self.view removeBackgroundView];
}

@end

以下是需要注意的地方:

时间: 2024-07-30 01:09:33

渐变显示渐变消失的BackgroundView的相关文章

CSS3渐变——径向渐变

上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解渐变中的径向渐变新语法以及其基本使用. CSS3径向渐变 CSS3径向渐变是圆形或椭圆形渐变.颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合.但相对线性渐变要比径向渐变复杂的多. 一.径向渐变的语法 CSS3的径向渐变已得到众多浏览器引擎的支持,只不过其语法的版本根据不同的引擎浏览器,其语法也不一样

jQuery事件 mouseover方法与mouseout方法实现鼠标移进显示移出消失的效果 (css控制span标签)

<script> $(function(){ var text ; $(".pos span").each(function(){ text = $(this).text().trim(); if(text=="设为默认"){ $(this).css('display','none'); } }); $(".pos").mouseover(function(){ //鼠标移进显示效果 text = $(this).find('span

实现点击menu键popupWindow显示和消失

转载请注明出处,谢谢 http://blog.csdn.net/harryweasley/article/details/45217273 最近想实现一个这样的功能:点击menu键,popupWindow显示出来,再点击menu键,popupWindow消失,同时也可以点击正常的按钮使popupWindow出来和消失. 我说的是不是有点乱,那就看下具体的效果图,就像微信的这个效果一样的,如图所示: 这个popupWindow既可以通过点击"+"号出来,也可以点击menu键出来,当然也可

图片的逐渐显示与消失

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=

CSS设置DIV背景色渐变显示

<style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8); /*IE 6 7 8*/ background: -ms-linear-gradient(top, #fff,  #0000ff);    

CSS设置DIV背景色渐变显示--针对不同浏览器,背景渐变的兼容问问题

针对不同浏览器,背景渐变的兼容问问题! background: -ms-linear-gradient(top, #fff,  #0000ff);        /* IE 10 */ background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/ background:

再说CSS3渐变——线性渐变

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异. 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能. 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐

渐变-线性渐变和径向渐变

线性渐变 语法:background: linear-gradient(direction, color-stop1, color-stop2, ...); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>渐变</title> <style> /*从上到下*/ #grad1 { height: 200px; background:

css3的背景颜色渐变@线性渐变

背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); opera浏览器    background: -o-linear-gradient(position/deg,startColor,endColor); safari和chrome浏览器    background: -webkit-linear-gradient(position/deg,startCo