呼吸按钮 及 警告忽略(粗暴)

1,315

呼吸效果:传说中的“呼吸__灯__效果 ”,美观又起到了提示效果

呼吸灯效果

gif图 只有单一的“呼”(或者“吸”)效果,没有对应的“吸”(或许“呼”)效果!见谅~~ 亮度到达最高值,瞬间变为最低值(个人觉得会有些突兀~ ),又慢慢到达最高值。

亮度折线图

呼吸灯:

呼吸灯

这个倒是有“呼”有“吸”,但是棒子。。却不是很好看。。。

核心代码:一个方法的执行进入无限循环( 呼吸(明暗变化)效果 )!!

-(void)startWithLight { // 明效果 开始
    [UIView animateWithDuration:1.8f animations:^{
        _breatheV.alpha = 0.35f;
        //设置UIView设置alpha 或者 设置其layer层的opacity时,其Subview的透明度也会跟着变。
        //_breatheV.backgroundColor = [_breatheV.backgroundColor colorWithAlphaComponent:0.35f];   // 不影响子视图的设置
        
    } completion:^(BOOL finished) {
        //结束后 开启“-(void)startWithDark { }”方法
        [self startWithDark]; 
    }]; 
}

-(void)startWithDark { // 暗效果 开始
    [UIView animateWithDuration:1.8f animations:^{
        _breatheV.alpha = 0.1f;
        //_breatheV.backgroundColor = [_breatheV.backgroundColor colorWithAlphaComponent:0.1f];
        //不影响子视图的设置
    } completion:^(BOOL finished) {
        //结束后 开启“-(void)startWithLight { }”方法
        [self startWithLight];
    }];
}

设置UIView设置alpha 或者 设置其layer层的opacity时,其Subview的透明度也会跟着变

// 宏定义:屏宽
#define kScreenWidth \
([[UIScreen mainScreen] respondsToSelector:@selector(nativeBounds)] ? [UIScreen mainScreen].nativeBounds.size.width/[UIScreen mainScreen].nativeScale : [UIScreen mainScreen].bounds.size.width)

@interface ViewController () {
    UIView * _breatheV; // 定义 全局视图变量
}
@end

在“- (void)viewDidLoad { }”方法里面:

_breatheV = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth/2.f, 50)];
_breatheV.center = CGPointMake(kScreenWidth/2.f, 20 + 50/2.f);
_breatheV.backgroundColor = [UIColor purpleColor];
_breatheV.alpha = 0.35f;  // 开始的状态 半透明效果
[self.view addSubview:_breatheV];

// 开启 呼吸效果(无限动画)
[self startWithDark];

程序断点展示: 1.8秒后开启另一效果 单纯看效果:

呼吸效果

到这里其实基础好的伙伴 已经不用看后面的内容!

定制一个呼吸效果的按钮

1.选择“New File”,新建一个文件

鼠标右键 选择“New File”

2.选择选择“Cocoa Touch Clas”

选择“Cocoa Touch Clas”

3.选择继承自UIView

选择继承自UIView 自定制控件

之后, “GoyoholButton.h”里面:

#import <UIKit/UIKit.h>

@interface GoyoholButton : UIView
-(instancetype)initWithFrame:(CGRect)frame WithColor:(UIColor *)color WithImageName:(NSString *)imgNameStr;

@end

“GoyoholButton.m”里面:

#import "GoyoholButton.h"
@interface GoyoholButton ()
@property (nonatomic , retain ) UIView * backgroundView;//背景视图
@property (nonatomic , retain ) UIImageView * imageView;//图片视图

@end


