iOS Animation: 玩转贝塞尔曲线之KYAnimate

读书笔记

先看效果

2017-08-17 18_31_25.gif
源码链接：https://github.com/LeeLom/AnimationSample

这节内容主要是利用贝塞尔曲线来模拟一个球产生形变的过程。利用四条曲线来拼接出完整的球体。

图1.png

所以，我们画出这个球体的步骤，实际上也就是确定多边形Ac1c2Bc3c4Cc5c6Dc7c8的过程，也即是确定各个点坐标的过程。我们得到这个多边形后，利用贝塞尔曲线去逼近，既可以得到我们所需要的形变的图像。

书中给出的确定多边形的方法如下：

• 确定外接正方形的位置：得到(origin_x, origin_y)
• 确定多边形各个坐标的：
  • 确定多边形的坐标的过程中，我们需要根据每次滑动的值，来确定offset和movedDistance。这两个的计算公式可以参考文中的表达式。

    CGFloat offset = _outsideRect.size.width / 3.6;
    CGFloat movedDistance = (_outsideRect.size.width * 1 / 6) * fabs(_progress - 0.5) * 2;

• 确定各个点的坐标：
  • A点：横坐标永远与外接多边形相同，纵坐标为正方形的纵坐标加上移动的距离
  • B点：纵坐标和外接多边形相同，横坐标通过判断左右移动确定。像左边移动，则为外接多边形的横坐标与正方形边长一半，移动距离的两倍求和的值；像右边移动，则为外接多边形的横坐标与正方形边长一半的和。

其余点类似，这里不做过多解释。如果不太理解，其实可以讲progress分别设置成为不同的值进行查看即可。

• 接着我们首先通过 (origin_x, orgin_y)画出外接正方形。 边长设置为定值
• 使用Ac1c2Bc3c4Cc5c6Dc7c8画出外接多边形，同时利用贝塞尔曲线去逼近这个多边形
• 书中为了方便我们便捷，还将这12个点分别也画了出来。

以上，就是书中本节的内容，最本质的就是不断的根据滑动条的值去更新正方形的位置，从而调整外接多边形的形状，进而得到模拟出的贝塞尔曲线。

---

补充知识点

关于这节内容，在代码实现的过程中，发现了不少知识盲区，网上查找了不少资料进行了一个整理：

关于initWithFrame和initWithCoder的区别

• 在CircleView.m 中，初始化方法使用的是initWithFrame:，那么initWithCoder与它有什么区别？
  initWithFrame适用于代码创建页面的时候使用;
  initWithCoder适用于xib、storyboard创建的时候使用。与initWithCoder类似的还有一个是awakeFromNib, 该方法在initWithCoder:方法后调用，顺序是initWithCoder: --> awakeFromNib
  PS1. OC类的初始化方法
  • 普通类初始化：init，initialize
  • 控制器类的初始化方法：init， initialize，initWithCoder:
  • UI空间类的初始化方法：init，initialize， initWithFrame: ，initWithCoder:

PS2. Stack Overflow上看到一个比较有意思的问题，跟Runloop结合的。
在ViewController.m中

@implementation TestViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    View1 *view1 = [[View1 alloc] init];
    [self.view addSubview:view1];
}
@end

在View1.m中

@implementation View1

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        NSLog(@"initWithFrame");
    }
    return self;
}

- (id)init {
    self = [super init];
    if (self) {
        NSLog(@"init");
    }
    return self;
}

@end

控制台的输出结果如下：

2013-10-17 12:33:46.209 test1[8422:60b] initWithFrame
2013-10-17 12:33:46.211 test1[8422:60b] init

分析一下控制台出现的原因：

  - [view1(View1) init] 

      - [view1(UIView) init] (called by [super init] inside View1)

        - [view1(View1) initWithFrame:CGRectZero] (called inside [view(UIView) init] )

           - [view1(UIView) initWithFrame:CGRectZero] (called by [super initWithFrame] inside View1) 
              - ...

           - NSLog(@"initWithFrame"); (prints "test1[8422:60b] initWithFrame")

      - NSLog(@"init"); (called inside [view1(View1) init] ; prints "test1[8422:60b] init")

---

关于UIView和CALayer的区别

• UIView可以响应事件，CALayer不可以。UIKit使用UIResponder作为响应对象，来响应系统传递过来的事件进行处理，UIView作为UIResponder的响应对象，因此可以处理。
  处理事件的函数。

– touchesBegan:withEvent:
– touchesMoved:withEvent:
– touchesEnded:withEvent:
– touchesCancelled:withEvent:

