Breathing effect: the legendary “breathing __ lamp __ effect”, beautiful and play a prompt effect

Gifs have a single “whoosh” (or “whoosh”) effect, and no corresponding “whoosh” (or “whoosh”) effect! Excuse me ~~ brightness reaches the maximum value, suddenly becomes the minimum value (I think it will be a little abrupt ~), and slowly reaches the maximum value.

Breathing lamp:

This one has a “whoosh” and a “suck”, but the stick. But it’s not very pretty…

Core code: the execution of a method into an infinite loop (breathing (light and shade change) effect)! !

UIView animateWithDuration:1.8f animations:^{_Breathev. alpha = 0.35f; -(void)startWithLight {// Start the animations [UIView animateWithDuration:1.8f animations:^{_Breathev. alpha = 0.35f; // Setting opacity of UIView to alpha or opacity of its layer The transparency of the Subview will follow change. / / _breatheV backgroundColor = [_breatheV. BackgroundColor colorWithAlphaComponent: 0.35 f]; / / do not affect a child view Settings } completion:^(BOOL finished) {// Enable the "-(void)startWithDark {}" method [self startWithDark];}]; } -(void)startWithDark {// Dark effects start [UIView animateWithDuration:1.8f animations:^{_Breathev. alpha = 0.1f; / / _breatheV backgroundColor = [_breatheV backgroundColor colorWithAlphaComponent: 0.1 f]; / / not affect child views set} completion: ^ (BOOL // Enable the -(void)startWithLight {} method [self startWithLight];}]; }Copy the code

Setting opacity of UIView to alpha or setting opacity of its layer layer also changes the opacity of its 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; // Define the global view variable} @endCopy the code

– (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.35 f; // Start state translucent effect [self.view addSubview:_breatheV]; // Activate breath effect (infinite animation) [self startWithDark];Copy the code

Program breakpoints display: Just look at the effect:

To here actually foundation good partner already need not see the content behind!

Customize a button for breathing effects

1. Select New File to create a File

2. Select “Cocoa Touch Clas”

3. Select inherit from UIView

After that, inside “goyoholbutton.h” :

#import <UIKit/UIKit.h>

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

@end
Copy the code

“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]; // Initialize backgroundView _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]; // Start breathing animation [self HighlightAnimation]; } return self; }Copy the code

Control view hierarchy:

Overall breathing effect:

#pragma mark -BreathingAnimation - (void)HighlightAnimation{__block Typeof (self) weakSelf = self; [UIView animateWithDuration: 1.5 f animations: ^ {weakSelf. BackgroundView. Alpha = 0.3 f;} completion: ^ (BOOL finished) { [weakSelf DarkAnimation]; }]; } - (void)DarkAnimation{ __block typeof(self) weakSelf = self; [UIView animateWithDuration: 1.5 f animations: ^ {weakSelf. BackgroundView. Alpha = 0.8 f;} completion: ^ (BOOL finished) { [weakSelf HighlightAnimation]; }]; }Copy the code

ViewController #import “goyoholbutton.h”; // Import “- (void)viewDidLoad {}”;

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

Effect: The “alpha channel” value of the entire view self.backgroundView changes

Button click event response effect:

Other comparisons (just look at them)

  • 1. Only image breathing effect (self. BackgroundView background color is “blue”)

    #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]; }]; }Copy the code

Effect: only the “alpha channel” value of the imageView (self.imageView) changes

  • 2. BackgroundView does not affect the subview transformation (self. BackgroundView background color is “blue”) breathing effect

    #pragma mark -BreathingAnimation - (void)HighlightAnimation{__block Typeof (self) weakSelf = self; [UIView animateWithDuration: 1.5 f animations: ^ {/ / backgroundView ⭐ ️ does not affect the child view transformation weakSelf. BackgroundView. BackgroundColor = [weakSelf backgroundView. BackgroundColor colorWithAlphaComponent: 0.2 f]; weakSelf. ImageView. Alpha = 0.3 f;} completion:^(BOOL finished) { [weakSelf DarkAnimation]; }]; } - (void)DarkAnimation{ __block typeof(self) weakSelf = self; [UIView animateWithDuration: 1.5 f animations: ^ {/ / backgroundView does not affect the child view transformation weakSelf. BackgroundView. BackgroundColor = [weakSelf backgroundView. BackgroundColor colorWithAlphaComponent: 0.8 f]; weakSelf. ImageView. Alpha = 0.8 f;} completion:^(BOOL finished) { [weakSelf HighlightAnimation]; }]; }Copy the code

Effect: The “alpha channel” value change is performed at the same time (since backgroundView does not affect the subview imageView transformation, the two breathing effects are shown together).

Look at the effect that doesn’t affect the subview
_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.5 f animations: ^ {weakSelf. BackgroundView. BackgroundColor = [weakSelf backgroundView. BackgroundColor colorWithAlphaComponent: 0.2 f];} completion: ^ (BOOL finished) {[weakSelf DarkAnimation]; }]; } - (void)DarkAnimation{ __block typeof(self) weakSelf = self; [UIView animateWithDuration: 1.5 f animations: ^ {weakSelf. BackgroundView. BackgroundColor = [weakSelf backgroundView. BackgroundColor colorWithAlphaComponent: 0.8 f];} completion: ^ (BOOL finished) {[weakSelf HighlightAnimation]; }]; }Copy the code

Effect: Its transparency changes without affecting the transparency of its subviews!

If you need to implement click response in Viewcontroller:

“GoyoholButton. M” :

@property (nonatomic,strong) id target; @property (nonatomic,assign) SEL action; // Save the response messageCopy the code

-(void)actionResponse {}

// Make the object respond to the message, Transfer button click event if ([self target respondsToSelector: self. The action]) {[self. The target performSelector: self. The action withObject: self]. } else {NSLog(@" no implementation method "); }Copy the code

Then store its method:

#pragma mark - add event response -(void)addTarget:(id)target action:(SEL)action { [self.target self.action] self.target = target; self.action = action; }Copy the code

And declare again (button click response) method interface:

-(void)addTarget:(id)target action:(SEL)action;
Copy the code

Viewcontroller – (void)viewDidLoad {}

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

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

Effect:

That’s it for the breathing effect button! Only about the general custom way! Suddenly found himself used to be so wordy (recently read the article written by the great god who took me to the entrance, feel ashamed ~~😂), now want to be concise and clear

It’s up to you to make it, okaycreative!

Tips: (Add a meal) If the warning (⚠️) seems uncomfortable, remove it as follows:

The warning “performSelector may cause a leak because its selector is unknown” is generated

In a simple,roughTo solve the “warning display problem”

The code is as follows:

#pragma clang diagnostic push #pragma clang diagnostic ignored" -warc-performselector -leaks" // According to the warning (type) prompt, Select string // here is the warning code #pragma clang Diagnostic POPCopy the code

Type the desired string after ignored (formula F 😂)

Which Clang Warning Is Generating This Message?

A screenshot of the website:

(2017.01.14)

goyohol’s essay