@implementation GoyoholButton
//初始化
-(instancetype)initWithFrame:(CGRect)frame WithColor:(UIColor *)color WithImageName:(NSString *)imgNameStr {
    if (self = [super initWithFrame:frame]) {
    self.backgroundColor = [UIColor whiteColor];
    
    //初始化背景视图
    _backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.frame), CGRectGetHeight(self.frame))];

    _backgroundView.backgroundColor = color;
    _backgroundView.userInteractionEnabled = NO; // 可有可无
    
    [self addSubview:_backgroundView];
    
   
    //初始化图片背景视图
    _imageView = [[UIImageView alloc] initWithImage:[[UIImage imageNamed:imgNameStr] imageWithRenderingMode:UIImageRenderingModeAutomatic]];//取图片 渲染
    //_imageView.tintColor = [UIColor whiteColor];//图片渲染颜色

    _imageView.frame = CGRectMake(0, 0, CGRectGetWidth(self.frame), CGRectGetHeight(self.frame) );
    
    [_backgroundView addSubview:_imageView]; // 添加到背景视图上
 
    // 按钮  的 添加
    UIButton * actionBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.frame), CGRectGetHeight(self.frame))];
    actionBtn.backgroundColor = [UIColor clearColor];
    [actionBtn addTarget:self action:@selector(actionResponse) forControlEvents:UIControlEventTouchUpInside];
    [self addSubview:actionBtn];
    
    //开启呼吸动画
    [self HighlightAnimation]; 
    }

        return self;
}

控件的视图层次关系:

视图层次关系

整体呼吸效果:

#pragma mark ---BreathingAnimation 呼吸动画
- (void)HighlightAnimation{
    __block typeof(self) weakSelf = self;    
    [UIView animateWithDuration:1.5f animations:^{
        weakSelf.backgroundView.alpha = 0.3f; 
    } completion:^(BOOL finished) {
        [weakSelf DarkAnimation];
    }];
}

- (void)DarkAnimation{
    __block typeof(self) weakSelf = self;
    [UIView animateWithDuration:1.5f animations:^{
          weakSelf.backgroundView.alpha = 0.8f;
    } completion:^(BOOL finished) {
          [weakSelf HighlightAnimation];
    }];
}

ViewController #import "GoyoholButton.h" //导入按钮类 的“- (void)viewDidLoad { }”里面:

GoyoholButton * goyoholBtn = [[GoyoholButton alloc] initWithFrame:CGRectMake(10, 100, 100, 150) WithColor:[UIColor blueColor] WithImageName:@"cookie.jpg"];
[self.view addSubview:goyoholBtn];

效果:整个视图self.backgroundView的“alpha通道”值 改变

呼吸按钮 效果

按钮点击事件响应 效果:

按钮点击事件 效果

其他的对比(看看就好了)

  • 1.仅仅图片 呼吸效果 (self.backgroundView的背景色 为 “蓝色”)

      #pragma mark ---BreathingAnimation 呼吸动画
      - (void)HighlightAnimation{
         __block typeof(self) weakSelf = self;    
         [UIView animateWithDuration:1.5f animations:^{
               weakSelf.imageView.alpha = 0.3f;
         } completion:^(BOOL finished) {
               [weakSelf DarkAnimation];
         }];
      }
    
      - (void)DarkAnimation{
         __block typeof(self) weakSelf = self;
         [UIView animateWithDuration:1.5f animations:^{
              weakSelf.imageView.alpha = 0.8f;
         } completion:^(BOOL finished) {
              [weakSelf HighlightAnimation];
         }];
      }
    

效果:只有图片视图(self.imageView)的“alpha通道”值 改变

仅仅图片呼吸按钮 效果

  • 2.backgroundView进行不影响子视图的变换(self.backgroundView的背景色 为 “蓝色”) 呼吸效果

      #pragma mark ---BreathingAnimation 呼吸动画
      - (void)HighlightAnimation{
          __block typeof(self) weakSelf = self;    
          [UIView animateWithDuration:1.5f animations:^{
               // backgroundView⭐️不影响子视图的变换
               weakSelf.backgroundView.backgroundColor = [weakSelf.backgroundView.backgroundColor colorWithAlphaComponent:0.2f];
    
               weakSelf.imageView.alpha = 0.3f;
          } completion:^(BOOL finished) {
               [weakSelf DarkAnimation];
          }];
      }
    
      - (void)DarkAnimation{
            __block typeof(self) weakSelf = self;
           [UIView animateWithDuration:1.5f animations:^{
                // backgroundView不影响子视图的变换
                weakSelf.backgroundView.backgroundColor = [weakSelf.backgroundView.backgroundColor colorWithAlphaComponent:0.8f];
    
                weakSelf.imageView.alpha = 0.8f;
           } completion:^(BOOL finished) {
                [weakSelf HighlightAnimation];
           }];
      }
    

