redbag.gif

模仿一波拼多多的开红包.

主要用的就是
CAShapeLayer绘制
UIBezierPath绘制(控制点起点和终点)
CABasicAnimation基本动画

未开启动画前,绘制两个CAShapeLayer显示不同的层次感.

- (void)config{
    _redLayer = [[CAShapeLayer alloc] init];
    UIBezierPath *pathFang = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 10, self.frame.size.width -40, self.frame.size.height-20) cornerRadius:4];
    _redLayer.path = pathFang.CGPath;
    _redLayer.zPosition = 1;
    [self.layer addSublayer:_redLayer];
    [_redLayer setFillColor:[UIColor colorWithRed:0.7968 green:0.2186 blue:0.204 alpha:1.0].CGColor];//深色背景
    
    _lineLayer = [[CAShapeLayer alloc] init];
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 10, self.frame.size.width-40, self.frame.size.height*close_rate) byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight) cornerRadii:CGSizeMake(4, 4)];
    CGPoint startPoint = CGPointMake(20, self.frame.size.height*close_bot_rate+10);
    CGPoint endPoint = CGPointMake(self.frame.size.width-20, self.frame.size.height*close_bot_rate+10);
    CGPoint controlPoint = CGPointMake(self.frame.size.width*0.5, self.frame.size.height*close__bot_rate);
    //曲线起点
    [path moveToPoint:startPoint];
    //曲线终点和控制基点
    [path addQuadCurveToPoint:endPoint controlPoint:controlPoint];

    //曲线部分颜色和阴影
    [_lineLayer setFillColor:[UIColor colorWithRed:0.851 green:0.3216 blue:0.2784 alpha:1.0].CGColor];
    [_lineLayer setStrokeColor:[UIColor colorWithRed:0.9401 green:0.0 blue:0.0247 alpha:0.02].CGColor];
    [_lineLayer setShadowColor:[UIColor blackColor].CGColor];
    [_lineLayer setLineWidth:0.1];
    [_lineLayer setShadowOffset:CGSizeMake(6, 6)];
    [_lineLayer setShadowOpacity:0.2];
    [_lineLayer setShadowOffset:CGSizeMake(1, 1)];
    _lineLayer.path = path.CGPath;
    _lineLayer.zPosition = 1;
    [self.layer addSublayer:_lineLayer];
    
    
    [self addTopText];
    [self addOpenButton];
    
}

按钮添加的是CABasicAnimation动画

/***  添加缩放动画 */

- (void)addGrowAnimation:(UIButton*)sender{
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.duration = 0.5;
    scaleAnimation.fromValue=@(0.8);
    scaleAnimation.toValue=@(1.1);
    scaleAnimation.repeatCount = MAXFLOAT;
    scaleAnimation.autoreverses = YES;
    scaleAnimation.removedOnCompletion = NO;
    scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [sender.layer addAnimation:scaleAnimation forKey:@"scaleAnimationDemo"];
    
    
}

/*** 给按钮添加了一个光晕 添加外环 */

- (void)addFlowAnimation:(UIButton *)sender{
    
    sender.layer.shadowPath  = [UIBezierPath bezierPathWithRoundedRect:sender.bounds byRoundingCorners:(UIRectCornerAllCorners) cornerRadii:CGSizeMake(sender.layer.cornerRadius, sender.layer.cornerRadius)].CGPath;
    sender.layer.shadowColor = [UIColor colorWithHexString:@"#CD7F32"].CGColor;
    sender.layer.shadowOffset = CGSizeZero;
    sender.layer.shadowRadius = 10;
    sender.layer.shadowOpacity = 1;
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"shadowRadius"];
    animation.fromValue = @(10);
    animation.toValue = @(0);
    animation.autoreverses = YES;
    animation.additive = NO;
    animation.duration = 1.5;
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    animation.repeatCount = INFINITY;
    [sender.layer addAnimation: animation forKey:@"glowingAnimation"];

}

其余的几个文案显示加的是label

/***  添加恭喜发财文案 */

