本教程为系列教程第三篇。如果不了解具体的情况,请至传送门。

第一篇教程传送门

第二篇教程传送门

本系列教程,我们要实现如下效果:
第三篇效果

我们可以看到动画中,当第二篇教程中的红点部分移动到最高度的时候会有一个蓝色的细线出现,并且细线向下移动,而未做任何的动画.那么我们就可以考虑其中最简单的方法。

####方法一:
创建一个简单的UIViewCALayer,使用UIView的动画或者CAAnimation动画。

####方法二:
使用第二篇教程中的
CAShapeLayer的属性strokeStartstrokeEnd来实现类似效.

这里我们为了简便我们使用第一种方法,通过改变CALayer的位置来进行动画。

初始简图
我们可以看到蓝色的细线。假设蓝色的细线长度为15,由圆图的position,我们可以获取到蓝色细线的初始position ps: 注意调试线宽

蓝色细线初始position = 圆的position - 2*半径R + (蓝色细线长度)*0.5

最终简图

上图为蓝色为所移动到的最终位置。ps: 注意调试线宽

蓝色细线最终position = 圆的position - 半径R - (蓝色细线长度)*0.5

######上代码:
通过CAAnimation代理结束可知道,

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    if ([[anim valueForKey:kName] isEqualToString:kProgress]) {
        //执行红点抛物线
        [self doHandlePao];
    }else if ([[anim valueForKey:kName] isEqualToString:kMoveLayerGroup])
    {
        //执行向下滑动
        [self doHandleTranslate];
    }
}

当红色的部分移动到顶端的时候,我们把它从父类上移出,然后创建蓝色的细线.代码如下:

  [_moveLayer removeFromSuperlayer];
CAShapeLayer * lineLayer = [CAShapeLayer layer];
//蓝线大小
lineLayer.bounds = CGRectMake(0, 0, 2, 15);
//蓝线的position
CGFloat y = CGRectGetMidY(self.view.bounds) - 2* kRadius + (lineLayer.bounds.size.height)*0.5;

lineLayer.position = CGPointMake(CGRectGetMidX(self.view.bounds), y);

lineLayer.backgroundColor= [UIColor blueColor].CGColor;
lineLayer.lineWidth = 2;
lineLayer.contentsScale = [UIScreen mainScreen].scale;
[self.view.layer addSublayer:lineLayer];
_lineLayer= lineLayer;

//蓝线的最终位置 kRadius为半径长度
finalPosition = CGRectGetMidY(self.view.bounds) -  kRadius -5;

通过CABasicAnimation改变position.y

 CABasicAnimation * yAnimation = [CABasicAnimation animationWithKeyPath:@"position.y"];
yAnimation.fromValue = @(y);
yAnimation.toValue = @(finalPosition);
yAnimation.removedOnCompletion = NO;
yAnimation.delegate = self;
yAnimation.duration = 3;
yAnimation.repeatCount = MAXFLOAT;
[yAnimation setValue:kPositionY forKey:kName];
yAnimation.fillMode = kCAFillModeForwards;
[lineLayer addAnimation:yAnimation forKey:nil];