UI进阶--Core Animation的简单使用:底部菜单旋转

需求：
1.三个隐藏的按钮，在红色按钮底部
2.点击红色按钮时，底部三个隐藏按钮，就显示出来
显示时候有旋转+平移的动画
3.再次点击红色按钮，显示的三个按钮又隐藏
隐藏时候旋转+平移动画

文件和布局:



实现的代码：

//
//  ViewController.m
//  MenuRotation
//
//  Created by xiaomoge on 15/1/7.
//  Copyright (c) 2015年 xiaomoge. All rights reserved.
//

#import "ViewController.h"
#import "JWMenuRotation.h"
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
//添加自定义的view
JWMenuRotation *menu = [JWMenuRotation menuRotation];
CGFloat menuW = self.view.frame.size.width;
CGFloat menuH = menu.bounds.size.height;
CGFloat menuX = 0;
CGFloat menuY = self.view.frame.size.height - menu.bounds.size.height;
menu.frame = CGRectMake(menuX, menuY, menuW, menuH);
[self.view addSubview:menu];
}

@end

//
//  JWMenuRotation.m
//  MenuRotation
//
//  Created by xiaomoge on 15/1/7.
//  Copyright (c) 2015年 xiaomoge. All rights reserved.
//

#import "JWMenuRotation.h"
@interface JWMenuRotation ()
//红色按钮
@property (weak, nonatomic) IBOutlet UIButton *mainBtn;
//隐藏的三个按钮
@property (nonatomic,strong) NSMutableArray *btnItems;
@end

@implementation JWMenuRotation
//懒加载
- (NSMutableArray *)btnItems {
if (!_btnItems) {
_btnItems = [NSMutableArray array];
}
return _btnItems;
}
//如果对象是从xib/storybard加载的时候，就会调用这个方法
- (id)initWithCoder:(NSCoder *)aDecoder {
if (self = [super initWithCoder:aDecoder]) {
[self showBtnItems];
}
return self;
}
//添加三个隐藏按钮
- (void)showBtnItems {
[self initBtnWithImg:@"menu_btn_call" tag:0];
[self initBtnWithImg:@"menu_btn_cheyou" tag:1];
[self initBtnWithImg:@"menu_btn_tixing" tag:2];
}
//初始化一个按钮
- (void)initBtnWithImg:(NSString *)imgName tag:(NSInteger)tag {
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setBackgroundImage:[UIImage imageNamed:imgName] forState:UIControlStateNormal];
btn.tag = tag;
[self.btnItems addObject:btn];
[self addSubview:btn];
}
//加载完view之后就会调用这个方法,设置隐藏按钮的frame
- (void)layoutSubviews {
[super layoutSubviews];
//设置隐藏按钮的frame
CGRect btnBounds = CGRectMake(0, 0, 48, 48);
//遍历隐藏按钮
for (UIButton *btn in self.btnItems) {
btn.frame = btnBounds;
btn.center = self.mainBtn.center;
}
//把红色按钮置顶
[self bringSubviewToFront:self.mainBtn];
}
//红色按钮点击事件
- (IBAction)mainBtnClick:(UIButton *)sender {
//获取红色按钮的形变初始状态
BOOL show = CGAffineTransformIsIdentity(self.mainBtn.transform);
//红色按钮的动画效果
[UIView animateWithDuration:5 animations:^{
if (show) {//如果初始状态未改变，那么点击后旋转45度
self.mainBtn.transform = CGAffineTransformMakeRotation(M_PI_4);
}else {//否则恢复为原始状态
self.mainBtn.transform = CGAffineTransformIdentity;
}
}];
//调用隐藏按钮的被点击后的响应事件
[self showBtnItems:show];
}
//红色按钮被点击后隐藏按钮的响应事件
- (void)showBtnItems:(BOOL)show {
//按钮的间距
CGFloat margin = 90;
//遍历隐藏按钮
for (UIButton *btn in self.btnItems) {
//创建组动画
CAAnimationGroup *groupAni = [CAAnimationGroup animation];
//组动画的时间
groupAni.duration = 5;

//重新设置按钮的中心位置
CGFloat btnCenterX = self.mainBtn.center.x + (btn.tag + 1) * margin;
CGFloat btnCenterY = self.mainBtn.center.y;
CGPoint position = CGPointMake(btnCenterX, btnCenterY);

//创建平移动画
CAKeyframeAnimation *positionAni = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//平移动画的路径
NSValue *val1 = [NSValue valueWithCGPoint:self.mainBtn.center];
NSValue *val2 = [NSValue valueWithCGPoint:CGPointMake(btnCenterX * 0.5, btnCenterY)];
NSValue *val3 = [NSValue valueWithCGPoint:CGPointMake(btnCenterX * 1.2, btnCenterY)];
NSValue *val4 = [NSValue valueWithCGPoint:position];
positionAni.values = @[val1,val2,val3,val4];
//创建旋转动画
CAKeyframeAnimation *rotationAni = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];

if (show) {//被点击后
rotationAni.values = @[@0,@(M_PI * 2),@(M_PI * 4),@(M_PI * 2)];
btn.center = position;
}else {//点击被隐藏时
positionAni.values = @[val4,val3,val2,val1];
btn.center = self.mainBtn.center;
rotationAni.values = @[@0,@(M_PI * 2),@0,@(-M_PI * 2)];
}
//组动画中的动画数组
groupAni.animations = @[positionAni,rotationAni];
//添加组动画到图层
[btn.layer addAnimation:groupAni forKey:Nil];
}
}
//取得自定义的view
+ (instancetype)menuRotation {
return [[[NSBundle mainBundle] loadNibNamed:@"JWMenuRotation" owner:Nil options:Nil] lastObject];
}
@end

效果图：

点击前：


点击后：