The realization of the animation effect while waiting, waiting for the realization of the animation effect

The realization of the animation effect while waiting, waiting for the realization of the animation effect

When we load the page when requesting the network, there is an action, the effect is as follows:

Source code can be found on the Internet open source project Coding.net, the above effect principle is a combination of two images, the outside is the animation rotation, the icon inside is the transparency change; the main code is as follows:

1: encapsulate it in EaseLoadingView

@interface EaseLoadingView : UIView@property (strong, nonatomic) UIImageView *loopView, *monkeyView;@property (assign, nonatomic, readonly) BOOL isLoading;- (void)startAnimating;- (void)stopAnimating;@end

@interface EaseLoadingView ()@property (nonatomic, assign) CGFloat loopAngle, monkeyAlpha, angleStep, alphaStep;@end@implementation EaseLoadingView- (instancetype)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        self.backgroundColor = [UIColor clearColor];        _loopView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"loading_loop"]];        _monkeyView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"loading_monkey"]];        [_loopView setCenter:self.center];        [_monkeyView setCenter:self.center];        [self addSubview:_loopView];        [self addSubview:_monkeyView];        [_loopView mas_makeConstraints:^(MASConstraintMaker *make) {            make.center.equalTo(self);        }];        [_monkeyView mas_makeConstraints:^(MASConstraintMaker *make) {            make.center.equalTo(self);        }];                _loopAngle = 0.0;        _monkeyAlpha = 1.0;        _angleStep = 360/3;        _alphaStep = 1.0/3.0;    }    return self;}- (void)startAnimating{    self.hidden = NO;    if (_isLoading) {        return;    }    _isLoading = YES;    [self loadingAnimation];}- (void)stopAnimating{    self.hidden = YES;    _isLoading = NO;}- (void)loadingAnimation{    static CGFloat duration = 0.25f;    _loopAngle += _angleStep;    if (_monkeyAlpha >= 1.0 || _monkeyAlpha <= 0.0) {        _alphaStep = -_alphaStep;    }    _monkeyAlpha += _alphaStep;    [UIView animateWithDuration:duration delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{        CGAffineTransform loopAngleTransform = CGAffineTransformMakeRotation(_loopAngle * (M_PI / 180.0f));        _loopView.transform = loopAngleTransform;        _monkeyView.alpha = _monkeyAlpha;    } completion:^(BOOL finished) {        if (_isLoading && [self superview] != nil) {            [self loadingAnimation];        }else{            [self removeFromSuperview];            _loopAngle = 0.0;            _monkeyAlpha = 1,0;            _alphaStep = ABS(_alphaStep);            CGAffineTransform loopAngleTransform = CGAffineTransformMakeRotation(_loopAngle * (M_PI / 180.0f));            _loopView.transform = loopAngleTransform;            _monkeyView.alpha = _monkeyAlpha;        }    }];}@end

Note that loadingAnimation includes action processing and transparency processing. When loading is stopped, it is removed from the current view;

2: UIView (Common) in the UIView extension class

#pragma mark LoadingView@property (strong, nonatomic) EaseLoadingView *loadingView;- (void)beginLoading;- (void)endLoading;@end

-(Void) setLoadingView :( EaseLoadingView *) loadingView {[self willChangeValueForKey: @ "LoadingViewKey"]; Evaluate (self, & LoadingViewKey, loadingView, role); [self didChangeValueForKey: @ "LoadingViewKey"];}-(EaseLoadingView *) loadingView {return objc_getAssociatedObject (self, & LoadingViewKey);}-(void) beginLoading {for (UIView * aView in [self. blankPageConta Iner subviews]) {if ([aView isKindOfClass: [easeblkpageview class] &! AView. hidden) {return ;}} if (! Self. loadingView) {// initialize LoadingView self. loadingView = [[EaseLoadingView alloc] initWithFrame: self. bounds];} [self addSubview: self. loadingView]; [self. loadingView mas_makeConstraints: ^ (MASConstraintMaker * make) {make. self. edges. similar to (self);}]; [self. loadingView startAnimating];}-(void) endLoading {if (self. loadingView) {[self. loadingView stopAnimating];}

Note: In the KVO model of cocoa, there are two ways to notify the observer: automatic notification and manual notification. As the name suggests, automatic notification is automatically notified to the observer when the value of cocoa changes. Manual notification requires the willChangeValueForKey: And didChangeValueForKey: Method to notify the caller when the value changes.

3: Use Page call

- (void)sendRequest{    [self.view beginLoading];    __weak typeof(self) weakSelf = self;    [[Coding_NetAPIManager sharedManager] request_CodeFile:_myCodeFile withPro:_myProject andBlock:^(id data, NSError *error) {        [weakSelf.view endLoading];        if (data) {            weakSelf.myCodeFile = data;            [weakSelf refreshCodeViewData];        }        [weakSelf.view configBlankPage:EaseBlankPageTypeView hasData:(data != nil) hasError:(error != nil) reloadButtonBlock:^(id sender) {            [weakSelf sendRequest];        }];    }];}

[Self. view beginLoading] and [weakSelf. view endLoading] can call the animation effect;

 

Supplement: The other is the animation effect composed of many different images. Each image can be used FOR traversing to form an animation effect;

// Set the animation image NSMutableArray * idleImages = [NSMutableArray array]; for (NSUInteger I = 1; I <= 60; ++ I) {UIImage * image = [UIImage imageNamed: [NSString stringWithFormat: @ "dropdown_anim _ 000% zd", I]; [idleImages addObject: image]; [idleImages addObject: image];}