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

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

文件和布局:

实现的代码：

 1 //
 2 //  ViewController.m
 3 //  MenuRotation
 4 //
 5 //  Created by xiaomoge on 15/1/7.
 6 //  Copyright (c) 2015年 xiaomoge. All rights reserved.
 7 //
 8 
 9 #import "ViewController.h"
10 #import "JWMenuRotation.h"
11 @interface ViewController ()
12 
13 @end
14 
15 @implementation ViewController
16 
17 - (void)viewDidLoad {
18     [super viewDidLoad];
19     //添加自定义的view
20     JWMenuRotation *menu = [JWMenuRotation menuRotation];
21     CGFloat menuW = self.view.frame.size.width;
22     CGFloat menuH = menu.bounds.size.height;
23     CGFloat menuX = 0;
24     CGFloat menuY = self.view.frame.size.height - menu.bounds.size.height;
25     menu.frame = CGRectMake(menuX, menuY, menuW, menuH);
26     [self.view addSubview:menu];
27 }
28 
29 @end

  1 //
  2 //  JWMenuRotation.m
  3 //  MenuRotation
  4 //
  5 //  Created by xiaomoge on 15/1/7.
  6 //  Copyright (c) 2015年 xiaomoge. All rights reserved.
  7 //
  8 
  9 #import "JWMenuRotation.h"
 10 @interface JWMenuRotation ()
 11 //红色按钮
 12 @property (weak, nonatomic) IBOutlet UIButton *mainBtn;
 13 //隐藏的三个按钮
 14 @property (nonatomic,strong) NSMutableArray *btnItems;
 15 @end
 16 
 17 @implementation JWMenuRotation
 18 //懒加载
 19 - (NSMutableArray *)btnItems {
 20     if (!_btnItems) {
 21         _btnItems = [NSMutableArray array];
 22     }
 23     return _btnItems;
 24 }
 25 //如果对象是从xib/storybard加载的时候，就会调用这个方法
 26 - (id)initWithCoder:(NSCoder *)aDecoder {
 27     if (self = [super initWithCoder:aDecoder]) {
 28         [self showBtnItems];
 29     }
 30     return self;
 31 }
 32 //添加三个隐藏按钮
 33 - (void)showBtnItems {
 34     [self initBtnWithImg:@"menu_btn_call" tag:0];
 35     [self initBtnWithImg:@"menu_btn_cheyou" tag:1];
 36     [self initBtnWithImg:@"menu_btn_tixing" tag:2];
 37 }
 38 //初始化一个按钮
 39 - (void)initBtnWithImg:(NSString *)imgName tag:(NSInteger)tag {
 40     UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
 41     [btn setBackgroundImage:[UIImage imageNamed:imgName] forState:UIControlStateNormal];
 42     btn.tag = tag;
 43     [self.btnItems addObject:btn];
 44     [self addSubview:btn];
 45 }
 46 //加载完view之后就会调用这个方法,设置隐藏按钮的frame
 47 - (void)layoutSubviews {
 48     [super layoutSubviews];
 49     //设置隐藏按钮的frame
 50     CGRect btnBounds = CGRectMake(0, 0, 48, 48);
 51     //遍历隐藏按钮
 52     for (UIButton *btn in self.btnItems) {
 53         btn.frame = btnBounds;
 54         btn.center = self.mainBtn.center;
 55     }
 56     //把红色按钮置顶
 57     [self bringSubviewToFront:self.mainBtn];
 58 }
 59 //红色按钮点击事件
 60 - (IBAction)mainBtnClick:(UIButton *)sender {
 61     //获取红色按钮的形变初始状态
 62     BOOL show = CGAffineTransformIsIdentity(self.mainBtn.transform);
 63     //红色按钮的动画效果
 64     [UIView animateWithDuration:5 animations:^{
 65         if (show) {//如果初始状态未改变，那么点击后旋转45度
 66             self.mainBtn.transform = CGAffineTransformMakeRotation(M_PI_4);
 67         }else {//否则恢复为原始状态
 68             self.mainBtn.transform = CGAffineTransformIdentity;
 69         }
 70     }];
 71     //调用隐藏按钮的被点击后的响应事件
 72     [self showBtnItems:show];
 73 }
 74 //红色按钮被点击后隐藏按钮的响应事件
 75 - (void)showBtnItems:(BOOL)show {
 76     //按钮的间距
 77     CGFloat margin = 90;
 78     //遍历隐藏按钮
 79     for (UIButton *btn in self.btnItems) {
 80         //创建组动画
 81         CAAnimationGroup *groupAni = [CAAnimationGroup animation];
 82         //组动画的时间
 83         groupAni.duration = 5;
 84         
 85         //重新设置按钮的中心位置
 86         CGFloat btnCenterX = self.mainBtn.center.x + (btn.tag + 1) * margin;
 87         CGFloat btnCenterY = self.mainBtn.center.y;
 88         CGPoint position = CGPointMake(btnCenterX, btnCenterY);
 89         
 90         //创建平移动画
 91         CAKeyframeAnimation *positionAni = [CAKeyframeAnimation animationWithKeyPath:@"position"];
 92         //平移动画的路径
 93         NSValue *val1 = [NSValue valueWithCGPoint:self.mainBtn.center];
 94         NSValue *val2 = [NSValue valueWithCGPoint:CGPointMake(btnCenterX * 0.5, btnCenterY)];
 95         NSValue *val3 = [NSValue valueWithCGPoint:CGPointMake(btnCenterX * 1.2, btnCenterY)];
 96         NSValue *val4 = [NSValue valueWithCGPoint:position];
 97         positionAni.values = @[val1,val2,val3,val4];
 98         //创建旋转动画
 99         CAKeyframeAnimation *rotationAni = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
100         
101         if (show) {//被点击后
102             rotationAni.values = @[@0,@(M_PI * 2),@(M_PI * 4),@(M_PI * 2)];
103             btn.center = position;
104         }else {//点击被隐藏时
105             positionAni.values = @[val4,val3,val2,val1];
106             btn.center = self.mainBtn.center;
107             rotationAni.values = @[@0,@(M_PI * 2),@0,@(-M_PI * 2)];
108         }
109         //组动画中的动画数组
110         groupAni.animations = @[positionAni,rotationAni];
111         //添加组动画到图层
112         [btn.layer addAnimation:groupAni forKey:Nil];
113     }
114 }
115 //取得自定义的view
116 + (instancetype)menuRotation {
117     return [[[NSBundle mainBundle] loadNibNamed:@"JWMenuRotation" owner:Nil options:Nil] lastObject];
118 }
119 @end

效果图：

点击前：

点击后：