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

效果图：

点击前：

点击后：