LoginViewController.h
#import <UIKit/UIKit.h>
@interface LoginViewController : UIViewController
@property (nonatomic,strong) UIImageView * LoginImage; // logo图
@property (nonatomic,strong) UILabel * LoginWord; // logo下面的文字
@property (nonatomic,strong) UIButton * GetButton; // get按钮
@property (nonatomic,strong) UITextField * userTextField; // 账号输入框
@property (nonatomic,strong) UITextField * passwordTextField; // 密码输入框
@property (nonatomic,strong) UIButton * LoginButton; // login按钮
@property (nonatomic,strong) UIView * HUDView; // 登录时加一个看不见的蒙版，让控件不能再被点击
@property (nonatomic,strong) UIView * LoginAnimView; // 执行登录按钮动画的view (动画效果不是按钮本身，而是这个view)
@property (nonatomic,strong) CAShapeLayer * shapeLayer; // 登录转圈的那条白线所在的layer
@property (nonatomic,strong) UIView * animView; // get按钮动画view
- (void)reloadView;
@end
LoginViewController.m
#import "LoginViewController.h"
#import "POP.h"
#import "Masonry.h"
#import "UIView+YYExtension.h"
#import "ViewController.h"
#import "LoginTranslation.h"
#define UIColorFromRGB(rgbValue) \
[UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]
#define BG_COLOR UIColorFromRGB(0xefeff4)
#define ScreenW [UIScreen mainScreen].bounds.size.width
#define ScreenH [UIScreen mainScreen].bounds.size.height
#define ButtonColor [UIColor colorWithRed:156/255.0 green:197/255.0 blue:251/255.0 alpha:1.0]
static CGFloat const springSpeed = 6.0;
static CGFloat const springBounciness = 16.0;
@interface LoginViewController () <CAAnimationDelegate, UIViewControllerTransitioningDelegate>
// 转场动画管理对象()
@property (nonatomic,strong) LoginTranslation * loginTranslation;
@end
@implementation LoginViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self SetupUIComponent];
}
#pragma mark - 懒加载
- (LoginTranslation *)loginTranslation {
if (!_loginTranslation)
{
_loginTranslation = [[LoginTranslation alloc] init];
}
return _loginTranslation;
}
- (UIImageView *)LoginImage {
if (!_LoginImage)
{
_LoginImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"logo.png"]];
[self.view addSubview:_LoginImage];
}
return _LoginImage;
}
- (UILabel *)LoginWord {
if (!_LoginWord)
{
_LoginWord = [[UILabel alloc] init];
[self.view addSubview:_LoginWord];
_LoginWord.font = [UIFont fontWithName:@"TimesNewRomanPS-ItalicMT" size:34.0f];
_LoginWord.textColor = [UIColor blackColor];
_LoginWord.text = @"YY Anim Demo";
[_LoginWord sizeToFit];
}
return _LoginWord;
}
- (UIButton *)GetButton {
if (!_GetButton)
{
_GetButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.view addSubview:_GetButton];
[_GetButton.layer setMasksToBounds:YES];
[_GetButton.layer setCornerRadius:22.0];
[_GetButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[_GetButton setTitle:@"GET" forState:UIControlStateNormal];
_GetButton.backgroundColor = ButtonColor;
[_GetButton addTarget:self action:@selector(GetButtonClick) forControlEvents:UIControlEventTouchUpInside];
}
return _GetButton;
}
- (UITextField *)userTextField {
if(_userTextField == nil) {
_userTextField = [[UITextField alloc] init];
_userTextField.font = [UIFont systemFontOfSize:15];
_userTextField.placeholder = @"Username";
_userTextField.alpha = 0.0;
[_userTextField setValue:UIColorFromRGB(0xcccccc) forKeyPath:@"_placeholderLabel.textColor"];
[_userTextField setValue:[UIFont systemFontOfSize:15.0] forKeyPath:@"_placeholderLabel.font"];
_userTextField.textAlignment = NSTextAlignmentCenter;
_userTextField.keyboardType = UIKeyboardTypePhonePad;
_userTextField.clearButtonMode = UITextFieldViewModeWhileEditing;
_userTextField.tintColor = ButtonColor;
UIView *seperatorLine = [[UIView alloc] init];
[_userTextField addSubview:seperatorLine];
seperatorLine.backgroundColor = UIColorFromRGB(0xe1e1e1);
[seperatorLine mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.bottom.mas_equalTo(_userTextField);
make.height.mas_equalTo(1.5);
}];
[self.view addSubview:_userTextField];
_userTextField.frame = CGRectMake(ScreenW * 0.2, ScreenH * 0.7-(ScreenH * 0.3 - 44) * 0.5 - 75 + 25, ScreenW * 0.6, 50);
}
return _userTextField;
}
- (UITextField *)passwordTextField {
if(_passwordTextField == nil) {
_passwordTextField = [[UITextField alloc] init];
_passwordTextField.font = [UIFont systemFontOfSize:15];
_passwordTextField.borderStyle = UITextBorderStyleNone;
_passwordTextField.placeholder = @"Password";
_passwordTextField.alpha = 0.0;
[_passwordTextField setValue:UIColorFromRGB(0xcccccc) forKeyPath:@"_placeholderLabel.textColor"];
[_passwordTextField setValue:[UIFont systemFontOfSize:15.0] forKeyPath:@"_placeholderLabel.font"];
_passwordTextField.textAlignment = NSTextAlignmentCenter;
_passwordTextField.secureTextEntry = YES;
_passwordTextField.tintColor = ButtonColor;
UIView *seperatorLine = [[UIView alloc] init];
[_passwordTextField addSubview:seperatorLine];
seperatorLine.backgroundColor = UIColorFromRGB(0xe1e1e1);
[seperatorLine mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.bottom.mas_equalTo(_passwordTextField);
make.height.mas_equalTo(1.5);
}];
[self.view addSubview:_passwordTextField];
_passwordTextField.frame = CGRectMake(ScreenW * 0.2, ScreenH * 0.7 - (ScreenH * 0.3 - 44) * 0.5 - 75 + 10 + 50 + 25, ScreenW * 0.6, 50);
}
return _passwordTextField;
}
- (UIButton *)LoginButton {
if (!_LoginButton){
_LoginButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.view addSubview:_LoginButton];
_LoginButton.frame = CGRectMake(0, 0, 0, 0);
_LoginButton.hidden = YES;
[_LoginButton.layer setMasksToBounds:YES];
[_LoginButton.layer setCornerRadius:5.0];
[_LoginButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[_LoginButton setTitle:@"LOGIN" forState:UIControlStateNormal];
_LoginButton.backgroundColor = ButtonColor;
[_LoginButton addTarget:self action:@selector(LoginButtonClick) forControlEvents:UIControlEventTouchUpInside];
}
return _LoginButton;
}
/** 初始化UI */
- (void)SetupUIComponent {
self.view.backgroundColor = BG_COLOR;
// 文字布局
self.LoginWord.yy_centerX = self.view.yy_centerX;
self.LoginWord.yy_y = self.view.yy_centerY-self.LoginWord.yy_height;
// logo布局
CGFloat LoginImageWH = ScreenW * 0.25;
self.LoginImage.frame = CGRectMake((ScreenW - LoginImageWH) * 0.5, CGRectGetMinY(self.LoginWord.frame) - 40 -LoginImageWH, LoginImageWH, LoginImageWH);
// 按钮布局
CGFloat GetButtonW = ScreenW * 0.4;
CGFloat GetButtonH = 44;
self.GetButton.frame = CGRectMake((ScreenW - GetButtonW) * 0.5, ScreenH * 0.7, GetButtonW, GetButtonH);
}
#pragma mark - get按钮点击事件——执行动画
- (void)GetButtonClick {
/**
* 动画的思路：
* 1、造一个view来执行动画，看上去就像get按钮本身在形变移动，其实是这个view
* 2、改变动画view的背景颜色，变色的过程是整个动画效果执行的过程
* 3、让按钮变宽
* 4、变宽完成后，变高
* 5、变高完成后，同步执行以下四步
* 5.0、让账号密码按钮出现
* 5.1、让Login按钮出现
* 5.2、移动这个view，带弹簧效果
* 5.3、移动logo图片，带弹簧效果
* 5.4、移动logo文字，带弹簧效果
*/
// 1、get按钮动画的view
UIView * animView = [[UIView alloc] init];
self.animView = animView;
animView = [[UIView alloc] initWithFrame:self.GetButton.frame];
animView.layer.cornerRadius = 10;
animView.frame = self.GetButton.frame;
animView.backgroundColor = self.GetButton.backgroundColor;
[self.view addSubview:animView];
self.GetButton.hidden = YES;
self.LoginButton.hidden = NO;
// 2、get背景颜色
CABasicAnimation * changeColor1 = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
changeColor1.fromValue = (__bridge id)ButtonColor.CGColor;
changeColor1.toValue = (__bridge id)[UIColor whiteColor].CGColor;
changeColor1.duration = 0.8f;
changeColor1.beginTime = CACurrentMediaTime();
changeColor1.fillMode = kCAFillModeForwards;
changeColor1.removedOnCompletion = false;
[animView.layer addAnimation:changeColor1 forKey:changeColor1.keyPath];
// 3、get按钮变宽
CABasicAnimation * anim1 = [CABasicAnimation animationWithKeyPath:@"bounds.size.width"];
anim1.fromValue = @(CGRectGetWidth(animView.bounds));
anim1.toValue = @(ScreenW * 0.8);
anim1.duration = 0.1;
anim1.beginTime = CACurrentMediaTime();
anim1.fillMode = kCAFillModeForwards;
anim1.removedOnCompletion = false;
[animView.layer addAnimation:anim1 forKey:anim1.keyPath];
// 4、get按钮变高
CABasicAnimation *anim2 = [CABasicAnimation animationWithKeyPath:@"bounds.size.height"];
anim2.fromValue = @(CGRectGetHeight(animView.bounds));
anim2.toValue = @(ScreenH * 0.3);
anim2.duration = 0.1;
anim2.beginTime = CACurrentMediaTime() + 0.1;
anim2.fillMode = kCAFillModeForwards;
anim2.removedOnCompletion = false;
anim2.delegate = self; // 变高完成，给它加个阴影
[animView.layer addAnimation:anim2 forKey:anim2.keyPath];
// 5.0、账号密码按钮出现
self.userTextField.alpha = 0.0;
self.passwordTextField.alpha = 0.0;
[UIView animateWithDuration:0.4 delay:0.2 options:UIViewAnimationOptionCurveEaseInOut animations:^{
self.userTextField.alpha = 1.0;
self.passwordTextField.alpha = 1.0;
} completion:^(BOOL finished) {
}];
// 5.1、login按钮出现动画
self.LoginButton.yy_centerX = ScreenW * 0.5;
self.LoginButton.yy_centerY = ScreenH * 0.7 + 44 + (ScreenH * 0.3 - 44) * 0.5 - 75;
CABasicAnimation * animLoginBtn = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
animLoginBtn.fromValue = [NSValue valueWithCGSize:CGSizeMake(0, 0)];
animLoginBtn.toValue = [NSValue valueWithCGSize:CGSizeMake(ScreenW * 0.5, 44)];
animLoginBtn.duration = 0.4;
animLoginBtn.beginTime = CACurrentMediaTime() + 0.2;
animLoginBtn.fillMode = kCAFillModeForwards;
animLoginBtn.removedOnCompletion = false;
animLoginBtn.delegate = self; // 在代理方法(动画完成回调)里，让按钮真正的宽高改变，而不仅仅是它的layer,否则看得到点不到
[self.LoginButton.layer addAnimation:animLoginBtn forKey:animLoginBtn.keyPath];
// 5.2、按钮移动动画
POPSpringAnimation * anim3 = [POPSpringAnimation animationWithPropertyNamed:kPOPViewCenter];
anim3.fromValue = [NSValue valueWithCGRect:CGRectMake(animView.yy_centerX, animView.yy_centerY, animView.yy_width, animView.yy_height)];
anim3.toValue = [NSValue valueWithCGRect:CGRectMake(animView.yy_centerX, animView.yy_centerY-75, animView.yy_width, animView.yy_height)];
anim3.beginTime = CACurrentMediaTime() + 0.2;
anim3.springBounciness = springBounciness;
anim3.springSpeed = springSpeed;
[animView pop_addAnimation:anim3 forKey:nil];
// 5.3、图片移动动画
POPSpringAnimation * anim4 = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];
anim4.fromValue = [NSValue valueWithCGRect:CGRectMake(self.LoginImage.yy_x, self.LoginImage.yy_y, self.LoginImage.yy_width, self.LoginImage.yy_height)];
anim4.toValue = [NSValue valueWithCGRect:CGRectMake(self.LoginImage.yy_x, self.LoginImage.yy_y-75, self.LoginImage.yy_width, self.LoginImage.yy_height)];
anim4.beginTime = CACurrentMediaTime()+0.2;
anim4.springBounciness = springBounciness;
anim4.springSpeed = springSpeed;
[self.LoginImage pop_addAnimation:anim4 forKey:nil];
// 5.4、文字移动动画
POPSpringAnimation *anim5 = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];
anim5.fromValue = [NSValue valueWithCGRect:CGRectMake(self.LoginWord.yy_x, self.LoginWord.yy_y, self.LoginWord.yy_width, self.LoginWord.yy_height)];
anim5.toValue = [NSValue valueWithCGRect:CGRectMake(self.LoginWord.yy_x, self.LoginWord.yy_y-75, self.LoginWord.yy_width, self.LoginWord.yy_height)];
anim5.beginTime = CACurrentMediaTime()+0.2;
anim5.springBounciness = springBounciness;
anim5.springSpeed = springSpeed;
[self.LoginWord pop_addAnimation:anim5 forKey:nil];
}
#pragma mark - 动画代理
/** 动画执行结束回调 */
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
if([((CABasicAnimation *)anim).keyPath isEqualToString:@"bounds.size.height"]) {
// 阴影颜色
self.animView.layer.shadowColor = [UIColor redColor].CGColor;
// 阴影的透明度
self.animView.layer.shadowOpacity = 0.8f;
// 阴影的圆角
self.animView.layer.shadowRadius = 5.0f;
// 阴影偏移量
self.animView.layer.shadowOffset = CGSizeMake(1,1);
self.userTextField.alpha = 1.0;
self.passwordTextField.alpha = 1.0;
} else if ([((CABasicAnimation *)anim).keyPath isEqualToString:@"bounds.size"]) {
self.LoginButton.bounds = CGRectMake(ScreenW * 0.5, ScreenH * 0.7 + 44 + (ScreenH * 0.3 - 44) * 0.5 - 75, ScreenW * 0.5, 44);
}
}
#pragma mark - login按钮点击事件——执行动画
- (void)LoginButtonClick {
// HUDView，盖住view，以屏蔽掉点击事件
self.HUDView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ScreenW, ScreenH)];
[[UIApplication sharedApplication].keyWindow addSubview:self.HUDView];
self.HUDView.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.0];
// 执行登录按钮转圈动画的view
self.LoginAnimView = [[UIView alloc] initWithFrame:self.LoginButton.frame];
self.LoginAnimView.layer.cornerRadius = 10;
self.LoginAnimView.layer.masksToBounds = YES;
self.LoginAnimView.frame = self.LoginButton.frame;
self.LoginAnimView.backgroundColor = self.LoginButton.backgroundColor;
[self.view addSubview:self.LoginAnimView];
self.LoginButton.hidden = YES;
// 把view从宽的样子变圆
CGPoint centerPoint = self.LoginAnimView.center;
CGFloat radius = MIN(self.LoginButton.frame.size.width, self.LoginButton.frame.size.height);
[UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
self.LoginAnimView.frame = CGRectMake(0, 0, radius, radius);
self.LoginAnimView.center = centerPoint;
self.LoginAnimView.layer.cornerRadius = radius/2;
self.LoginAnimView.layer.masksToBounds = YES;
}completion:^(BOOL finished) {
// 给圆加一条不封闭的白色曲线
self.shapeLayer = [[CAShapeLayer alloc] init];
self.shapeLayer.lineWidth = 1.5;
self.shapeLayer.strokeColor = [UIColor whiteColor].CGColor;
self.shapeLayer.fillColor = self.LoginButton.backgroundColor.CGColor;
self.shapeLayer.frame = CGRectMake(0, 0, radius, radius);
UIBezierPath * path = [[UIBezierPath alloc] init];
[path addArcWithCenter:CGPointMake(radius/2, radius/2) radius:(radius/2 - 5) startAngle:0 endAngle:M_PI_2 * 2 clockwise:YES];
self.shapeLayer.path = path.CGPath;
[self.LoginAnimView.layer addSublayer:self.shapeLayer];
// 让圆转圈，实现"加载中"的效果
CABasicAnimation * baseAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
baseAnimation.duration = 0.4;
baseAnimation.fromValue = @(0);
baseAnimation.toValue = @(2 * M_PI);
baseAnimation.repeatCount = MAXFLOAT;
[self.LoginAnimView.layer addAnimation:baseAnimation forKey:nil];
// 开始登录
[self doLogin];
}];
}
/** 模拟登录 */
- (void)doLogin {
// 延时，模拟网络请求的延时
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
if ([self.userTextField.text isEqualToString:@""] || [self.passwordTextField.text isEqualToString:@""]) {
// 登录失败
[self loginFail];
} else {
// 登录成功
[self loginSuccess];
}
});
}
/** 登录成功 */
- (void)loginSuccess {
// 移除蒙版
[self.HUDView removeFromSuperview];
// 跳转到另一个控制器
ViewController * vc = [[ViewController alloc] init];
vc.transitioningDelegate = self;
[self presentViewController:vc animated:YES completion:nil];
}
/** 登录失败 */
- (void)loginFail {
// 把蒙版、动画view等隐藏，把真正的login按钮显示出来
self.LoginButton.hidden = NO;
[self.HUDView removeFromSuperview];
[self.LoginAnimView removeFromSuperview];
[self.LoginAnimView.layer removeAllAnimations];
// 给按钮添加左右摆动的效果(路径动画)
// CABasicAnimation是从一个值到另一个值，关键帧动画CAKeyframeAnimation是值变化的数组
CAKeyframeAnimation * keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position"];
CGPoint point = self.LoginAnimView.layer.position;
keyFrame.values = @[[NSValue valueWithCGPoint:CGPointMake(point.x, point.y)],
[NSValue valueWithCGPoint:CGPointMake(point.x - 10, point.y)],
[NSValue valueWithCGPoint:CGPointMake(point.x + 10, point.y)],
[NSValue valueWithCGPoint:CGPointMake(point.x - 10, point.y)],
[NSValue valueWithCGPoint:CGPointMake(point.x + 10, point.y)],
[NSValue valueWithCGPoint:CGPointMake(point.x - 10, point.y)],
[NSValue valueWithCGPoint:CGPointMake(point.x + 10, point.y)],
[NSValue valueWithCGPoint:point]];
// timingFunction意思是动画执行的效果,kCAMediaTimingFunctionEaseInEaseOut表示淡入淡出
keyFrame.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
keyFrame.duration = 0.5f;
[self.LoginButton.layer addAnimation:keyFrame forKey:keyFrame.keyPath];
}
/** 点击退回键盘 */
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[self.view endEditing:YES];
}
#pragma mark UIViewControllerTransitioningDelegate(转场动画代理)
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
self.loginTranslation.doLogin = NO;
return self.loginTranslation;
}
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {
self.loginTranslation.doLogin = YES;
// 需要返回一个遵守了这个代理的对象，需要新建一个类遵守这个代理，实现两个代理方法。
return self.loginTranslation;
}
/** 移除并置空所有控件，重新生成控件，对于防止内存泄漏有好处 */
- (void)reloadView {
int i = [[NSString stringWithFormat:@"%lu",(self.view.subviews.count-1)] intValue];
for (; i >= 0; i--)
{
UIView *subView = self.view.subviews[i];
[subView removeFromSuperview];
subView = nil;
}
self.LoginImage = nil;
self.LoginWord = nil;
self.GetButton = nil;
self.LoginButton = nil;
self.HUDView = nil;
self.LoginAnimView = nil;
self.shapeLayer = nil;
self.animView = nil;
self.userTextField = nil;
self.passwordTextField = nil;
[self SetupUIComponent];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
LoginTranslation.h
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface LoginTranslation : NSObject <UIViewControllerAnimatedTransitioning>
/** 登录或注销 YES:登录 */
@property (nonatomic,assign) BOOL doLogin;
@end
LoginTranslation.m
#import "LoginTranslation.h"
#import "LoginViewController.h"
#import "ViewController.h"
#import "POP.h"
#import "UIView+YYExtension.h"
#define ScreenW [UIScreen mainScreen].bounds.size.width
#define ScreenH [UIScreen mainScreen].bounds.size.height
@interface LoginTranslation () <CAAnimationDelegate>
// 做弧线运动的那个圆
@property (strong, nonatomic) UIView * circularAnimView;
@end
@implementation LoginTranslation
// 转场时间
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext {
return 1.0;
}
// 转场动画
- (void)animateTransition:(id)transitionContext {
if (self.doLogin)// 登录转场动画
{
// transitionContext:转场上下文
// 转场过程中显示的view，所有动画控件都应该加在这上面
__block UIView * containerView = [transitionContext containerView];
// 转场去的控制器
ViewController * toVC = (ViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
// 转场来的控制器
LoginViewController * fromVC = (LoginViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
// 1、fromVC背景变白 (fromVC.view默认已经加到了containerView中，所以不用再添加)
[UIView animateWithDuration:0.15 animations:^{
fromVC.view.backgroundColor = [UIColor whiteColor];
}completion:^(BOOL finished) {
[fromVC.view removeFromSuperview];
}];
// 2、账号密码输入框消失
[containerView addSubview:fromVC.userTextField];
[containerView addSubview:fromVC.passwordTextField];
[UIView animateWithDuration:0.1 animations:^{
fromVC.userTextField.alpha = 0.0;
fromVC.passwordTextField.alpha = 0.0;
}];
// 3、logo图片移动消失
[containerView addSubview:fromVC.LoginImage];
[UIView animateWithDuration:0.15 delay:0.15 options:UIViewAnimationOptionCurveEaseInOut animations:^{
fromVC.LoginImage.alpha = 0.0;
} completion:^(BOOL finished) {
}];
// 4、logo文字缩小、移动
[containerView addSubview:fromVC.LoginWord];
CGFloat proportion = toVC.navWord.yy_width / fromVC.LoginWord.yy_width;
CABasicAnimation * LoginWordScale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
LoginWordScale.fromValue = [NSNumber numberWithFloat:1.0];
LoginWordScale.toValue = [NSNumber numberWithFloat:proportion];
LoginWordScale.duration = 0.4;
LoginWordScale.beginTime = CACurrentMediaTime()+0.15;
LoginWordScale.removedOnCompletion = NO;
LoginWordScale.fillMode = kCAFillModeForwards;
[fromVC.LoginWord.layer addAnimation:LoginWordScale forKey:LoginWordScale.keyPath];
CGPoint newPosition = [toVC.view convertPoint:toVC.navWord.center fromView:toVC.navView];
[UIView animateWithDuration:0.4 delay:0.15 options:UIViewAnimationOptionCurveEaseInOut animations:^{
fromVC.LoginWord.yy_centerX = newPosition.x;
fromVC.LoginWord.yy_centerY = newPosition.y;
} completion:^(BOOL finished) {
}];
// 5、圆(登录加载的那个圆)的移动，因为登录页面的那个圆有正在动的sublayer，所以这里新建了个圆来做动画
UIView * circularAnimView = [[UIView alloc] initWithFrame:fromVC.LoginAnimView.frame];
self.circularAnimView = circularAnimView;
circularAnimView.layer.cornerRadius = circularAnimView.yy_width * 0.5;
circularAnimView.layer.masksToBounds = YES;
circularAnimView.frame = fromVC.LoginAnimView.frame;
circularAnimView.backgroundColor = fromVC.LoginAnimView.backgroundColor;
self.circularAnimView = circularAnimView;
[containerView addSubview:circularAnimView];
[fromVC.LoginAnimView removeFromSuperview];
CGFloat bntSize = 44;
fromVC.LoginAnimView.layer.cornerRadius = bntSize * 0.5;
CGFloat originalX = toVC.view.yy_width - bntSize - 15;
CGFloat originalY = toVC.view.yy_height - bntSize - 15 - 49;
// CGContextRef，CGPath和UIBezierPath。本质上都是一样的，都是使用Quartz来绘画。只不过把绘图操作暴露在不同的API层面上，在具体实现上，当然也会有一些细小的差别。
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, (circularAnimView.yy_x + circularAnimView.yy_width * 0.5), (circularAnimView.yy_y + circularAnimView.yy_height * 0.5));
CGPathAddQuadCurveToPoint(path, NULL, ScreenW * 0.9, circularAnimView.yy_y + circularAnimView.yy_height, (originalX + circularAnimView.yy_width * 0.5), (originalY + circularAnimView.yy_height * 0.5));
CAKeyframeAnimation * animate = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animate.delegate = self;
animate.duration = 0.4;
animate.beginTime = CACurrentMediaTime()+0.15;
animate.fillMode = kCAFillModeForwards;
animate.repeatCount = 0;
animate.path = path;
animate.removedOnCompletion = NO;
CGPathRelease(path);
[circularAnimView.layer addAnimation:animate forKey:@"circleMoveAnimation"];
// 导航栏出现
UIView * navView = [[UIView alloc] init];
navView.frame = toVC.navView.frame;
navView.backgroundColor = toVC.navView.backgroundColor;
[containerView insertSubview:navView atIndex:1];
navView.alpha = 0.0;
[UIView animateWithDuration:0.6 delay:0.15 options:UIViewAnimationOptionCurveEaseInOut animations:^{
navView.alpha = 1.0;
} completion:^(BOOL finished) {
}];
// 背景出现、移动
UIImageView * backImage = [[UIImageView alloc] init];
backImage.image = toVC.backImage.image;
backImage.frame = toVC.backImage.frame;
[containerView insertSubview:backImage atIndex:1];
backImage.alpha = 0.0;
backImage.yy_y += 100;
POPSpringAnimation * backImageMove = [POPSpringAnimation animationWithPropertyNamed:kPOPViewCenter];
backImageMove.fromValue = [NSValue valueWithCGRect:CGRectMake(backImage.yy_centerX, backImage.yy_centerY, backImage.yy_width, toVC.backImage.yy_height)];
backImageMove.toValue = [NSValue valueWithCGRect:CGRectMake(backImage.yy_centerX, backImage.yy_centerY-100, backImage.yy_width, backImage.yy_height)];
backImageMove.beginTime = CACurrentMediaTime()+0.15+0.2;
backImageMove.springBounciness = 5.0;
backImageMove.springSpeed = 10.0;
[backImage pop_addAnimation:backImageMove forKey:nil];
[UIView animateWithDuration:0.6 delay:0.15 + 0.2 options:UIViewAnimationOptionCurveEaseInOut animations:^{
backImage.alpha = 1.0;
} completion:^(BOOL finished) {
[self cleanContainerView:containerView]; // 移除所有子控件
[containerView addSubview:toVC.view]; // 将目标控制器的vc添加上去
[transitionContext completeTransition:YES];// 标志转场结束
containerView = nil;
[fromVC reloadView]; // 登录界面重载UI
}];
}
else // 退出登录转场动画
{
// transitionContext:转场上下文
// 转场过程中显示的view，所有动画控件都应该加在这上面
UIView * containerView = [transitionContext containerView];
// 转场的来源控制器
LoginViewController * toVC = (LoginViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
// 转场去往的控制器
ViewController * fromVC = (ViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
// 做一个淡入淡出的效果
toVC.view.alpha = 0;
[containerView addSubview:toVC.view];
[UIView animateWithDuration:1.0 animations:^{
fromVC.view.alpha = 0;
} completion:^(BOOL finished) {
}];
[UIView animateWithDuration:0.6 delay:0.4 options:UIViewAnimationOptionCurveEaseInOut animations:^{
toVC.view.alpha = 1;
} completion:^(BOOL finished) {
[transitionContext completeTransition:YES];
}];
}
}
/** 移除containerView的子控件 */
- (void)cleanContainerView:(UIView *)containerView {
int i = [[NSString stringWithFormat:@"%lu",(containerView.subviews.count-1)] intValue];
for (; i >= 0; i--) {
UIView * subView = containerView.subviews[i];
[subView removeFromSuperview];
}
}
/** 核心动画动画代理 */
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
if ([self.circularAnimView.layer animationForKey:@"circleMoveAnimation"] == anim) {
/** 这里是在做加号按钮内部的白色加号的伸展开的效果 */
//画线
CGRect rect = self.circularAnimView.frame;
CGPoint centerPoint = CGPointMake(rect.size.width*0.5, rect.size.height*0.5);
//贝瑟尔线
UIBezierPath *path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:centerPoint];
[path1 addLineToPoint:CGPointMake(rect.size.width*0.5, rect.size.height*0.25)];
UIBezierPath *path2 = [UIBezierPath bezierPath];
[path2 moveToPoint:centerPoint];
[path2 addLineToPoint:CGPointMake(rect.size.width*0.25, rect.size.height*0.5)];
UIBezierPath *path3 = [UIBezierPath bezierPath];
[path3 moveToPoint:centerPoint];
[path3 addLineToPoint:CGPointMake(rect.size.width*0.5, rect.size.height*0.75)];
UIBezierPath *path4 = [UIBezierPath bezierPath];
[path4 moveToPoint:centerPoint];
[path4 addLineToPoint:CGPointMake(rect.size.width*0.75, rect.size.height*0.5)];
//ShapeLayer
CAShapeLayer *shape1 = [self makeShapeLayerWithPath:path1 lineWidth:rect.size.width*0.07];
[self.circularAnimView.layer addSublayer:shape1];
CAShapeLayer *shape2 = [self makeShapeLayerWithPath:path2 lineWidth:rect.size.width*0.07];
[self.circularAnimView.layer addSublayer:shape2];
CAShapeLayer *shape3 = [self makeShapeLayerWithPath:path3 lineWidth:rect.size.width*0.07];
[self.circularAnimView.layer addSublayer:shape3];
CAShapeLayer *shape4 = [self makeShapeLayerWithPath:path4 lineWidth:rect.size.width*0.07];
[self.circularAnimView.layer addSublayer:shape4];
//动画
CABasicAnimation *checkAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
checkAnimation.duration = 0.25f;
checkAnimation.fromValue = @(0.0f);
checkAnimation.toValue = @(1.0f);
checkAnimation.delegate = self;
[shape1 addAnimation:checkAnimation forKey:@"checkAnimation"];
[shape2 addAnimation:checkAnimation forKey:@"checkAnimation"];
[shape3 addAnimation:checkAnimation forKey:@"checkAnimation"];
[shape4 addAnimation:checkAnimation forKey:@"checkAnimation"];
}
}
- (CAShapeLayer *)makeShapeLayerWithPath:(UIBezierPath *)path lineWidth:(CGFloat)lineWidth {
CAShapeLayer * shape=[CAShapeLayer layer];
shape.lineWidth = lineWidth;
shape.fillColor = [UIColor clearColor].CGColor;
shape.strokeColor = [UIColor whiteColor].CGColor;
shape.lineCap = kCALineCapRound;
shape.lineJoin = kCALineJoinRound;
shape.path = path.CGPath;
return shape;
}
@end
ViewController.h
#import <UIKit/UIKit.h>
#import "AddView.h"
@interface ViewController : UIViewController
@property (nonatomic,strong) UIView * navView; //导航栏
@property (nonatomic,strong) UILabel * navWord; //导航栏上面的文字
@property (nonatomic,strong) AddView * addView; //加号按钮
@property (nonatomic,strong) UIImageView * backImage; //背景
@end
ViewController.m
/*
如何生成一个动画让控件执行
现流行的方式主要有三种：
1、基本动画
2、核心动画
3、三方框架——POP框架(由Facebook开发)
1、控件的位置、大小等是不是真的发生了改变:
基本动画、pop动画:是给控件添加动画(一般也不会有用基本动画给layer添加动画的做法)，所有动画完成时，控件的属性已经改变;
核心动画:是给控件的图层(view.layer)添加动画，看似发生了位置大小的变化，实际上控件本身的属性并未改变。
基本动画
优势：代码简单，代码量少
劣势：功能相对单一
核心动画
优势：功能强大、流畅性好、连续几个动画之间的衔接度好。流畅主要是因为操作layer是轻量级的，不容易产生动画卡顿的感觉。
劣势：代码量大；容易写错(某些参数没有定义宏，写错了都不知道)；如有需要，还要手动在动画完成时将控件的属性同步修改了。
pop动画
优势：比核心动画代码要简单，最大的优势在于，容易做弹簧效果，所以很多有“Q弹”感觉的都用pop动画做
劣势：要在一个动画完成时开始另一个动画，pop动画不擅长，主要因为它的动画执行时间由"速度"和"弹性系数"两个参数控制，不好直观判断动画执行了多久，而如果在pop动画完成回调的block里提交下一个动画，会不连贯(亲测，原因不详)。
1、点击了GET按钮，logo图和logo文字上移
移动属于比较简单的操作，但这个移动效果具有弹簧效果，所以可以采用核心动画中的关键帧动画CAKeyframeAnimation，或者pop动画来实现，这里我用了pop，后面登录失败按钮左右摆动的动画，我用了CAKeyframeAnimation。
2、get按钮的变化
get按钮分别进行了变宽、变宽的同时圆角变小，然后变高，然后向上移动，整个过程颜色由初始颜色变白。由于这是N个动画，有同时执行的，有接着上一步执行的，所以我选择核心动画CABasicAnimation，更容易控制每个动画的执行时间、开始时间，容易衔接得流畅。
3、点击LOGIN，按钮转圈
点击了LOGIN，按钮先从宽变圆，然后给按钮添加一条半圆的白色圆弧线，然后让这个按钮开始旋转。
4、登录失败按钮抖动
这个效果跟pop动画移动后抖动的效果很类似，这里我选择用关键帧动画CAKeyframeAnimation做，它与CABasicAnimation略有不同，CABasicAnimation是从一个值到另一个值，CAKeyframeAnimation是值变化的数组。
1、LOGO图逐渐消失；
2、LOGO文字逐渐变小、上移至B中头部文字的位置；
3、A控制器的登录框消失、A控制器背景颜色变白；
4、转圈控件经过弧线运动到右下角，白色加号逐渐形成
5、B控制器背景图上移的动画。
*/
#import "ViewController.h"
#import "UIView+YYExtension.h"
#import "AddView.h"
#define ScreenW [UIScreen mainScreen].bounds.size.width
#define ScreenH [UIScreen mainScreen].bounds.size.height
@interface ViewController ()
@end
@implementation ViewController
#pragma mark - 懒加载
- (UIImageView *)backImage {
if (!_backImage) {
_backImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"backImg.jpg"]];
[self.view addSubview:_backImage];
_backImage.frame = CGRectMake(0, 0, ScreenW, ScreenH);
}
return _backImage;
}
- (UIView *)navView {
if (!_navView) {
_navView = [[UIView alloc] init];
[self.view addSubview:_navView];
_navView.backgroundColor = [UIColor whiteColor];
_navView.frame = CGRectMake(0, 0, ScreenW, 64);
}
return _navView;
}
- (UILabel *)navWord {
if (!_navWord) {
_navWord = [[UILabel alloc] init];
_navWord.font = [UIFont fontWithName:@"TimesNewRomanPS-ItalicMT" size:24.0f];
_navWord.textColor = [UIColor blackColor];
_navWord.text = @"YY Anim Demo";
_navWord.hidden = NO;
[_navWord sizeToFit];
}
return _navWord;
}
- (AddView *)addView
{
if (!_addView) {
CGFloat bntSize = 44;
_addView = [[AddView alloc] initWithFrame:CGRectMake(0, 0, bntSize, bntSize)];
[self.view addSubview:_addView];
_addView.userInteractionEnabled = YES;
[_addView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(addViewClick)]];
_addView.frame = CGRectMake(ScreenW - 15 - bntSize, ScreenH - 15 - 49 - bntSize, bntSize, bntSize);
}
return _addView;
}
- (void)viewDidLoad {
[super viewDidLoad];
[self setupUIComponent];
}
/** 初始化UI */
- (void)setupUIComponent {
self.backImage.hidden = NO;
self.navView.hidden = NO;
self.addView.hidden = NO;
[self.navView addSubview:self.navWord];
self.navWord.yy_centerX = self.navView.yy_centerX;
self.navWord.yy_centerY = self.navView.yy_centerY + 10;
}
/** 点击加号按钮 */
- (void)addViewClick {
//退回登录页面
[self dismissViewControllerAnimated:YES completion:nil];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
AddView.m
#import "AddView.h"
#define MAIN_COLOR [UIColor colorWithRed:156/255.0 green:197/255.0 blue:251/255.0 alpha:1.0]
@implementation AddView
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame])
{
self.backgroundColor = [UIColor clearColor];
}
return self;
}
- (void)drawRect:(CGRect)rect {
CGPoint center = CGPointMake(rect.size.width * 0.5,rect.size.height * 0.5);
UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:center radius:(rect.size.width * 0.5 - rect.size.width * 0.03) startAngle:0 endAngle:M_PI*2 clockwise:YES];
[MAIN_COLOR set];
// 填充：必须是一个完整的封闭路径,默认就会自动关闭路径
[path fill];
UIBezierPath * path1 = [UIBezierPath bezierPath];
path1.lineWidth = rect.size.width * 0.07;
[[UIColor whiteColor] set];
// 设置起点
[path1 moveToPoint:CGPointMake(rect.size.width * 0.25, rect.size.height * 0.5)];
// 添加一根线到某个点
[path1 addLineToPoint:CGPointMake(rect.size.width * 0.75, rect.size.height * 0.5)];
// 绘制路径
UIBezierPath * path2 = [UIBezierPath bezierPath];
path2.lineWidth = rect.size.width * 0.07;
[[UIColor whiteColor] set];
// 设置起点
[path2 moveToPoint:CGPointMake(rect.size.width * 0.5, rect.size.height * 0.25)];
// 添加一根线到某个点
[path2 addLineToPoint:CGPointMake(rect.size.width * 0.5, rect.size.height * 0.75)];
// 绘制路径
// [path2 stroke];
[self.layer addSublayer:[self makeShapeLayerWithPath:path1 lineWidth:path1.lineWidth]];
[self.layer addSublayer:[self makeShapeLayerWithPath:path2 lineWidth:path2.lineWidth]];
self.layer.shadowColor = MAIN_COLOR.CGColor;
//阴影的透明度
self.layer.shadowOpacity = 0.5f;
//阴影的圆角
self.layer.shadowRadius = 4.0f;
//阴影偏移量
self.layer.shadowOffset = CGSizeMake(0,0);
}
- (CAShapeLayer *)makeShapeLayerWithPath:(UIBezierPath *)path lineWidth:(CGFloat)lineWidth {
CAShapeLayer * shape = [CAShapeLayer layer];
shape.lineWidth = lineWidth;
shape.fillColor = [UIColor clearColor].CGColor;
shape.strokeColor = [UIColor whiteColor].CGColor;
shape.lineCap = kCALineCapRound;
shape.lineJoin = kCALineJoinRound;
shape.path = path.CGPath;
return shape;
}
@end
