所有的动画、绘图、这里全搞定

2015-09-08 本文已影响1681人 SlimMan

看着我这标题就觉得有点狂啊，其实是本人最近工作有点闲，看了很多人写的sample，从中萃取精华，总结下，以防止自己忘记了，岂不白白浪费了这几天的努力。废话就这么多，现在开始正题：
先说说咱这篇文章会讲到什么吧，首先我会讲讲绘图，然后讲讲动画
咱们首先从绘图说起，

使用CoreGraphics进行绘图
说到绘图，那绘图是在哪里绘呢，当然是在View里面了，我们可以重写UIView的- (void)drawRect:(CGRect)rect方法，然后在里面进行绘图，绘图的话就离不来CoreGraphics了，然而CoreGraphics的核心就是QuzCore里面的几个函数了。废话少说，直接上代码
- (void)drawRect:(CGRect)rect {
// 获取绘图上下文环境
CGContextRef context = UIGraphicsGetCurrentContext();
// 设置线条的宽度
CGContextSetLineWidth(context, 4.0);
// 设置线条的颜色
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
// 将绘画笔移到一个点作为绘图的起点
CGContextMoveToPoint(context, 20.0, 20.0);
// 由起点画一条线到终点
CGContextAddLineToPoint(context, 300, 400);
// 画出来
CGContextStrokePath(context);
}
这段代码之后呈现出的效果如下：

如你所见，这段代码的功能是画了一条红色的斜线。当然如果你想画一个矩形的话也是同样的一个道理，在上面的代码后面加上如下代码就好：

// 画一个矩形
CGRect arect = CGRectMake(200, 30, 49, 59);
// 设置填充色
CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);
// 填充矩形
CGContextFillRect(context, arect);
// 将举行显示出来
CGContextAddRect(context, arect);

效果的话自己去试吧，我就不上图了，另外谁能告诉我怎么把图片缩小，这太占地了。绘图就说这么多了，感觉用处不大啊，以后感觉用处大再补充吧。

使用CAShapeLayer 、UIBezierPath、CABasicAnimation画
经常看到别人发出一下比较屌的动画例子，其中用到的两个必不可少的技术点有三个，分别是：
CAShapeLayer:这是动画的主要载体，动画都是由他执行
UIBezierPath：用来描绘CAShapeLayer的边界
CABasicAnimation：动画对象，由他对动画的执行过程进行描述
使用实例如下：
#import "NibView.h"
@interface NibView()

  // 执行动画的载体
  @property (nonatomic, strong) CAShapeLayer *shapLayer;

  @end

  @implementation NibView

  /*
  // Only override drawRect: if you perform custom drawing.
  // An empty implementation adversely affects performance during animation.
  - (void)drawRect:(CGRect)rect {
      // Drawing code
  }
  */

  // 画面的初始化在此方法内进行
  - (id)initWithCoder:(NSCoder *)aDecoder {
      self = [super initWithCoder:aDecoder];
      self.frame = [UIApplication sharedApplication].keyWindow.bounds;
      self.backgroundColor = [UIColor redColor];
      
      UIBezierPath *bpath = [UIBezierPath bezierPath];
      [bpath moveToPoint:CGPointMake(100, 150)];
      [bpath addCurveToPoint:CGPointMake(300, 150)
               controlPoint1:CGPointMake(200, 80)
               controlPoint2:CGPointMake(200, 200)];
      [bpath addCurveToPoint:CGPointMake(300, 400)
               controlPoint1:CGPointMake(400, 230)
               controlPoint2:CGPointMake(250, 350)];
      [bpath addLineToPoint:CGPointMake(100, 400)];
      [bpath closePath];
      
      self.shapLayer.path = bpath.CGPath;
      
      [self.layer addSublayer:_shapLayer];
      
      return self;
  }

  // 获得一个path
  - (UIBezierPath *)rectPath {
      UIBezierPath *rectpath = [UIBezierPath bezierPath];
      [rectpath moveToPoint:CGPointMake(100.0, 150.0)];
      [rectpath addLineToPoint:CGPointMake(300, 150)];
      [rectpath addLineToPoint:CGPointMake(300, 400)];
      [rectpath addLineToPoint:CGPointMake(100, 400)];
      [rectpath closePath];
      return rectpath;
  }

  // 执行动画
  - (void)animate {
      CABasicAnimation *expandAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
      expandAnimation.fromValue = (__bridge id)(_shapLayer.path);
      expandAnimation.toValue = (__bridge id)[self rectPath].CGPath;
      expandAnimation.beginTime = 0;
      expandAnimation.duration = 0.5;
      expandAnimation.fillMode = kCAFillModeForwards;
      expandAnimation.removedOnCompletion = NO;
      [self.shapLayer addAnimation:expandAnimation forKey:nil];
      
  }

  // 加个按钮让动画可以重复进行
  - (IBAction)goAnimate:(UIButton *)sender {
      [self animate];
  }

  #pragma mark - initViews
  - (CAShapeLayer *)shapLayer {
      if (!_shapLayer) {
          _shapLayer = [[CAShapeLayer alloc] init];
          _shapLayer.frame = self.bounds;
          _shapLayer.fillColor = [UIColor greenColor].CGColor;
      }
      return _shapLayer;
  }

  @end

