iOS动画跳转菜单栏

作者: 燃烧的木头 | 来源:发表于2016-12-20 16:34 被阅读78次

     今天整理的动画效果如下图：

屏幕快照 2016-12-20 下午4.23.57.png

做这个小动画先要准备好一个小工具UIView+categroy；里面要设置好：X，Y，width，height，centerX，centerY，size，origin。
然后要新建两个ViewController，一个给动画发生，另一个作为跳转后的落脚页面。
下面是简要的代码和总结。

//
// ViewController.m
// 666
//
// Created by 李昊林 on 2016/12/20.
// Copyright © 2016年李昊林. All rights reserved.
//

import "ViewController.h"

import "AViewController.h"

@interface ViewController ()

@end

@implementation ViewController

(void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self.view setBackgroundColor:[UIColor cyanColor]];

}

(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {

AViewController *A = [AViewController new];

[self presentViewController:A animated:NO completion:^{
[self removeFromParentViewController];
}];
}

//- (void)didReceiveMemoryWarning {
// [super didReceiveMemoryWarning];
// // Dispose of any resources that can be recreated.
//}

@end

项目总结：
1.在这个项目中-----在要跳转的控制器中的ViewDidLoad中去设置[UIView Animationg...动画效果是没有用的。因为在跳转到这个控制器的某一个时刻已经执行了VDL 这一个时刻要么已经在VDL所在的作用域里面用完了。要么就失效了。

解决方法：
1.在ViewWillAppear中去布局控件，提前把所放量改成0.01
2.在viewDidAppear去执行动画操作，

2.注意点：千万不要重写loadView的时候去什么都不做，，，要么去掉一个super 要么随便给它一个View
下面两句任选一：推荐选第一句。

(void)loadView {
// [super loadView];
// self.view = [UIView new];

}

要构造一个和绘图有关的btn 创建一个Btn类的时候其实已经有了系统默认的drawRect方法：
在drawrect的方法中画圆，ARCCenter参数指的是drawRect方法从属的空间的frame上的位置。

5.之前的一个思想误区：
自定义btn，并不是在initWithFrame：方法中去重新创建一个新的btn去返回这个btn，
而是在方法中去设置相应的属性，用self去掉对象方法。

6.设置锚点anchorPoint的作用就是来设置一个定点或者起始点，防止动画往两边延伸，或者是给动画一个定点。

//
// AViewController.m
// 666
//
// Created by 李昊林 on 2016/12/20.
// Copyright © 2016年李昊林. All rights reserved.
//

import "AViewController.h"

import "AView.h"

import "PersonalViewController.h"

define KCENTERX [UIScreen mainScreen].bounds.size.width * 0.5 - 64

define KCENTERY [UIScreen mainScreen].bounds.size.height * 0.5 - 64

@interface AViewController ()
@property (nonatomic, strong)UIButton *centerBtn;
@property (nonatomic, strong)UIButton *leftBtn1;
@property (nonatomic, strong)UIButton *leftBtn2;
@property (nonatomic, strong)UIButton *leftBtn3;
@property (nonatomic, strong)UIButton *rightBtn1;
@property (nonatomic, strong)UIButton *rightBtn2;
@property (nonatomic, strong)UIButton *rightBtn3;
@property (nonatomic, strong)AView *aView;

@end

@implementation AViewController

//- (UIButton *)centerBtn {
//
// if (_centerBtn!=nil) {
// _centerBtn = [[UIButton alloc]init];
// }
// return _centerBtn;
//}

(void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
self.view.backgroundColor = [UIColor cyanColor];
[self setupBtn];

}

(void)viewDidAppear:(BOOL)animated {

[super viewDidAppear:animated];

[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.9 initialSpringVelocity:10 options:UIViewAnimationOptionLayoutSubviews animations:^{
    self.centerBtn.transform = CGAffineTransformMakeScale(1.0, 1.0);
    
} completion:^(BOOL finished) {
    
}];

[UIView animateWithDuration:0.5 delay:0.2 usingSpringWithDamping:0.4 initialSpringVelocity:2 options:UIViewAnimationOptionLayoutSubviews animations:^{
    self.leftBtn1.transform = CGAffineTransformMakeScale(1.0, 1.0);
    self.rightBtn1.transform = CGAffineTransformMakeScale(1.0, 1.0);
    
} completion:^(BOOL finished) {
    
}];
[UIView animateWithDuration:0.5 delay:0.3 usingSpringWithDamping:0.4 initialSpringVelocity:2 options:UIViewAnimationOptionLayoutSubviews animations:^{
    self.leftBtn2.transform = CGAffineTransformMakeScale(1.0, 1.0);
    self.rightBtn2.transform = CGAffineTransformMakeScale(1.0, 1.0);
    
} completion:^(BOOL finished) {
    
}];
[UIView animateWithDuration:0.5 delay:0.4 usingSpringWithDamping:0.4 initialSpringVelocity:2 options:UIViewAnimationOptionLayoutSubviews animations:^{
    self.leftBtn3.transform = CGAffineTransformMakeScale(1.0, 1.0);
    self.rightBtn3.transform = CGAffineTransformMakeScale(1.0, 1.0);
    
} completion:^(BOOL finished) {
    
}];

[UIView animateWithDuration:2.0 delay:0.3 usingSpringWithDamping:0.4 initialSpringVelocity:2 options:UIViewAnimationOptionLayoutSubviews animations:^{
    self.aView.transform = CGAffineTransformMakeScale(20, 20);
    
} completion:^(BOOL finished) {
    
}];

}

(void)viewDidLoad {
[super viewDidLoad];

[self.view setBackgroundColor:[UIColor clearColor]];

}

(void)setupBtn {

//中间扩大的的圆形btn
AView *aView = [[AView alloc]initWithFrame:CGRectMake(140, 300, 100, 100)];
aView.transform = CGAffineTransformMakeScale(0.01, 0.01);
[aView setBackgroundColor:[UIColor clearColor]];
[self.view addSubview:aView];
self.aView = aView;

//中间btn
UIButton *centerBtn = [[UIButton alloc]initWithFrame:CGRectMake(KCENTERX, KCENTERY, 128, 128)];
[centerBtn setBackgroundImage:[UIImage imageNamed:@"501"] forState:UIControlStateNormal];
[centerBtn addTarget:self action:@selector(nextTVC) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:centerBtn];
self.centerBtn = centerBtn;

//左3
UIButton *leftBtn3 = [[UIButton alloc]initWithFrame:CGRectMake(KCENTERX, KCENTERY-168, 128, 128)];
[leftBtn3 setBackgroundImage:[UIImage imageNamed:@"554"] forState:UIControlStateNormal];
[self.view addSubview:leftBtn3];
self.leftBtn3 = leftBtn3;
//左2
UIButton *leftBtn2 = [[UIButton alloc]initWithFrame:CGRectMake(KCENTERX-47, KCENTERY-88, 128, 128)];
[leftBtn2 setBackgroundImage:[UIImage imageNamed:@"532"] forState:UIControlStateNormal];
[self.view addSubview:leftBtn2];
self.leftBtn2 = leftBtn2;
//左右1
UIButton *leftBtn1 = [[UIButton alloc]initWithFrame:CGRectMake(KCENTERX-94, KCENTERY, 128, 128)];
[leftBtn1 setBackgroundImage:[UIImage imageNamed:@"504"] forState:UIControlStateNormal];
[self.view addSubview:leftBtn1];
self.leftBtn1 = leftBtn1;

UIButton *rightBtn1 = [[UIButton alloc]initWithFrame:CGRectMake(KCENTERX+94, KCENTERY, 128, 128)];
[rightBtn1 setBackgroundImage:[UIImage imageNamed:@"507"] forState:UIControlStateNormal];
[self.view addSubview:rightBtn1];
self.rightBtn1 = rightBtn1;

//右2
UIButton *rightBtn2 = [[UIButton alloc]initWithFrame:CGRectMake(KCENTERX+48, KCENTERY+84, 128, 128)];
[rightBtn2 setBackgroundImage:[UIImage imageNamed:@"504"] forState:UIControlStateNormal];
[self.view addSubview:rightBtn2];
self.rightBtn2 = rightBtn2;
//右三
UIButton *rightBtn3 = [[UIButton alloc]initWithFrame:CGRectMake(KCENTERX, KCENTERY+168, 128, 128)];
[rightBtn3 setBackgroundImage:[UIImage imageNamed:@"560"] forState:UIControlStateNormal];
[self.view addSubview:rightBtn3];
self.rightBtn3 = rightBtn3;

//中间btn动画
centerBtn.transform = CGAffineTransformMakeScale(0.01, 0.01);
leftBtn1.transform = CGAffineTransformMakeScale(0.01, 0.01);
leftBtn2.transform = CGAffineTransformMakeScale(0.01, 0.01);
leftBtn3.transform = CGAffineTransformMakeScale(0.01, 0.01);
rightBtn1.transform = CGAffineTransformMakeScale(0.01, 0.01);
rightBtn2.transform = CGAffineTransformMakeScale(0.01, 0.01);
rightBtn3.transform = CGAffineTransformMakeScale(0.01, 0.01);
}
(void)nextTVC {

NSLog(@"nextTVC");

PersonalViewController *PVC = [[PersonalViewController alloc]init];


[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.9 initialSpringVelocity:1 options:UIViewAnimationOptionLayoutSubviews animations:^{
    self.centerBtn.transform = CGAffineTransformMakeRotation(M_PI_2);
    self.leftBtn1.transform = CGAffineTransformMakeScale(0.01, 0.01);
    self.leftBtn2.transform = CGAffineTransformMakeScale(0.01, 0.01);
    self.leftBtn3.transform = CGAffineTransformMakeScale(0.01, 0.01);
    self.rightBtn1.transform = CGAffineTransformMakeScale(0.01, 0.01);
    self.rightBtn2.transform = CGAffineTransformMakeScale(0.01, 0.01);
    self.rightBtn3.transform = CGAffineTransformMakeScale(0.01, 0.01);
    self.aView.transform = CGAffineTransformMakeScale(0.01, 0.01);
    
} completion:^(BOOL finished) {
    
    [self presentViewController:PVC animated:NO completion:^{
        
    }];
}];

}

@end
1.在这个项目中-----在要跳转的控制器中的ViewDidLoad中去设置[UIView Animationg...动画效果是没有用的。因为在跳转到这个控制器的某一个时刻已经执行了VDL 这一个时刻要么已经在VDL所在的作用域里面用完了。要么就失效了。

解决方法：
1.在ViewWillAppear中去布局控件，提前把所放量改成0.01
2.在viewDidAppear去执行动画操作，

2.注意点：  千万不要重写loadView的时候去什么都不做，，，要么去掉一个super  要么随便给它一个View
            下面两句任选一：  推荐选第一句。
        - (void)loadView {
             //  [super loadView];
           // self.view = [UIView new];

         }

3.  要构造一个和绘图有关的btn  创建一个Btn类的时候其实已经有了系统默认的drawRect方法：

import "PersonalViewController.h"

import "AViewController.h"

define KCENTERX [UIScreen mainScreen].bounds.size.width * 0.5

define KCENTERY [UIScreen mainScreen].bounds.size.height * 0.5

@interface PersonalViewController ()
@property (nonatomic, strong)UIScrollView *SV;
@end

@implementation PersonalViewController

(void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];

UIButton *BackBtn = [[UIButton alloc] initWithFrame:CGRectMake(10, 10, 30, 30)];
[BackBtn setImage:[UIImage imageNamed:@"返回"] forState:UIControlStateNormal];
[BackBtn addTarget:self action:@selector(Back:) forControlEvents:UIControlEventTouchUpInside];

UIScrollView *SV = [[UIScrollView alloc]initWithFrame:[UIScreen mainScreen].bounds];
SV.center = CGPointMake(KCENTERX, KCENTERY + 200);
SV.backgroundColor = [UIColor yellowColor];
[self.view addSubview:SV];
[self.view addSubview:BackBtn];
self.SV = SV;
[self setupSV];

}

(void)Back:(UIButton *)sender
{
[self presentViewController:[[AViewController alloc] init] animated:true completion:^{

}];
}
(void)setupSV {

//分界的上部分View
UIView *cyanView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width , KCENTERY - 200)];
cyanView.backgroundColor = [UIColor cyanColor];
[self.SV addSubview:cyanView];

UIButton *centerBtn = [[UIButton alloc]initWithFrame:CGRectMake(KCENTERX-64, KCENTERY-265, 128, 128)];
[centerBtn setBackgroundImage:[UIImage imageNamed:@"501"] forState:UIControlStateNormal];
[centerBtn addTarget:self action:@selector(myProfile) forControlEvents:UIControlEventTouchUpInside];
centerBtn.transform = CGAffineTransformMakeRotation(M_PI_2);
[self.SV addSubview:centerBtn];

//头像下面的label
UILabel *nameLabel = [[UILabel alloc]initWithFrame:CGRectMake(190, 185, 180, 20) ];
nameLabel.text = @"我的";
nameLabel.textColor = [UIColor whiteColor];
[self.SV addSubview:nameLabel];
}

