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