在曲线中移动UIImageview

Question

i am trying to add Image and move it on curve path. i have half circle with value 0 to 100. And i want to move that image with value.

This is image of my curve progress bar I want to rotate the pointer on that line.

If i try bezier curve i wont be able to spot my pointer . it will animation from start to end.

Any help how can i animate this.? 

Thanks

Answer 1

Use the following snippet of code for making half circle path. Replace the spin button with the needle you are required to use and provide angle to move the needle. I'm using this code for speedometer. Hope this helps for you.

- (void)spinButton : (UIView *)button : (float)angle
{

    button.layer.anchorPoint = CGPointMake(0.5, 0.5);

    CABasicAnimation *animation;
    animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

    // just for testing
    // angle +=200;

    if(angle >=360){angle = 360;}

    animation.fromValue = [NSNumber numberWithFloat:lastAngle];
    float m = angle/2 * (M_PI/180 );

    animation.toValue = [NSNumber numberWithFloat:(m)];
    // [CATransaction setValue:[NSNumber numberWithFloat:1.0] forKey:kCATransactionAnimationDuration];
    lastAngle =  m;
    // animation.duration = 1.0f;

    // to stop animation at last frame
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;

    animation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
    animation.autoreverses = NO;
    [button.layer addAnimation:animation forKey:@"rotationAnimation"];
    [CATransaction begin];
    // [CATransaction commit];
}

You can call this functions like this:

   [self spinButton:btn :0];
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self spinButton:btn :50];
    });

This way you can achieve your desired result.