高仿淘宝渐变色提示语（落幕动画提示语）

项目需求

最近需要修改登录注册模块，本来还以为只有登录注册，没想到还把各个界面的提示语也改了，MBProgressHUD只好被我暂时冷藏了😹😹。 WX20171115-144109.png

大眼一看好像在哪见过，没错就是淘宝的。难怪我那一做海淘app的朋友说：“基本所有的电商类app改来改去不是想淘宝，就是像京东”。

功能分析

先把功能拆分一下其实主要可以分为三个部分：

1. 根据文字自动适应提示框宽度。
2. 提示框下落回弹效果。
3. 提示框背景渐变色。
   第一部分很好实现可以根据sizeThatFits方法获取，具体方法我会在下面贴出代码。
   第二部分如果动画用的很溜的话，可以自己写，如果不是很熟的话可以POP动画，回弹效果也很不错。
   第三部渐变色的处理可以用系统提供的CAGradientLayer就可以完成。具体可看代码。

功能实现

//.h部分
+ (instancetype)showTopTipContent:(NSString *)content;
//.m部分
#import "MGTopTipView.h"
#import "UIView+Extension.h"
#import <pop/POP.h>
#define MGSCREENWIDTH  [UIScreen mainScreen].bounds.size.width

@interface MGTopTipView ()
@property (nonatomic, strong) UILabel *contentLbl;//提示语内容
@property (nonatomic, strong) MGTopTipView  *topTipHUD;
@property (nonatomic, assign)CGSize viewSize;//提示语所占的大小
@end

NSString *_contents;//传过来的提示语

@implementation MGTopTipView

static NSMutableDictionary *_tempDict;//储存单个对象，防止重复创建

+ (void)initialize
{
    _tempDict = [NSMutableDictionary dictionary];
}

+ (instancetype)showTopTipContent:(NSString *)content {
        view = [UIApplication sharedApplication].keyWindow;
    _contents = content;//将提示字段赋值给_contents
    MGTopTipView *topTipHUD = _tempDict[@"TipView"];
    if (topTipHUD == nil)
    {
        MGTopTipView *topTipHUD = [MGTopTipView showHUDAddedTo:view ];
        _tempDict[@"TipView"] = topTipHUD;
        return topTipHUD;
    }
    return topTipHUD;
}
//动画处理
+ (instancetype)showHUDAddedTo:(UIView *)view
{
    MGTopTipView *topTipHUD = [[self alloc] init];
    [view addSubview:topTipHUD];
//0.7秒触发
    [UIView animateWithDuration:0.7f animations:^{
            POPSpringAnimation *anSpring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionY];
            anSpring.fromValue = @(self.centerY);
            anSpring.toValue = @(self.center.y+160);
            anSpring.beginTime = CACurrentMediaTime() + 0.5f;
            anSpring.springBounciness = 10.0f;
            [self pop_addAnimation:anSpring forKey:@"position"];
        } completion:^(BOOL finished) {
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                [UIView animateWithDuration:0.7f animations:^{
//动画回收
                    POPSpringAnimation *anSpring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionY];
                    anSpring.fromValue = @(self.centerY);
                    anSpring.toValue = @(self.center.y - 160);
                    anSpring.beginTime = CACurrentMediaTime() + 1.0f;
                    anSpring.springBounciness = 10.0f;
                    [self pop_addAnimation:anSpring forKey:@"position"];
                } completion:^(BOOL finished) {
                    [self removeFromSuperview];
                    [_tempDict removeAllObjects];
                }];
            });
        }];
    return topTipHUD;
}
//类的init方法
- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self setupSubviews];
    }
    return self;
}

- (void)setupSubviews
{
//计算出提示框宽度
     _viewSize = [self.contentLbl sizeThatFits:CGSizeMake(self.contentLbl.frame.size.width, MAXFLOAT)];
    CGFloat width = MGSCREENWIDTH - 100;
//防止提示框超出屏幕
    if (_viewSize.width > width) {
        _viewSize.width = width;
    }
    self.size = CGSizeMake(_viewSize.width+ 20, 30);
    self.origin = CGPointMake((MGSCREENWIDTH - _viewSize.width - 20) / 2, - 64 - _viewSize.height - 5);
//提示框圆角
    self.layer.cornerRadius = 12;
    self.contentLbl.frame = CGRectMake(10, 7, self.bounds.size.width - 7, 17);
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.bounds = self.frame;
//渐变色处理
    gradientLayer.colors = @[(id)[UIColor colorWithHexColorString:@"#FE7425"].CGColor, (id)[UIColor colorWithHexColorString:@"#FFAC4C"].CGColor];
    gradientLayer.cornerRadius = 15;
    gradientLayer.locations = @[@0.5, @1];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1.0, 0);
//提示框四周阴影
    gradientLayer.shadowColor = [UIColor colorWithHexColorString:@"#FE7425"].CGColor;
    gradientLayer.shadowOffset = CGSizeMake(0, 0);
    gradientLayer.shadowOpacity = 0.2;
    gradientLayer.frame = self.bounds;
    [self.layer addSublayer:gradientLayer];
    [self addSubview:self.contentLbl];
 
}
//提示框label属性设置
- (UILabel *)contentLbl
{
    if (!_contentLbl) {
        _contentLbl = [[UILabel alloc] init];
        _contentLbl.font = [UIFont systemFontOfSize:12];
        _contentLbl.textAlignment = NSTextAlignmentLeft;
        _contentLbl.numberOfLines = 1;
        _contentLbl.text = _contents;
        _contentLbl.textColor = [UIColor whiteColor];
    }
    
    return _contentLbl;
}

效果图下 2017-11-15 16_14_26.gif

是不是很像？当然我写的只是将提示语放到了keyWindow上面，可以扩展加入指定View，定时显示，定时消失，修改颜色等等。落幕动画提示语，里面的落幕动画原理与这里是一样的，这次就不写代码了。

参考文档

(http://www.jianshu.com/p/3e0e25fd9b85)
(http://blog.csdn.net/u010745324/article/details/53431761)
还有一个落幕提示语找不到作者了😂😂