前言
在写项目时，生硬的出场显示动画让APP缺少了观感体验，基础的动画效果是必不可少的
主要围绕着[UIView animateWithDuration:2 animations:^{}];函数进行变化
位置动画
PositionAnimation可以实现View的移动，最简单的就是X轴，Y轴的移动。可以利用在上述[UIView animateWithDuration:2 animations:^{}];函数改变坐标即可；
- 如果想要使控件进行
x坐标上的移动，仅需在函数中更改x坐标 - 如果想要使控件进行
y坐标上的移动，仅需在函数中更改y坐标
- (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);
}];
}
平移效果：
透明度、颜色动画
- 透明度动画可以让某个
View的透明度在0-1之间改变。透明度为0表示全透明，看不见了。透明度为1表示和正常情况下一样。 - 颜色动画可以让一个View在一个时间间隔内发生颜色的渐变，进行颜色的过渡。
依然配合[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);
}];
}
CGAffineTransformMakeScale两个参数，代表x和y方向缩放倍数。CGAffineTransformScale三个参数，第一个为要进行变换的矩阵，二三为x和y方向缩放倍数。
区别：
CGAffineTransformMakeScale是对单位矩阵进行缩放。CGAffineTransformScale是对第一个参数的矩阵进行缩放。
比如已经对一个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;
}];
}];
}
效果如下
旋转动画
- 可以让某个
View绕圆点进行旋转。
只旋转一次：
- (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) {
}];
这个方法看起来非常的熟悉，相比上面的方法这里多了几个参数来高度定制我们的动画：
duration： 动画时长delay： 决定了动画在延迟多久之后执行options：用来决定动画的展示方式，接下来会进行讲解animations：转化成动画表示的代码completion：动画结束后执行的代码块
关于延时动画
取决于上述delay属性，在上面的代码中，视图控件在延后0.35秒之后开始从左侧出来，在持续2秒的动画之后完成。
关于重复动画
取决于上述options属性，options属性中包括如下：
repeatDuration：设置动画的时间，在该时间内动画一直执行，不计次数（做到了重复性）autoreverses：动画结束时是否执行逆动画
缓冲动画
这里主要使用了贝塞尔曲线的效果来改变View动画的速率效果。主要是设置options这个参数；
kCAMediaTimingFunctionLinear：在整个动画时间内动画都是以一个相同的速度来改变。也就是匀速运动。 一个线性的计时函数，同样也是CAAnimation的timingFunction属性为空时候的默认函数。线性步调对于那些立即加速并且保持匀速到达终点的场景会有意义（例如射出枪膛的子弹）。kCAMediaTimingFunctionEaseIn：动画开始时会较慢，之后动画会加速。一个慢慢加速然后突然停止的方法。 对于之前提到的自由落体的例子来说很适合，或者比如对准一个目标的导弹的发射。kCAMediaTimingFunctionEaseOut：动画在开始时会较快，之后动画速度减慢。它以一个全速开始，然后慢慢减速停止。 它有一个削弱的效果，应用的场景比如一扇门慢慢地关上，而不是砰地一声。kCAMediaTimingFunctionEaseInEaseOut：动画在开始和结束时速度较慢，中间时间段内速度较快。 创建了一个慢慢加速然后再慢慢减速的过程。这是现实世界大多数物体移动的方式，也是大多数动画来说最好的选择。如果只可以用一种缓冲函数的话，那就必须是它了。那么你会疑惑为什么这不是默认的选择，实际上当使用UIView的动画方法时，他的确是默认的，但当创建CAAnimation的时候，就需要手动设置它了。kCAMediaTimingFunctionDefault：它和kCAMediaTimingFunctionEaseInEaseOut很类似，但是加速和减速的过程都稍微有些慢。 它和kCAMediaTimingFunctionEaseInEaseOut的区别很难察觉，可能是苹果觉得它对于隐式动画来说更适合（然后对UIKit就改变了想法，而是使用kCAMediaTimingFunctionEaseInEaseOut作为默认效果），虽然它的名字说是默认的，但还是要记住当创建显式的CAAnimation它并不是默认选项（换句话说，默认的图层行为动画用kCAMediaTimingFunctionDefault作为它们的计时方法）。
注意事项
在使用Masonry库的时候进行[UIView animateWithDuration:2 animations:^{}];函数做动画效果时，必须要在该函数内部加上[目标控件.superview layoutIfNeeded]这条语句，否则会无法生成动画效果。
- 因为设置的约束并不会立即生效,所以我们需要用
layoutIfNeeded来对其强制更新,再首次约束和让其开始动画的时候都得更新一次,否则动画的效果会很奇怪 - 和普通的方法实现差不多，重点只是修改约束后调用
[view.superview layoutIfNeeded];而已 - 用
Masonry库做动画时，一定要使用mas_updateConstraints的更新约束
[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];//强制绘制
}];
登录页面动画效果
