匹配虚线填充动画分析实现

设计师给了一个交互动画需要实现，是项目房间模块匹配中的一个交互动效：圆球随着实线转，实线填充虚线，圆球转到顶端开始减速，越过顶端开始加速，如图：

一开始会想如何去让一个圆球绕着圆心去转，难道是需要套什么数学公式么？思考了下，iOS 动画库中并没有这种操作，然后思考了一下上面的部件层级。

部件层级

1. 一个外环圆，很好实现
2. 外环圆包着内环虚线
3. 一个做圆环动效的实线
4. 一个固定的圆球
5. 一个随圆环滚动的圆球

过程拆分

外环圆和内环虚线都非常好实现，第一反应就是 CAShapeLayer 去画各种图形，并且 ShapeLayer 在性能上是优化的。

查了很久没看见有圆球绕着锚点做圆周运动的 API，于是我拿 Sketch 尝试分解了一下，如图所示：

如图所示，换了个思路，虽然没有圆球绕着锚点做圆周运动的 API，但是可以把它放在父 layer 上，然父 layer 围绕自己的圆心自转，那么这个圆球也就绕着圆心运动了。

实现

首先从最简单的开始

外圈大圆和内圈虚线圆环

确定它们的贝塞尔曲线 path 直接绘制：

CGFloat bigLayerWidth = self.bounds.size.width;
CGFloat bigLayerHeight = self.bounds.size.height;

CGPoint position = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);

UIBezierPath *bigLayerPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, bigLayerWidth, bigLayerHeight)];


_bigLayer = [CAShapeLayer layer];
_bigLayer.frame = CGRectMake(0, 0, bigLayerWidth, bigLayerHeight);
_bigLayer.path = bigLayerPath.CGPath;
_bigLayer.lineWidth = 1.f;
_bigLayer.strokeColor = Color(whiteColor).CGColor;
_bigLayer.fillColor = Color(clearColor).CGColor;
_bigLayer.position = position;
[self.layer addSublayer:_bigLayer];

CGFloat contentLayerWidth = bigLayerWidth - 32;
CGFloat contentLayerHeight = bigLayerHeight - 32;
CGRect contentLayerRect = CGRectMake(0, 0, contentLayerWidth, contentLayerHeight);

UIBezierPath *centralCirclePath = [UIBezierPath bezierPathWithOvalInRect:contentLayerRect];

_dashCircleLayer = [CAShapeLayer layer];
_dashCircleLayer.bounds = contentLayerRect;
_dashCircleLayer.path = centralCirclePath.CGPath;
_dashCircleLayer.fillColor = Color(clearColor).CGColor;
_dashCircleLayer.strokeColor =Color(whiteColor).CGColor;
_dashCircleLayer.lineDashPattern = @[@1, @1];
_dashCircleLayer.lineWidth = 0.5f;
_dashCircleLayer.position = position;
[self.layer addSublayer:_dashCircleLayer];

此时的效果如图所示：

内圈动画层的绘制

要画的有三个部分：

• 需要旋转的圆环
• 需要旋转的圆球父 layer
• 需要旋转的圆球

// 要做动画的圆环
_dynamicCircleLayer = [CAShapeLayer layer];
_dynamicCircleLayer.bounds = contentLayerRect;
_dynamicCircleLayer.path = centralCirclePath.CGPath;
_dynamicCircleLayer.fillColor = Color(clearColor).CGColor;
_dynamicCircleLayer.lineWidth = 1.0f;
_dynamicCircleLayer.strokeColor = Color(whiteColor).CGColor;
_dynamicCircleLayer.strokeStart = 0;
_dynamicCircleLayer.strokeEnd = 1;
_dynamicCircleLayer.affineTransform = CGAffineTransformMakeRotation(M_PI + M_PI_2);
_dynamicCircleLayer.position = position;
[self.layer addSublayer:_dynamicCircleLayer];

// 要做动画的父 layer
UIBezierPath *rectPath = [UIBezierPath bezierPathWithRect:contentLayerRect];
_dynamicContentLayer = [CAShapeLayer layer];
_dynamicContentLayer.bounds = contentLayerRect;
_dynamicContentLayer.path = rectPath.CGPath;
_dynamicContentLayer.fillColor = Color(clearColor).CGColor;
_dynamicContentLayer.strokeColor= Color(redColor).CGColor;
_dynamicContentLayer.position = position;
[self.layer addSublayer:_dynamicContentLayer];

// 父 layer 上的圆球
CGFloat ballLayerRadius = 4;

_dynamicBallLayer = [CAShapeLayer layer];
_dynamicBallLayer.frame = CGRectMake(0, 0, 2 * ballLayerRadius, 2 * ballLayerRadius);
_dynamicBallLayer.cornerRadius = ballLayerRadius;
_dynamicBallLayer.backgroundColor = Color(whiteColor).CGColor;
_dynamicBallLayer.position = CGPointMake(contentLayerWidth / 2.0, 0);
[_dynamicContentLayer addSublayer:_dynamicBallLayer];

此时效果如图所示：

不动圆球的绘制

_staticContentLayer = [CAShapeLayer layer];
_staticContentLayer.bounds = contentLayerRect;
_staticContentLayer.fillColor = Color(clearColor).CGColor;
_staticContentLayer.strokeColor= Color(whiteColor).CGColor;
_staticContentLayer.position = position;


[self.layer addSublayer:_staticContentLayer];

_staticBallLayer = [CAShapeLayer layer];
_staticBallLayer.frame = CGRectMake(0, 0, 2 * ballLayerRadius, 2 * ballLayerRadius);
_staticBallLayer.cornerRadius = ballLayerRadius;
_staticBallLayer.backgroundColor = Color(whiteColor).CGColor;
_staticBallLayer.position = CGPointMake(contentLayerWidth / 2.0, 0);
[_staticContentLayer addSublayer:_staticBallLayer];

隐藏圆球父试图开始动画

重力加速度动画，如果使用系统的 dynamic 感应系统就太麻烦了，我选择用动画选项淡入淡出模拟：

- (void)makeLayersAnimated {

    // 圆环动画
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 3.0f;
    // 模拟重力加速度动画
    pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.00f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    pathAnimation.fillMode = kCAFillModeForwards;
    pathAnimation.removedOnCompletion = NO;
    pathAnimation.repeatCount = INFINITY;
    [_dynamicCircleLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];

    // 圆球动画
    CABasicAnimation *animation = [CABasicAnimation animation];
    animation.keyPath = @"transform.rotation";
    animation.duration = 3.0f;
    animation.repeatCount = INFINITY;
    animation.byValue = @(M_PI * 2);
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];;
    [_dynamicContentLayer addAnimation:animation forKey:animation.keyPath];
}

最后在父控制器的 View 上添加这个 matching view：

CPMatchingView *matchingView = [[CPMatchingView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
[self.view addSubview:matchingView];

本文 Demo

Demo 地址