• 每个UIView内部都有一个CALayer在背后提供内容的绘制和显示，并且UIView的尺寸样式都是由内部的Layer提供。两者都有树状层级结构，layer内部有subLayers, view内部有subViews。
• View在显示的时候， UIView作为layer的CALayerDelegate，View的显示内容由内部的CALayer的display
• CALayer是默认修改属性支持隐式动画，在给UIView的Layer做动画的时候，View作为Layer的代理，Layer通过actionForLayer:forKey:向View请求响应的action(动画行为)
• layer 内部维护着三分 layer tree,分别是 presentLayer Tree(动画树),modeLayer Tree(模型树), Render Tree (渲染树),在做 iOS动画的时候，我们修改动画的属性，在动画的其实是 Layer 的 presentLayer的属性值,而最终展示在界面上的其实是提供 View的modelLayer

---

关于绘图的一些函数

• 绘制路径的相关函数
  绘制路径：制定起始点到另一个点，然后两个点之间可以使用直线或者曲线来连接，就形成了一条路径，例如使用下面的函来实现

  CGContextMoveToPoint()//指定起始点或者移动到新的点    
  CGContextAddLineToPoint()//从当前的点到制定的点之间画一条线
  CGContextAddArc()//圆弧
  CGContextAddArcToPoint()//会在当前点和指定点与坐标系平行的直线做切线画圆弧
  CGContextAddCurveToPoint()//画曲线
  CGContextClosePath()//将起始点和结束点连接起来形成封闭的路径
  CGContextAddEllipseInRect()//画椭圆
  

• 设置路径的相关属性
  设置需要绘制的路径的属性。设置颜色、透明度、宽度、绘制模式...例如用下面的函数来实现

  CGContextSetLineWidth()//线宽度
  CGContextSetLineJoin()//线连接点的样式
  CGContextSetLineCap()//端点的样式
  CGContextSetLineDash()//虚线
  CGContextSetStrokeColorWithColor()//stroke模式时的颜色
  CGContextSetFillColorWithColor()//fill模式时的颜色
  

• 绘制内容的两种方式 fill和Stroke
  stroke: 描边，只绘制路径
  fill：绘制路径包括的所有区域(所有路径都会被当做closePath处理)
  fill的两种模式：
  （1）non zero widing number(默认):如果两个路径有重叠的时候，绘制方向相同的话，那么重叠部分的绘制可能不是我们希望的
  （2）even-odd：不受绘制方向的影响
  （3）CGContextEOFillPath
  （4）CGContextFillPath
  （5）CGContextFillRect
  （6）CGContextFillRexts
  （7）CGContextFillEllipseInRect

  CGContextStrokePath(context);
  CGContextFillPath(context);
  

• 两个小例子

/**
 * 示例：stroke模式绘制线
 */
override func draw(rect: CGRext) {
      //获取上下文
      let context = UIGraphicsGetCurrentContext();
      //设置stroke模式的颜色使用CGColor（这里涉及颜色和颜色空间的概念）
      let strokeColor = UIColor.blueColor();
      CGContextSetStrokeColorWIthColor(context, strokeColor.CGColor);
      //设置线的宽度
      CGContextSetLineWidth(context, 5.0);
      //设置连接处样式
      CGContextSetLineJoin(context, CGLineJoin.Round);
      //起始点
      CGContextMoveToPoint(context, 10.0, 10.0);
      //在两个点之间画一条线，所以当前的结束点成为了下一个的起始点
      CGContextAddLineToPoint(context, 10.0, 80.0);
      //继续在两个点之间画一条线
      CGContextAddLineToPoint(context, 80.0, 80.0);
      //设置为封闭路径，将收尾连接起来
      CGContextClosePath(context);
      //绘制当前路径
      CGContextStrokePath(context);
}

/**
 * 示例：fill模式绘制线
 */
override func draw(rect: CGRext) {
      //获取上下文
      let context = UIGraphicsGetCurrentContext();
      //设置stroke模式的颜色使用CGColor（这里涉及颜色和颜色空间的概念）
      let fillColor = UIColor.blueColor();
      CGContextSetFillColorWIthColor(context, fillColor.CGColor);
      //设置线的宽度
      CGContextSetLineWidth(context, 5.0);
      //设置连接处样式
      CGContextSetLineJoin(context, CGLineJoin.Round);
      //起始点
      CGContextMoveToPoint(context, 10.0, 10.0);
      //在两个点之间画一条线，所以当前的结束点成为了下一个的起始点
      CGContextAddLineToPoint(context, 10.0, 80.0);
      //继续在两个点之间画一条线
      CGContextAddLineToPoint(context, 80.0, 80.0);
      // 设置为封闭路径，将收尾连接起来
      // CGContextClosePath(context);
      //绘制当前路径
      CGContextFillPath(context);
}