的动画，圆的两端顺时针方向移动

Question

我必须在 IOS 中创建一个圆形动画，其中圆的两端都在增加，它的实际意思是一端在顺时针方向上以低速增加，而另一端以高速增加。从而做出完整的圆。

Answer 1

你可以试试这个代码。

-(CAShapeLayer *) createArcWithCenter:(CGPoint)center radius:(CGFloat)radius
                           startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle
                           clockwise : (BOOL)clockwise duration :(CGFloat)duration
{
    CAShapeLayer *circle = [CAShapeLayer layer];
    circle.path = [UIBezierPath
                   bezierPathWithArcCenter:center radius:radius
                   startAngle:startAngle endAngle:endAngle
                   clockwise:clockwise].CGPath;

    circle.fillColor = [UIColor clearColor].CGColor;
    circle.strokeColor = [UIColor greenColor].CGColor;
    circle.lineWidth = 4;

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = duration;
    animation.removedOnCompletion = NO;
    animation.fromValue = @(0);
    animation.toValue = @(1);
    animation.timingFunction=  [CAMediaTimingFunction
                                functionWithName:kCAMediaTimingFunctionLinear];

    [circle addAnimation:animation forKey:@"drawCircleAnimation"];

    return  circle;
}

-(void)viewDidAppear:(BOOL)animated
{

    CGFloat startAngle = 0.0;
    CGFloat endAngle1  = M_PI * 2.0 / 2;
    CGFloat endAngle2 = M_PI * 2.0 - endAngle1;


    CGPoint center = CGPointMake(50, 50);
    CGFloat radius = 50;
    CGFloat duration = 6.0;

    UIView *circleView = [[UIView alloc]initWithFrame:CGRectMake(100, 100, radius * 2 , radius * 2)];
    [self.view addSubview:circleView];

    CAShapeLayer *arc1 = [self
                          createArcWithCenter:center radius:radius
                          startAngle:startAngle endAngle:endAngle1
                          clockwise:YES duration:duration];

    arc1.strokeColor = [[UIColor redColor] CGColor];

    CAShapeLayer *arc2 = [self
                          createArcWithCenter:center radius:radius
                          startAngle:startAngle endAngle:endAngle2
                          clockwise:NO duration:duration];

    arc2.strokeColor = [[UIColor redColor] CGColor];

    [circleView.layer addSublayer:arc1];
    [circleView.layer addSublayer:arc2];
    //circleView.layer.anchorPoint = CGPointMake(0.5, 0.5);

    [UIView animateKeyframesWithDuration:duration delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{

        int numberOfAnimations = 8;
        CGFloat durationPerAnimation = 1.0/numberOfAnimations;
        for (int i = 0; i < numberOfAnimations; i++)
        {
            NSLog(@"%f",i*durationPerAnimation);
            [UIView addKeyframeWithRelativeStartTime:(i * durationPerAnimation) relativeDuration:durationPerAnimation animations:^{
                circleView.transform = CGAffineTransformRotate(circleView.transform, 3 * M_PI);
            }];
        }

    } completion:^(BOOL finished) {

    }];

}

您可以改变 endAngle1 和 endAngle2 来改变每个圆弧的角度。

的动画，圆的两端顺时针方向移动

Animation for ,Both end of circle moves in clockwisedirection

iphone

ios