效果:同时执行了“alpha通道”值 改变(由于backgroundView不影响子视图imageView的变换,故 两个呼吸效果 一起展示)。

背景视图、图片呼吸按钮 效果

查看一下不影响子视图的效果
    // 将 图片缩小一半 
    _imageView.frame = CGRectMake(0, 0, CGRectGetWidth(self.frame), CGRectGetHeight(self.frame)/2.f );


    #pragma mark ---BreathingAnimation 呼吸动画
    - (void)HighlightAnimation{

        __block typeof(self) weakSelf = self;
        [UIView animateWithDuration:1.5f animations:^{
    weakSelf.backgroundView.backgroundColor = [weakSelf.backgroundView.backgroundColor colorWithAlphaComponent:0.2f];

        } completion:^(BOOL finished) {
            [weakSelf DarkAnimation];
    
        }];
    }


    - (void)DarkAnimation{

        __block typeof(self) weakSelf = self;
        [UIView animateWithDuration:1.5f animations:^{
            weakSelf.backgroundView.backgroundColor = [weakSelf.backgroundView.backgroundColor colorWithAlphaComponent:0.8f];

        } completion:^(BOOL finished) {
            [weakSelf HighlightAnimation];
    
        }];
    }

效果:自身的透明度改变,却不影响 子视图的透明度!

不影响 子视图(图片)的呼吸按钮

若需要在Viewcontroller里面实现 点击响应:

“GoyoholButton.m”里面

//创建两个属性
@property (nonatomic,strong) id target; //存响应消息的对象
@property (nonatomic,assign) SEL action;//存响应消息

在“-(void)actionResponse { }”里面:

//让对象响应消息,传递按钮点击事件
if ([self.target respondsToSelector:self.action]) {
    [self.target performSelector:self.action withObject:self];
} else {
    NSLog(@"没有实现方法");
}

再存储其方法:

#pragma mark - 添加事件响应
-(void)addTarget:(id)target action:(SEL)action
{   //传过来的消息⭐️存起来,再 在合适的时候 执行 [self.target self.action]
    self.target = target;
    self.action = action;
}

并且再声明(按钮点击响应)方法 接口:

-(void)addTarget:(id)target action:(SEL)action;

便可以在Viewcontroller的“- (void)viewDidLoad { }”里面使用了:

[goyoholBtn addTarget:self action:@selector(actionClick)];

-(void)actionClick {
    NSLog(@"dafdadfadfadfa");
}

效果:

呼吸按钮 点击响应  效果

到此呼吸效果按钮就说完了!只是讲了大概的定制方式!突然发现自己以前好啰嗦(最近看了以前带我入门的大神 写的文章,感觉好惭愧~~😂),现在想简洁明了一点~

要制作成什么样 就看你自己的创意了! 呼吸按钮

Tips:(加个餐)如果觉得警告(⚠️)看上去 很不爽, 如下消除:

产生了“performSelector may cause a leak because its selector is unknown”警告

“performSelector may cause a leak because its selector is unknown”警告 用简单、粗暴的方式 解决“警告显示问题”

简单粗暴的方式 不显示⚠️

代码如下:

#pragma clang diagnostic push
#pragma clang diagnostic ignored"-Warc-performSelector-leaks" //根据警告(类型)提示 ,选择 字串
    //这里是会报警告的代码
   
#pragma clang diagnostic pop

需要的字串填入上边的ignored的后边 (简单粗暴:f式 😂)

点击进入网站,查看要忽略各种警告 对应的字串:Which Clang Warning Is Generating This Message?

网站的截图:

2017.01.14

goyohol's essay