iOS基础动画教程分享

2020-01-18 18:00:34丽君

  // 进行一秒钟的动画
  [UIView animateWithDuration:1 animations:^{
    self.blueSquare.transform = CGAffineTransformMakeScale(2.0, 2.0);// 长和宽分别变成原来的两倍
  }];

这里就将方块通过一秒钟的动画慢慢放大到原来的两倍,这里要明确的是放大过程中,方块的中心点不变,也就是说是从中心向四周放大的。要缩小也可以改变参数的倍数就可以了。
这里可以稍作想象,我们把放大动画和透明度动画组合到一起,变放大到整个屏幕边渐变到看不见,是不是就很像一些见过的动画了

颜色动画

现在来到颜色的渐变动画,同样简单的很:


  // 改变颜色
  [UIView animateWithDuration:1 animations:^{
    self.blueSquare.backgroundColor = [UIColor redColor];
  }];

在代码块里重新设置一下方块的颜色,就可以实现渐变效果了,简单到哭。。。

旋转动画

上面的动画操作都很简单,都是在动画的代码块内重新设置一下就可以达到动画的效果了,而旋转就稍微复杂一点。
假设我们有一个轮子的图片wheelImg,要旋转他,还是需要用到方法CGAffineTransformMakeRotation,刚才我们伸缩大小用到了CGAffineTransformMakeScale,看起来差不多,用起来也差不多,参数是旋转的角度,我们可以尝试一下这样写:


  [UIView animateWithDuration:1 animations:^{
    self.wheelImg.transform = CGAffineTransformMakeRotation(M_PI);
  }];

这样确实可以达到旋转的目的,根据参数,运行的时候会旋转半圆,然后停住。如果只是想旋转一下停住,按照这种方式写,改变角度就可以了,但是如果想要旋转一个整圆,第一个想到的可能是把角度改成整圆:


  [UIView animateWithDuration:1 animations:^{
    self.wheelImg.transform = CGAffineTransformMakeRotation(2*M_PI);
  }];

这样写,运行起来其实是不会动的,可以试一下,因为它的最终位置,也就是转了一个整圆后,还是在原位置,所以iOS选择不动。就跟改变位置,位置还是原来的位置时,也不会动一样。那怎么办呢。另外,这里的旋转都是一次性的,如果想要一直转,怎么做呢,是不是很容易想到循环?其实就是循环,但是我们可以用比for循环更加优雅的动画循环方式,还记得刚才做延迟动画的时候的方法,最后有一个参数是completion嘛,这个参数的功能是提供动画结束时执行的内容,那我们可不可以在这里调用它自己呢?当然可以:


// 持续旋转动画
- (void)spin {
  // options属性设置可以让其顺畅地循环转动,completion让其不断在完成之后调用自己
  [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
    self.wheelImg.transform = CGAffineTransformRotate(self.wheelImg.transform, M_PI);// 第一个参数为开始旋转的角度,第二个为旋转的角度
  }completion:^(BOOL finished){// 结束时继续执行
    [self spin];
  }];
}