仿微博加号弹出动画
2017-08-04 本文已影响546人
wuyukobe
最近项目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仿微博弹出动画
