zoukankan      html  css  js  c++  java
  • 底部旋转菜单

    Main.storyboard

    ViewController.m

    //

    //  ViewController.m

    //  8A07.底部旋转菜单

    //

    //  Created by huan on 16/2/6.

    //  Copyright © 2016 huanxi. All rights reserved.

    //

     

    #import "ViewController.h"

    #import "CZBottomMenu.h"

    @interface ViewController ()

     

    @end

     

    @implementation ViewController

     

    - (void)viewDidLoad {

        [super viewDidLoad];

        // Do any additional setup after loading the view, typically from a nib.

        

        //添加底部View

        CZBottomMenu *menu = [CZBottomMenu buttomMenu];

        CGFloat menuX = 0;

        CGFloat menuY = self.view.bounds.size.height - menu.bounds.size.height;

        CGFloat menuW = self.view.bounds.size.width;

        CGFloat menuH = menu.bounds.size.height;

        menu.frame = CGRectMake(menuX, menuY, menuW, menuH);

        [self.view addSubview:menu];

    }

     

    - (void)didReceiveMemoryWarning {

        [super didReceiveMemoryWarning];

        // Dispose of any resources that can be recreated.

    }

     

    @end

    CZBottomMenu.h

    #import <UIKit/UIKit.h>

     

    @interface CZBottomMenu : UIView

     

    +(instancetype)buttomMenu;

        

     

    @end

    CZBottomMenu.m

    //

    //  CZBottomMenu.m

    //  8A07.底部旋转菜单

    //

    //  Created by huan on 16/2/6.

    //  Copyright © 2016 huanxi. All rights reserved.

    //

     

    #import "CZBottomMenu.h"

    #define AnimationDuration 5

    #define delta 90 //按钮间的间距

    @interface CZBottomMenu()

    /**

     * Items存在三个隐藏的按钮

     */

    @property (nonatomic, strong) NSMutableArray *itmes;

    @property (weak, nonatomic) IBOutlet UIButton *mainBtn;

    - (IBAction)mainBtnClick:(id)sender;

     

    @end

    @implementation CZBottomMenu

     

    /*

    // Only override drawRect: if you perform custom drawing.

    // An empty implementation adversely affects performance during animation.

    - (void)drawRect:(CGRect)rect {

        // Drawing code

    }

    */

     

    -(NSMutableArray *)itmes{

        if (!_itmes) {

            _itmes = [NSMutableArray array];

        }

        return _itmes;

    }

     

    +(instancetype)buttomMenu{

        //bundle里加载xib

        return [[[NSBundle mainBundle] loadNibNamed:@"CZBottomMenu" owner:nil options:nil]lastObject];

    }

    #pragma mark 对象是从xib/storyboard加载的时候,就好调用这个方法

    -(id)initWithCoder:(NSCoder *)aDecoder{

        if (self = [super initWithCoder:aDecoder]) {

            [self initItems];

        }

        return self;

    }

     

    #pragma mark 初始化三个隐藏的按钮

    -(void)initItems{

        [self addBtnWithBgImage:@"menu_btn_call"tag:0];

        [self addBtnWithBgImage:@"menu_btn_cheyou"tag:1];

        [self addBtnWithBgImage:@"menu_btn_tixing"tag:2];

     

    }

     

    /**

     * 通过一张图片来添加按钮

     */

    -(void)addBtnWithBgImage:(NSString *)bgImage tag:(NSInteger)tag{

        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];

        [btn setBackgroundImage:[UIImage imageNamed:bgImage] forState:UIControlStateNormal];

        btn.tag = tag;

        [self.itmes addObject:btn];

        [self addSubview:btn];

    }

     

    #pragma mark 设置三个隐藏按钮的尺寸和位置

    -(void)layoutSubviews{

        //所有隐藏按钮的大小是一样的

        CGRect btnBounds = CGRectMake(0, 0, 43, 43);

        //遍历三个隐藏的按钮

        for (UIButton * btn in self.itmes) {

            btn.bounds = btnBounds;

            btn.center = self.mainBtn.center;

        }

        //红色按钮置顶

        [self bringSubviewToFront:self.mainBtn];

    }

     

     

    - (IBAction)mainBtnClick:(id)sender {

        

        BOOL show = CGAffineTransformIsIdentity(self.mainBtn.transform);

        // 1.实现 按钮 动画效果

        [UIView animateWithDuration:AnimationDuration animations:^{

            if (show) {//代表transform未被改变

                self.mainBtn.transform = CGAffineTransformMakeRotation(M_PI_4);

            }else{//恢复

                self.mainBtn.transform = CGAffineTransformIdentity;

            }

        }];

        [self showItems:show];

        

    }

     

    -(void)showItems:(BOOL)show{

     

    #warning 默认情况 按钮的中心与按钮的图层的position是一样

        NSLog(@"主按钮中心点 %@", NSStringFromCGPoint(self.mainBtn.center));

        NSLog(@"主按钮的图层的position %@", NSStringFromCGPoint(self.mainBtn.layer.position));

        // 3.实现 items 的显示位置

        for (UIButton *btn in self.itmes) {

    #warning 一个按钮对应一个组动画

            //2.创建动画

            //2.1 创建组动画

            CAAnimationGroup *group = [CAAnimationGroup animation];

            group.duration = AnimationDuration;

            //2.2 添加一个平移动画

            CAKeyframeAnimation *positionAni = [CAKeyframeAnimation animation];

            positionAni.keyPath = @"position";

            

            //2.3 添加一个旋转的动画

            CAKeyframeAnimation *rotationAni = [CAKeyframeAnimation animation];

            rotationAni.keyPath = @"transform.rotation";

            

            

            //重新设置每一个按钮的x

            CGFloat btnCenterX = self.mainBtn.center.x + (btn.tag + 1) * delta;

            CGFloat btnCenterY = self.mainBtn.center.y;

            // 最终显示的位置

            CGPoint showPosition = CGPointMake(btnCenterX, btnCenterY);

            //设置平移动画的路径

            NSValue *value1 = [NSValue valueWithCGPoint:self.mainBtn.center];

            NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(btnCenterX * 0.5, btnCenterY)];

            NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(btnCenterX * 1.1, btnCenterY)];

            NSValue *value4 = [NSValue valueWithCGPoint:showPosition];

            //显示

            if (show) {

                

                positionAni.values = @[value1, value2, value3, value4];

                //设置 旋转的路径

                rotationAni.values = @[@0, @(M_PI * 2), @(M_PI * 4), @(M_PI * 2)];

                btn.center = showPosition;

            }else{

                // 隐藏

                //设置平移动画的路径

                positionAni.values = @[value4, value3, value2, value1];

                //设置 旋转的路径

                rotationAni.values = @[@0, @(M_PI * 2), @0, @(-M_PI * 2)];

                btn.center = self.mainBtn.center;

            }

            //添加子动画

            group.animations = @[positionAni, rotationAni];

            //执行组动画

            [btn.layer addAnimation:group forKey:nil];

            

        }

        

        

     

    }

    @end

    CZBottomMenu.xib

     

    结果

  • 相关阅读:
    Java核心类库——线程Thread
    xml基本写法和dtd schema的用法,JAVA读写XML
    Java核心类库——文件和文件夹的管理File类
    使用文件依赖项缓存页输出
    根据 HTTP 标头缓存页的版本
    缓存 ASP.NET 页的某些部分
    根据请求浏览器缓存页的版本
    根据自定义字符串缓存页的版本
    缓存页的多个版本
    阿拉的宣告~~~
  • 原文地址:https://www.cnblogs.com/Lu2015-10-03/p/5191359.html
Copyright © 2011-2022 走看看