【iOS】UIView的动画效果

kochunk1t

于 2022-02-27 19:35:32 发布

阅读量1.9k

点赞数 1

文章标签：动画 ios 移动开发

本文链接：https://blog.csdn.net/kochunk1t/article/details/123167156

版权

文章目录

前言
位置动画
透明度、颜色动画
缩放动画
- 无限放大缩小
旋转动画
重复动画、延时动画
- 关于延时动画
- 关于重复动画
缓冲动画
注意事项
登录页面动画效果

前言

在写项目时，生硬的出场显示动画让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];//强制绘制
}];