(void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
[UIView animateWithDuration:0.5 animations:^{
self.SV.transform = CGAffineTransformMakeTranslation(0, -200);

}];
}

(void)viewDidLoad {
[super viewDidLoad];

[self.view setBackgroundColor:[UIColor cyanColor]];

}

(void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];

}

(void)myProfile {

}

@end

好了，此简书只为记录今天收获的一个特效页面，很酷炫的

iOS动画跳转菜单栏

import "ViewController.h"

import "AViewController.h"

import "AViewController.h"

import "AView.h"

import "PersonalViewController.h"

define KCENTERX [UIScreen mainScreen].bounds.size.width * 0.5 - 64

define KCENTERY [UIScreen mainScreen].bounds.size.height * 0.5 - 64

import "PersonalViewController.h"

import "AViewController.h"

define KCENTERX [UIScreen mainScreen].bounds.size.width * 0.5

define KCENTERY [UIScreen mainScreen].bounds.size.height * 0.5

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS动画 跳转菜单栏

import "ViewController.h"

import "AViewController.h"

import "AViewController.h"

import "AView.h"

import "PersonalViewController.h"

define KCENTERX [UIScreen mainScreen].bounds.size.width * 0.5 - 64

define KCENTERY [UIScreen mainScreen].bounds.size.height * 0.5 - 64

import "PersonalViewController.h"

import "AViewController.h"

define KCENTERX [UIScreen mainScreen].bounds.size.width * 0.5

define KCENTERY [UIScreen mainScreen].bounds.size.height * 0.5

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS动画跳转菜单栏