仿微博加號彈出動畫

最近項目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仿微博彈出動畫

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容