下面对上面的代码进行说明：

我这里是将代码动画放在一个xib文件里面的，需要注意的是当xib文件被加载时它调用的是- (id)initWithCoder:(NSCoder *)aDecoder这个方法，而不是- (id)initWithFrame:(CGRect)frame这个方法，使用初始化的事情都应该放在这里面来进行。
在animate这个方法里面有这么两行
expandAnimation.fillMode = kCAFillModeForwards;
expandAnimation.removedOnCompletion = NO;
需要注意的是这两行要同时写上动画才不会回去。
动画执行的效果如下：

另外你可以利用CAAnimationGroup来组织来管理动画，使得几个动画连续执行，这样可以形成一系列的连贯动画效果，例如：
#import "NibView.h"

    @interface NibView()

    // 执行动画的对戏那个
    @property (nonatomic, strong) CAShapeLayer *shapLayer;

    @end

    @implementation NibView

    /*
    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    - (void)drawRect:(CGRect)rect {
        // Drawing code
    }
    */

    // 画面的初始化在此方法内进行
    - (id)initWithCoder:(NSCoder *)aDecoder {
        self = [super initWithCoder:aDecoder];
        self.frame = [UIApplication sharedApplication].keyWindow.bounds;
        self.backgroundColor = [UIColor redColor];
        self.shapLayer.path = [self curvePath].CGPath;
        [self.layer addSublayer:_shapLayer];
        return self;
    }

    // 获得一个饱含曲线的path
    - (UIBezierPath *)curvePath {
        UIBezierPath *bpath = [UIBezierPath bezierPath];
        [bpath moveToPoint:CGPointMake(70, 150)];
        [bpath addCurveToPoint:CGPointMake(270, 150)
                 controlPoint1:CGPointMake(170, 80)
                 controlPoint2:CGPointMake(170, 200)];
        [bpath addCurveToPoint:CGPointMake(270, 400)
                 controlPoint1:CGPointMake(370, 230)
                 controlPoint2:CGPointMake(220, 350)];
        [bpath addLineToPoint:CGPointMake(70, 400)];
        [bpath closePath];
        return bpath;
    }


    // 获得一个path
    - (UIBezierPath *)rectPath {
        UIBezierPath *rectpath = [UIBezierPath bezierPath];
        [rectpath moveToPoint:CGPointMake(100.0, 150.0)];
        [rectpath addLineToPoint:CGPointMake(300, 150)];
        [rectpath addLineToPoint:CGPointMake(300, 400)];
        [rectpath addLineToPoint:CGPointMake(100, 400)];
        [rectpath closePath];
        return rectpath;
    }

    // 获得一个正方形边迹
    - (UIBezierPath *)suqarePath {
        UIBezierPath *squarPath = [UIBezierPath bezierPath];
        [squarPath moveToPoint:CGPointMake(10, 150)];
        [squarPath addLineToPoint:CGPointMake(310, 150)];
        [squarPath addLineToPoint:CGPointMake(310, 450)];
        [squarPath addLineToPoint:CGPointMake(10, 450)];
        [squarPath closePath];
        return squarPath;
    }


    // 执行动画
    - (void)animate {
        // 原始形态变成长方形
        CABasicAnimation *expandAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
        expandAnimation.fromValue = (__bridge id)(_shapLayer.path);
        expandAnimation.toValue = (__bridge id)[self rectPath].CGPath;
        expandAnimation.beginTime = 0;
        expandAnimation.duration = 0.5;
        [self.shapLayer addAnimation:expandAnimation forKey:nil];
        // 长方形变成正方形
        CABasicAnimation *expandAnimation2 = [CABasicAnimation animationWithKeyPath:@"path"];
        expandAnimation2.fromValue = (__bridge id)[self rectPath].CGPath;
        expandAnimation2.toValue = (__bridge id)[self suqarePath].CGPath;
        expandAnimation2.beginTime = expandAnimation.beginTime + expandAnimation.duration;
        expandAnimation2.duration = 0.5;
        // 正方形又回到原始形态
        CABasicAnimation *expandAnimation3 = [CABasicAnimation animationWithKeyPath:@"path"];
        expandAnimation3.fromValue = (__bridge id)[self suqarePath].CGPath;
        expandAnimation3.toValue = (__bridge id)(_shapLayer.path);
        expandAnimation3.beginTime = expandAnimation2.beginTime + expandAnimation2.duration;
        expandAnimation3.duration = 0.5;
        
        CAAnimationGroup *group = [CAAnimationGroup animation];
        group.animations = @[expandAnimation, expandAnimation2, expandAnimation3];
        group.beginTime = expandAnimation.beginTime;
        group.duration = expandAnimation3.beginTime + expandAnimation3.duration;
        group.fillMode = kCAFillModeForwards;
        group.removedOnCompletion = NO;
        group.repeatCount = 2;
        [self.shapLayer addAnimation:group forKey:nil];
        
    }

    // 加个按钮让动画可以重复进行
    - (IBAction)goAnimate:(UIButton *)sender {
        [self animate];
    }

    #pragma mark - initViews
    - (CAShapeLayer *)shapLayer {
        if (!_shapLayer) {
            _shapLayer = [[CAShapeLayer alloc] init];
            _shapLayer.frame = self.bounds;
            _shapLayer.fillColor = [UIColor greenColor].CGColor;
        }
        return _shapLayer;
    }

    @end

