iOS 中的 CAShapeLayer 抖动动画答案

【问题标题】：CAShapeLayer jittery animation in iOSiOS 中的 CAShapeLayer 抖动动画
【发布时间】：2016-10-14 12:40:24
【问题描述】：

我正在尝试使用以下代码沿圆角矩形的路径动画加载动画。（我需要将正方形的边框设置为加载器，部分边框。）它并不平滑，一旦它到达路径的末端，它就会跳到开始的开始笔画。

    shapeLayer = [CAShapeLayer layer];
    CGRect shapeRect = _border.bounds;//CGRectMake(0.0f, 0.0f, 200.0f, 100.0f);
    [shapeLayer setBounds:shapeRect];

    [shapeLayer setContents:_border.image];
    shapeLayer.contentsGravity = kCAGravityCenter;
    NSLog(@"center of border %@",NSStringFromCGPoint(_border.center) );

    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:shapeLayer.bounds cornerRadius:BORDER_ANGLE];
    [shapeLayer setPath:path.CGPath];
    shapeLayer.position = _border.center;

    [[self.view layer] addSublayer:shapeLayer];
    [[self.view layer] insertSublayer:shapeLayer above:_border.layer];


    [shapeLayer setFillColor:[[UIColor clearColor] CGColor]];
    [shapeLayer setStrokeColor:[[UIColor whiteColor] CGColor]];
    [shapeLayer setLineWidth:2.5f];


    shapeLayer.strokeStart = 0;
    shapeLayer.strokeEnd = 0.1;

    UIImageView * image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ball"]];
    image.center = CGPointMake(187, 220.5);


    startAnim = [CABasicAnimation animationWithKeyPath:@"strokeStart"];

    startAnim.duration = SPEED;
    startAnim.delegate = self;

    startAnim.repeatCount=200;
    startAnim.removedOnCompletion = FALSE;
    startAnim.toValue = [NSNumber numberWithFloat:0.3];
    endAnim = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

    endAnim.toValue = [NSNumber numberWithFloat:0.99];
    endAnim.duration = SPEED;
    endAnim.repeatCount = 200;
    endAnim.removedOnCompletion = NO;
    endAnim.cumulative = NO;


    [shapeLayer addAnimation:startAnim forKey:nil];
    [shapeLayer addAnimation:endAnim forKey:nil];

但是上面的代码到达endAnim的tovalue后会抖动，重新开始，不流畅。

请帮助我知道哪些部分出了问题。我看到了很多关于加载器的教程，但所有这些都是针对圆形路径而不是方形的。 [在此处输入图片说明][1]

！ [1]：https://i.stack.imgur.com/FwT01.png

【问题讨论】：

没有人尝试过使用图层制作动画？我想避免使用多个 png 图像来制作动画。它只是缺少我缺少的小东西。如果有人知道它为什么会紧张，请告诉我。谢谢
糟糕的是，我添加了整个代码，首先我将动画都放在组动画中，并尝试添加组动画而不是单个动画，但它不起作用，所以我分别添加了两个动画。并且在到达动画结束后没有正确发生，所以我试图改变 endAnim 的值，尽管把它放在那里非常愚蠢。
我猜我的动画会因为笔画值而受到影响，但我尝试使用它但没有运气。我必须移动部分边框，令人沮丧的是小问题让它卡住了 2 天:(。请让我知道是否有人对笔画值有很好的了解，虽然我读过很少但仍然有建议，欢迎帮助.
我已经更新了我的代码，我的理解是，一旦达到 strokeEnd 值，目标就会刷新。如何控制它。由于动画的其余部分很好，它在达到基本动画的 StrokeEnd 值后会抖动。
在浪费了我的时间之后，我才意识到动画的价值在于抖动的原因，我经历了所有与同一问题相关的 SO 线程，就像这样 stackoverflow.com/questions/1376753/… 和我尝试了所有可能的解决方案，但仍然没有运气。因此，它的一个简单的旋转动画没有发生，这让它感到沮丧。

标签： ios cabasicanimation caanimation

【解决方案1】：

只想填充 50% 的边框并连续旋转

好的。所以不要使用形状图层的动画。画出正方形。现在制作一个填充正方形的蒙版，其中一半是空的。把面具放在你的广场上。所以现在我们只看到你方格的 50%，因为其余部分被掩盖了。明白了吗？

现在旋转面具。

【讨论】：

好的，让我解释一下我的需要/要求。我需要展示加载效果，就像你看到的那些半圆形旋转一样。所以在这里我只想用正方形替换圆形。但是是方形的，正如你提到的它有角，所以我必须使用 strokeStart 和 strokeEnd 填充它。一切顺利，但完成后它会重置所有笔画值。我需要掌握这种情况。我尝试使用 animationDidStart 和 animationDidStop 但没有运气。我确实设置了诸如 stroke fillMode 之类的属性值，但仍然没有运气。
我不想填充整个正方形，只想填充 50% 的边框并连续旋转。