文章目录

缩放动画

旋转动画

重复动画、延时动画

缓冲动画

注意事项

登录页面动画效果

前言

在写项目时，生硬的出场显示动画让APP缺少了观感体验，基础的动画效果是必不可少的

主要围绕着[UIView animateWithDuration:2 animations:^{}];函数进行变化

位置动画

PositionAnimation可以实现View的移动，最简单的就是X轴，Y轴的移动。可以利用在上述[UIView animateWithDuration:2 animations:^{}];函数改变坐标即可；

- (void)viewWillAppear:(BOOL)animated{[super viewWillAppear:animated];[UIView animateWithDuration:2 animations:^{self.someView.frame = CGRectMake(self.someView.frame.origin.x, 400, self.someView.bounds.size.width, self.someView.bounds.size.height);}];
 }
 

平移效果：

透明度、颜色动画

依然配合[UIView animateWithDuration:2 animations:^{}];函数使用

透明度

- (void)viewWillAppear:(BOOL)animated{[super viewWillAppear:animated];[UIView animateWithDuration:2 animations:^{self.someView.alpha = 0.3;}];
 

颜色

 - (void)viewWillAppear:(BOOL)animated{[super viewWillAppear:animated];[UIView animateWithDuration:2 animations:^{self.greenSquare.backgroundColor = [UIColor brownColor];}];
 

颜色无限渐变效果

在上面利用透明度变化的基础上，配合使用一个定时器，无限重复上述动画效果即可

- (void)viewDidLoad {[super viewDidLoad];_signInView.loginButtonTimer = [NSTimer scheduledTimerWithTimeInterval:8 target:self selector:@selector(loginButtonTimerAutoRepeat) userInfo:nil repeats:YES];
 }- (void)loginButtonTimerAutoRepeat {[UIView animateWithDuration:4 animations:^{self.signInView.loginButtonImageView.backgroundColor = [UIColor colorWithRed:0 green:0.5 blue:0.6 alpha:0.3];} completion:^(BOOL finished) {[UIView animateWithDuration:4 animations:^{self.signInView.loginButtonImageView.backgroundColor = [UIColor colorWithRed:0 green:0.38 blue:0.9 alpha:0.95];}];}];}
 

渐变效果：

缩放动画

缩放动画可以让一个View的大小发生改变，按比例的放大缩小。

- (void)viewWillAppear:(BOOL)animated{[super viewWillAppear:animated];[UIView animateWithDuration:2 animations:^{//宽高缩放比；self.someView.transform = CGAffineTransformMakeScale(2, 3);}];
 }
 

区别：

比如已经对一个view缩放0.5，还想在这个基础上继续缩放0.5，那么就把这个view.transform作为第一个参数传到CGAffineTransformScale里面，缩放之后的view则变为0.25(CGAffineTransformScale(view.transofrm,0.5,0.5))。如果用CGAffineTransformMakeScale方法，那么这个view仍旧是缩放0.5(CGAffineTransformMakeScale(0.5,0.5))。

另外，想要将两个transform的属性都改变的话，需要这样:

alertView.transform = CGAffineTransformMakeScale(.25, .25);
 alertView.transform = CGAffineTransformTranslate(alertView.transform, 0, 600);
 

或者：

CGAffineTransform viewTransform = CGAffineTransformConcat(
 CGAffineTransformMakeScale(.25, .25), CGAffineTransformMakeTranslation(0, 600));
 alertView.transform = viewTransform;
 

无限放大缩小

同理，只需加上一个定时器即可

- (void)viewDidLoad {[super viewDidLoad];_signInView.loginArrowTimer = [NSTimer scheduledTimerWithTimeInterval:4 target:self selector:@selector(loginArrowTimerAutoRepeat) userInfo:nil repeats:YES];
 }- (void)loginArrowTimerAutoRepeat {[UIView animateWithDuration:2 animations:^{//宽高缩放比；self.signInView.loginArrowImageView.transform = CGAffineTransformMakeScale(0.5,0.5);} completion:^(BOOL finished) {[UIView animateWithDuration:2 animations:^{//宽高缩放比；self.signInView.loginArrowImageView.transform = CGAffineTransformIdentity;}];}];
 }
 

效果如下

旋转动画

只旋转一次：

- (void)spinGreenSquare{[UIView animateWithDuration:2 animations:^{self.greenSquare.transform = CGAffineTransformRotate(self.greenSquare.transform, M_PI);//一个PI，180度；} completion:^(BOOL finished) {}];
 }
 

无限旋转：

- (void)spinRedSquare{[UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{self.redSquare.transform = CGAffineTransformRotate(self.redSquare.transform, 360);//一个PI，180度；} completion:^(BOOL finished) {[self spinRedSquare];}];
 

重复动画、延时动画

[UIView animateWithDuration:2 delay:0.35 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{self.redSquare.frame = CGRectMake(250, self.redSquare.frame.origin.y, self.redSquare.frame.size.width, self.redSquare.frame.size.height);} completion:^(BOOL finished) {}];
 

这个方法看起来非常的熟悉，相比上面的方法这里多了几个参数来高度定制我们的动画：

关于延时动画

取决于上述delay属性，在上面的代码中，视图控件在延后0.35秒之后开始从左侧出来，在持续2秒的动画之后完成。

关于重复动画

取决于上述options属性，options属性中包括如下：

缓冲动画

这里主要使用了贝塞尔曲线的效果来改变View动画的速率效果。主要是设置options这个参数；

注意事项

在使用Masonry库的时候进行[UIView animateWithDuration:2 animations:^{}];函数做动画效果时，必须要在该函数内部加上[目标控件.superview layoutIfNeeded]这条语句，否则会无法生成动画效果。

[view mas_makeConstraints:^(MASConstraintMaker *make) {make.top.mas_equalTo(400);make.left.mas_equalTo(100);make.size.mas_equalTo(CGSizeMake(100, 100));
 }];[view.superview layoutIfNeeded];//如果其约束还没有生成的时候需要动画的话，就请先强制刷新后才写动画，否则所有没生成的约束会直接跑动画[UIView animateWithDuration:3 animations:^{[view mas_updateConstraints:^(MASConstraintMaker *make) {make.left.mas_equalTo(200);}];[view.superview layoutIfNeeded];//强制绘制
 }];
 

登录页面动画效果