Popping笔记。Github上搜索"Popping"即可下载源代码。

Circle View

---

分析动画。

这个动画很简单，一个圆圈，一个slider，滑动slider圆圈会变，并且有spring的效果。

---

CircleView.m

-(id)initWithFrame:(CGRect)frame方法中首先进行断言：一个圆的高和宽一定是相同的。接着添加circleLayer，来到addCircleLayer方法。

- (void)addCircleLayer
{
    CGFloat lineWidth = 4.f;
    CGFloat radius = CGRectGetWidth(self.bounds)/2 - lineWidth/2;
    self.circleLayer = [CAShapeLayer layer];
    CGRect rect = CGRectMake(lineWidth/2, lineWidth/2, radius * 2, radius * 2);
    self.circleLayer.path = [UIBezierPath bezierPathWithRoundedRect:rect
                                                  cornerRadius:radius].CGPath;

    self.circleLayer.strokeColor = self.tintColor.CGColor;
    self.circleLayer.fillColor = nil;
    self.circleLayer.lineWidth = lineWidth;
    self.circleLayer.lineCap = kCALineCapRound;
    self.circleLayer.lineJoin = kCALineJoinRound;
    
    [self.layer addSublayer:self.circleLayer];
}

我们首先得到一个CAShapeLayer，通过设置其path属性来画一个圆。

path属性是通过UIBezierPath来设置的，注意其类型是CGPathRef。

接着设置shape layer的strokeColor, lineWidth等属性来画出我们想要的圆。

接着到CircleViewController.m文件中。

首先添加circleView，即我们刚才分析的对象。设置其宽度高度都为200，中点为屏幕的中点。

此时运行程序，应该会有一个完整的圆环。

接下来我们需要添加一个slider。

- (void)addSlider
{
    UISlider *slider = [UISlider new];
    slider.value = 0.7f;
    slider.tintColor = [UIColor customBlueColor];
    slider.translatesAutoresizingMaskIntoConstraints = NO;
    [slider addTarget:self action:@selector(sliderChanged:) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:slider];
    NSDictionary *views = NSDictionaryOfVariableBindings(slider, _circleView);

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[_circleView]-(40)-[slider]"
                                                                      options:0
                                                                      metrics:nil
                                                                        views:views]];

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[slider]-|"
                                                                      options:0
                                                                      metrics:nil
                                                                        views:views]];
    [self.circleView setStrokeEnd:slider.value animated:NO];
}

创建一个slider，设置其初始值为0.7f(这就是为什么刚上来圆环并不完整)，注意这里并没有在刚开始创建slider的时候设置其frame,center之类的属性，而是通过addConstraints：方法来限定slider的位置。

首先需要设置slider.translatesAutoresizingMaskIntoConstraints = NO，意思是说我们不使用autoresizingMask而是通过addConstraints。

NSDictionary *views = NSDictionaryOfVariableBindings(slider, _circleView);

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[_circleView]-(40)-[slider]"
                                                                  options:0
                                                                  metrics:nil
                                                                    views:views]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[slider]-|"
                                                                  options:0
                                                                  metrics:nil
                                                                    views:views]];

看代码可以知道我们加了两个constraints:一个是水平方向的（H），一个是竖直方向的（V）

在竖直方向上，我们竖直排列circleView和slider，其间距为40。
在水平方向上，我们将slider放在一行上，两边距离边界的长度默认（处于蓝色虚线？）

而NSDictionaryOfVariableBingdings()的作用在于，说明@"V:[_circleView]-(40)-[slider]"和@"H:|-[slider]-|"中，_circleView和slider所代表的对象是哪个。相当于：

@"_circleView":_circleView (或者self.circleView)

@"slider":slider

---

现在运行程序，发现圆环已经不完整（0.7），现在我们需要监听slider：改变slider的值，圆环也会跟着改变。

在addSlider方法中，

[slider addTarget:self action:@selector(sliderChanged:) forControlEvents:UIControlEventValueChanged];

接着sliderChanged:方法：

[self.circleView setStrokeEnd:slider.value animated:YES];

回到CircleView.m中，找到setStrokeEnd:animated:方法。

- (void)setStrokeEnd:(CGFloat)strokeEnd animated:(BOOL)animated
{
    if (animated) {
        [self animateToStrokeEnd:strokeEnd];
        return;
    }
    self.circleLayer.strokeEnd = strokeEnd;
}

可以看到，如果animated的话，则设置spring动画，并返回；如果!animated的话，则直接设置shape layer的strokeEnd的值。这也就对应了两种不同的情况：应用刚进入的时候直接设置strokeEnd的值使圆环处于0.7处；拖动slider，每次变化的时候将根据当前的value变化圆环。

- (void)animateToStrokeEnd:(CGFloat)strokeEnd
{
    POPSpringAnimation *strokeAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeEnd];
    strokeAnimation.toValue = @(strokeEnd);
    strokeAnimation.springBounciness = 12.f;
    strokeAnimation.removedOnCompletion = NO;
    [self.circleLayer pop_addAnimation:strokeAnimation forKey:@"layerStrokeAnimation"];
}

这个方法很简单，给shape layer的strokeEnd属性加上动画效果。(strokeEnd可以理解为所占的比例？)

将strokeAnimation.removedOnCompletion = NO;这一行注释似乎也不影响运行结果，不知这一行的目的？

---

结束。