- (void)addTopText{
    _topText = [[UILabel alloc] initWithFrame:CGRectMake(0, self.frame.size.height*0.2, self.frame.size.width, 30)];
    _topText.text = @"五亿好礼开出来";
    _topText.tag = 100;
    _topText.textColor = [UIColor colorWithHexString:@"#e0ba88"];
    _topText.font = [UIFont boldSystemFontOfSize:25];
    _topText.textAlignment = NSTextAlignmentCenter;
    _topText.layer.zPosition = 3;
    [self addSubview:_topText];
    
    _tips = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_topText.frame)+10, self.frame.size.width, 30)];
    _tips.text = @"点开即可获得100元大礼包";
    _tips.tag = 101;
    _tips.textColor = [UIColor colorWithHexString:@"#e0ba88"];
    _tips.font = [UIFont boldSystemFontOfSize:12];
    _tips.textAlignment = NSTextAlignmentCenter;
    _tips.layer.zPosition = 3;
    [self addSubview:_tips];
    
    _botText = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_tips.frame)+20, self.frame.size.width, 30)];
    _botText.text = @"恭喜发财,大吉大利";
    _botText.tag = 102;
    _botText.textColor = [UIColor colorWithHexString:@"#e0ba88"];
    _botText.font = [UIFont boldSystemFontOfSize:20];
    _botText.textAlignment = NSTextAlignmentCenter;
    _botText.layer.zPosition = 3;
    [self addSubview:_botText];
}

点开动画

/***  开红包后移动 */

- (void)moveAnimation:(UIButton*)sender{
    CABasicAnimation *transformAnima = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
    // transformAnima.fromValue = @(M_PI_2);
    transformAnima.toValue = [NSNumber numberWithFloat: M_PI];
    transformAnima.duration = 0.5;
    transformAnima.cumulative = YES;
    transformAnima.autoreverses = NO;
    transformAnima.repeatCount = HUGE_VALF;
    transformAnima.fillMode = kCAFillModeForwards;
    transformAnima.removedOnCompletion = NO;
    transformAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    sender.layer.zPosition = 5;
    sender.layer.zPosition = sender.layer.frame.size.width/2.f;
    [sender.layer addAnimation:transformAnima forKey:@"rotationAnimationY"];

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [sender removeFromSuperview];
            
            UIBezierPath *newPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 10, self.frame.size.width-40, self.frame.size.height*open_rate) byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight) cornerRadii:CGSizeMake(4, 4)];
            CGPoint startPoint = CGPointMake(20,  self.frame.size.height*open_rate+10);
            CGPoint endPoint = CGPointMake(self.frame.size.width-20, self.frame.size.height*open_rate+10);
            CGPoint controlPoint = CGPointMake(self.frame.size.width*0.5, self.frame.size.height*open__rate);
            //曲线起点
            [newPath moveToPoint:startPoint];
            //曲线终点和控制基点
            [newPath addQuadCurveToPoint:endPoint controlPoint:controlPoint];
            
            CGRect newFrame = CGRectMake(20, 10, self.frame.size.width-40, self.frame.size.height*open__rate);
            
            CABasicAnimation* pathAnim = [CABasicAnimation animationWithKeyPath: @"path"];
            pathAnim.toValue = (id)newPath.CGPath;
            
            CABasicAnimation* boundsAnim = [CABasicAnimation animationWithKeyPath: @"frame"];
            boundsAnim.toValue = [NSValue valueWithCGRect:newFrame];
            
            CAAnimationGroup *anims = [CAAnimationGroup animation];
            anims.animations = [NSArray arrayWithObjects:pathAnim, boundsAnim, nil];
            anims.removedOnCompletion = NO;
            anims.duration = 0.1f;
            anims.fillMode  = kCAFillModeForwards;
            
            [self.topText setText:@"恭喜您获得"];
        
            NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:@"¥20.88"];
            [str addAttribute:NSFontAttributeName value:[UIFont boldSystemFontOfSize:15] range:NSMakeRange(0, 1)];

            self.botText.frame  = CGRectMake(0, self.frame.size.height*open__rate+20, self.frame.size.width, 35);
            [self.botText setFont:[UIFont boldSystemFontOfSize:30]];
            [self.botText setAttributedText:str];
            [self addGrowAnimation:self.botText];
        
            self.tips.frame  = CGRectMake(0, self.frame.size.height*close__bot_rate+20, self.frame.size.width, 20);
            [self.tips setText:@"您要是不想使用可以转给我哟"];
        
            [self.lineLayer addAnimation:anims forKey:nil];
        });
    
}