CodingNet - Learning - 2

点开应用，你一定被CodingNet启动图的优美动画所吸引，这里我们就讲解它的实现，主要是拆开来，将它独立成为一个功能：

首先，前面两篇都是讲解工程的设置，而这里真正意义开始搭建工程，CodingNet采用大量的三方库，所以一定要将CocoaPods掌握

可以参考这篇详细的文章：

http://code4app.com/article/cocoapods-install-usage

这篇更好：

http://www.cnblogs.com/jys509/p/4839803.html

按照上面，获取到几个实现该功能的几个三方库：

都是非常实用和常用的三方库，我就不详细展开了，有几个推荐学习的地方：

十分推荐，CocoaPods搭建RAC环境和简单实用：

http://blog.csdn.net/majiakun1/article/details/46534305

函数式编程：

https://github.com/benjycui/introrx-chinese-edition?utm_source=tuicool&utm_medium=referral

ReactiveCocoa 的github地址 （自己去搜）

回到工程，这个功能的实现原理，就是用一个EaseStartView类来提供一次实例化的操作，相当于一个工具类

#import <UIKit/UIKit.h>

@interface EaseStartView : UIView

/**
 *  @breif  工具类实现
 *
 *  @return 实例化变量
 */
+ (instancetype)startView;

/**
 *  @brief 展示动画操作
 *
 *  动画操作的原理：1.先从透明到实体  2.潜逃两个UIView的动画来设置x置-kScreenWidth长度
 *
 *  @param completionHandler
 */
- (void)startAnimationWithCompletionBlock:(void(^)(EaseStartView *easeStartView))completionHandler;

@end

实现：

#import "EaseStartView.h"
#import "LBCommonHeader.h"  //将所有Category的头文件引在这里
#import "LBMacroHeader.h"   //集成宏的头文件

#import <Masonry.h>
#import <ReactiveCocoa.h>
#import <NYXImagesKit/NYXImagesKit.h>

@interface EaseStartView ()
@property (nonatomic, strong) UIImageView *bgImageView, *logoIconView;
@property (nonatomic, strong) UILabel *descriptionStrLabel;

@end

@implementation EaseStartView

+ (instancetype)startView{

    UIImage *logoIcon = [UIImage imageNamed:@"logo_coding_top.png"];
    UIImage *backgroundImage = [UIImage imageNamed:@"startup_first.jpg"];
    return [[self alloc] initWithBgImage:backgroundImage logoIcon:logoIcon descriptionStr:@"1200bookShop"];
}

- (instancetype)initWithBgImage:(UIImage *)bgImage logoIcon:(UIImage *)logoIcon descriptionStr:(NSString *)descriptionStr{
    self = [super initWithFrame:kScreen_Bounds];

    if (self) {
        UIColor* blackColor = [UIColor blackColor];
        self.backgroundColor = blackColor;
        
        _bgImageView = [[UIImageView alloc] initWithFrame:kScreen_Bounds];
        _bgImageView.contentMode = UIViewContentModeScaleAspectFill;
        _bgImageView.alpha = 0.0;
        [self addSubview:_bgImageView];

        _logoIconView = [[UIImageView alloc] init];
        _logoIconView.contentMode = UIViewContentModeScaleAspectFit;
        [self addSubview:_logoIconView];
        _descriptionStrLabel = [[UILabel alloc] init];
        _descriptionStrLabel.font = [UIFont systemFontOfSize:10];
        _descriptionStrLabel.textColor = [UIColor colorWithWhite:1.0 alpha:0.5];
        _descriptionStrLabel.textAlignment = NSTextAlignmentCenter;
        _descriptionStrLabel.alpha = 0.0;
        [self addSubview:_descriptionStrLabel];
        
        [_descriptionStrLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.equalTo(@[self, _logoIconView]);
            make.height.mas_equalTo(10);
            make.bottom.equalTo(self.mas_bottom).offset(-15);
            make.left.equalTo(self.mas_left).offset(20);
            make.right.equalTo(self.mas_right).offset(-20);
        }];
        
        [_logoIconView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.equalTo(self);
            make.top.mas_equalTo(kScreen_Height/7);
            make.width.mas_equalTo(kScreen_Width *2/3);
            make.height.mas_equalTo(kScreen_Width/4 *2/3);
        }];
        
        [self configWithBgImage:bgImage logoIcon:logoIcon descriptionStr:descriptionStr];
    }
    return self;
}

- (void)configWithBgImage:(UIImage *)bgImage logoIcon:(UIImage *)logoIcon descriptionStr:(NSString *)descriptionStr{
    bgImage = [bgImage scaleToSize:[_bgImageView doubleSizeOfFrame] usingMode:NYXResizeModeAspectFill];
    self.bgImageView.image = bgImage;
    self.logoIconView.image = logoIcon;
    self.descriptionStrLabel.text = descriptionStr;
    [self updateConstraintsIfNeeded];
}

- (void)startAnimationWithCompletionBlock:(void (^)(EaseStartView *))completionHandler{
    
    [kKeyWindow addSubview:self];
    [kKeyWindow bringSubviewToFront:self];
    _bgImageView.alpha = 0.0;
    _descriptionStrLabel.alpha = 0.0;
    
    @weakify(self);
    [UIView animateWithDuration:2.0 animations:^{
        @strongify(self);
        self.bgImageView.alpha = 1.0;
        self.descriptionStrLabel.alpha = 1.0;
    
    } completion:^(BOOL finished){
        [UIView animateWithDuration:0.6 delay:0.3 options:UIViewAnimationOptionCurveEaseIn animations:^{
            @strongify(self);
            [self setX:-kScreen_Width];
        
        } completion:^(BOOL finished){
            @strongify(self);
            [self removeFromSuperview];
            if (completionHandler) {
                
                completionHandler(self);
            }
        }];
    }];
}

@end

用到的相关Category：

UIView (Common) :

#import <UIKit/UIKit.h>

@interface UIView (Common)

@property (nonatomic, assign) CGFloat x;

- (CGSize)doubleSizeOfFrame;

@end

#import "UIView+Common.h"

@implementation UIView (Common)
@dynamic x;

- (void)setX:(CGFloat)x{
    
    CGRect frame = self.frame;
    frame.origin.x = x;
    self.frame = frame;
}

- (CGSize)doubleSizeOfFrame{
    CGSize size = self.frame.size;
    return CGSizeMake(size.width*2, size.height*2);
}

@end

动画操作的原理：1.先从透明到实体  2.嵌套两个UIView的动画来设置x置-屏幕宽度 3.最后结束将它removeFromSuper就好

千万不能用单例来实现这种一次执行的情况啊

只要照着做，你就能看到如此美妙的效果，如果再自己去写一个随机生成图片的函数（结合服务器，以后会讲解），就可以得到不那么单调的效果啦哈哈