iOS动画跳转菜单栏

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

iOS动画跳转菜单栏
iOS让push跳转动画像modal跳转动画那样效果
iOS13 适配总结
iOS13 适配总结
iOS中的跳转动画总结
Flutter实现类似iOS的模态跳转
iOS-动画相关
mac CATransition 动画
Android 记录一下ARouter跳转动画不生效的问题
iOS源码博文集锦6

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

屏幕快照 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动画跳转菜单栏
做这个小动画先要准备好一个小工具UIView+categroy；里面要设置好：X，Y，width，height，c...
iOS让push跳转动画像modal跳转动画那样效果
iOS让push跳转动画像modal跳转动画那样效果(从下往上推上来)，iOS核心动画有很多，转场啊，属性动画，基...
iOS13 适配总结
1、iOS 13中 presentViewController 模态动画，跳转问题修复 iOS 13之前 pres...
iOS13 适配总结
1、iOS 13中 presentViewController 模态动画，跳转问题修复 iOS 13之前 pres...
iOS中的跳转动画总结
不管任何App,对于跳转这个最基础的动画都是必须的，而iOS的转场动画不仅只是动画，还涉及层级、跳转限制、携带参数...
Flutter实现类似iOS的模态跳转
flutter页面跳转默认的动画为： Android：从底部弹出 (iOS - modal)iOS：从右侧弹出 (...
iOS-动画相关
本篇涵盖各种直播动画，跳转，过渡动画等. 1.分享iOS中实现navigationController全屏手势滑动...
mac CATransition 动画
macOS的CATransition 动画和iOS中的CATransition动画的用法也是差不多的。比如一个跳转...
Android 记录一下ARouter跳转动画不生效的问题
今天UI对我们说你们Android的跳转动画为什么没有IOS的好看，你们都是左右切换的。我心想这不就是一个跳转动画...
iOS源码博文集锦6
iOS精选源码一个多环条形联动的动画仿今日头条的菜单栏，可编辑菜单栏条目一款优秀的聆听夜空FM 源码仿汽...

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

相关文章