美文网首页
仿微博加号弹出动画

仿微博加号弹出动画

作者: wuyukobe | 来源:发表于2017-08-04 18:18 被阅读546次

    最近项目2.0版本中要添加一个需求,就是仿微博的十字加号新建功能,背景不是毛玻璃,只是一张图片,上面是时间显示。主要说一下按钮的弹出和收缩效果,以及十字按钮的旋转功能。


    construct.png

    1.弹出动画:

    
        NSArray * upArray = @[_calendarButton,_projectButton,_photoButton,_soundButton,_recordButton];
        [upArray enumerateObjectsUsingBlock:^(id obj,NSUInteger idx,BOOL*stop) {
            
            UIButton * btn = obj;
            
            CGFloat x = btn.frame.origin.x;
            CGFloat y = btn.frame.origin.y;
            CGFloat width = btn.frame.size.width;
            CGFloat height = btn.frame.size.height;
            
            btn.frame = CGRectMake(x, self.frame.size.height - height, width, height);
            
            btn.alpha = 0.0;
            
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(idx * 0.1 * NSEC_PER_SEC)),dispatch_get_main_queue(), ^{
                //1 0.16 0.4 1
                [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:100 initialSpringVelocity:40 options:UIViewAnimationOptionCurveEaseInOut animations:^{
                    
                    btn.alpha = 1;                
                    btn.frame = CGRectMake(x, y, width, height);
                    
                }completion:^(BOOL finished) {
                    
                }];
                
            });
            
        }];
    

    2.收缩动画:

        NSArray * downArray = @[_recordButton,_soundButton,_photoButton,_projectButton,_calendarButton];
        [downArray enumerateObjectsUsingBlock:^(id obj,NSUInteger idx,BOOL*stop) {
            
            UIButton * btn = obj;
            
            CGFloat x = btn.frame.origin.x;
            CGFloat y = btn.frame.origin.y;
            CGFloat width = btn.frame.size.width;
            CGFloat height = btn.frame.size.height;
    
            btn.frame = CGRectMake(x, y, width, height);
            
            btn.alpha = 1.0;
            
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(idx *0.06*NSEC_PER_SEC)),dispatch_get_main_queue(), ^{
                
                [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:100 initialSpringVelocity:25 options:UIViewAnimationOptionCurveEaseInOut animations:^{
                    
                    btn.alpha = 0.0;
                    btn.frame = CGRectMake(x, self.frame.size.height - height, width, height);
                    
                }completion:^(BOOL finished) {
                    
                    if (_constructBlock) {
                        _constructBlock(0,YES);
                    }
                }];
                
            });
            
        }];
    
    

    3.十字按钮的旋转:

     if (sender.selected) {
            
            [UIView animateWithDuration:0.3f animations:^{
                sender.transform = CGAffineTransformMakeRotation(M_PI/4);
            }];
            
        }else{
            
            [UIView animateWithDuration:0.3f animations:^{
                sender.transform = CGAffineTransformMakeRotation(M_PI*4);
            }];        
            
        }
    
    

    Demo地址:GitHub仿微博弹出动画

    相关文章

      网友评论

          本文标题:仿微博加号弹出动画

          本文链接:https://www.haomeiwen.com/subject/gzqblxtx.html