由于修改较大，使用干脆又重现全部贴了出来了，下面做以下说明：

首先为了代码的整齐我把initWithCoder里面的画边界部分的代码抽了出来，单独形成了一个方法
我增加了一个返回正方形的轨迹方法suqarePath
我对animate方法进行了修改，引入了CAAnimationGroup，这里仍需要注意的是fillMode和removedOnCompletion这两个熟悉，现在把他应用到动画组上。

通过动画组，我们可以形成各种细腻的动画效果，一切貌似变的明朗起来.

绕着Z轴旋转的方法
有一种动画叫做旋转，对于旋转来说如果像上面一样一个个慢慢组的话会写死你有木有。那旋转动画怎么玩呢，很简单，看到我们上面声明动画是这么玩的：
[CABasicAnimation animationWithKeyPath:@"path"]，
然而，现在我们将这么玩：
[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]
他们两的区别就是KeyPath变了，看到这里，我们明白了，其实动画的种类就是由这个东西决定的。是@"path"说明这个动画是通过改变边界来形成动画，那很自然@"transform.rotation.z"就是绕着Z轴旋转形成的动画了。废话不多说，再次上代码:
首先在类中加入如下方法
// 旋转动画
- (void)rotation {
CABasicAnimation *rotaionAnimate = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotaionAnimate.toValue = @(M_PI * 2.0);
rotaionAnimate.duration = 0.5;
rotaionAnimate.removedOnCompletion = YES;
[self.shapLayer addAnimation:rotaionAnimate forKey:nil];
```
  }
```

然后在修改goAnimate方法
- (CAShapeLayer *)shapLayer {
if (!_shapLayer) {
_shapLayer = [[CAShapeLayer alloc] init];
_shapLayer.frame = self.bounds;
_shapLayer.fillColor = [UIColor greenColor].CGColor;
}
return _shapLayer;
}

这里我们让图层旋转360度，运行效果如下：

另外需要说明的是可以制定图像绕着那一点旋转，我们只要指定它的描点，在rotation方法里面加入下面这句代码
self.shapLayer.anchorPoint = CGPointMake(0.1, 0.1);
效果如下：

由于我们改变了描点，所以图像的fram变了。

描边动画
有关描边动画也是改变一下KeyPath,它的KeyPath是：@"strokeEnd"
在代码中加入如下方法
- (void)strokeBoard {
self.shapLayer.strokeColor = [UIColor whiteColor].CGColor;
self.shapLayer.lineWidth = 20.0;
CABasicAnimation *strokeAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
strokeAnimation.fromValue = @0.0;
strokeAnimation.toValue = @1.0;
strokeAnimation.duration = 1.0;
[self.shapLayer addAnimation:strokeAnimation forKey:nil];
}
然后在goAnimate方法里面加入如下代码
[NSTimer scheduledTimerWithTimeInterval:4.5
target:self
selector:@selector(strokeBoard)
userInfo:nil
repeats:NO];

这里strokeBoard方法里面我们设置了shapLayer的lineWidth和strokeColor，lineWidth默认是0，strokeColor默认是透明的。
当lineWidth非0时，显示方法是内外各一半。为了便于观察，这里运行前把上面的描点的那句代码注释掉，运行效果如下：

CAKeyframeAnimation:关键帧动画。(和CABasicAnimation平行)就是一帧一帧的动画了，一般用来处理GIF图片的
首先可以在View里面加入一张图片，然后让图片抖动起来，抖动但动画代码如下：
// 抖动动画
- (void)animate {
// 定义帧动画
CAKeyframeAnimation animate = [CAKeyframeAnimation animation];
// 改变弧度
animate.values = @[@(M_PI/1805),@(-M_PI/1805),@(M_PI/1805)];
// 关键帧是什么必须有，其实就是和什么有关的动画了
animate.keyPath = @"transform.rotation";
// 重复次数
animate.repeatCount = MAXFLOAT;
animate.duration = 0.2;
[_imageView.layer addAnimation:animate forKey:nil];
}
最后实现的效果如下：

抖动动画

动画但暂停
如果动画时加在layer上的话，动画是可以被暂停的，只需要将执行动画的那个layer的speed属性设置为0就好，要回复的话设置成1.0就好
如暂停和恢复上面的动画：
- (void)stopAnimate {

      // 获取暂停时间
  //    CFTimeInterval pausedTime = [self.imageView.layer convertTime:CACurrentMediaTime() fromLayer:nil];
  //    
  //    self.imageView.layer.timeOffset = pausedTime;

      if (self.imageView.layer.speed == 0) {
          self.imageView.layer.speed = 1.0;
      } else {
          self.imageView.layer.speed = 0;
      }
  }

所有的动画、绘图、这里全搞定

猜你喜欢

热点阅读