Move image 90 degree using Bezier curve

Question

I am new to iOS please some one help me to move image using Bezier curve along 90 degree path. I had searched but my doubt is not clear yet, So please help me.

I had tried this code but I would like to use Bezier curve.

- (void)startApp {
  UIImageView *imageToMove =
      [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"man.jpg"]];
  imageToMove.frame = CGRectMake(10, 10, 100, 100);
  [self.view addSubview:imageToMove];

  // Move the image
  [self moveImage:imageToMove
         duration:1.0
            curve:UIViewAnimationCurveLinear
                x:70.0
                y:70.0];
}

- (void)moveImage:(UIImageView *)image
         duration:(NSTimeInterval)duration
            curve:(int)curve
                x:(CGFloat)x
                y:(CGFloat)y {
  // Setup the animation
  [UIView beginAnimations:nil context:NULL];
  [UIView setAnimationDuration:duration];
  [UIView setAnimationCurve:curve];
  [UIView setAnimationBeginsFromCurrentState:YES];

  // The transform matrix
  CGAffineTransform transform = CGAffineTransformMakeTranslation(x, y);
  image.transform = transform;

  // Commit the changes
  [UIView commitAnimations];
}

http://stackoverflow.com/questions/1142727/how-can-i-animate-the-movement-of-a-view-or-image-along-a-curved-path see here already answered — ares777, Feb 18 '15 at 07:34

score 0 · Answer 1 · answered Feb 18 '15 at 08:00

You can rotate (transform) view using CABasicAnimation also. I have done some calculation for that.

- (void) rotateAnimation {

    CABasicAnimation *topAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
    topAnimation.autoreverses = NO;
    topAnimation.duration = 0.8;
    topAnimation.repeatDuration = 0;
    topAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DPerspect(CATransform3DMakeRotation(M_PI, 1, 0, 0), CGPointMake(0, 0), 400)];
    [image.layer addAnimation:topAnimation forKey:nil];
}

And supporting methods for that rotation are below:

CATransform3D CATransform3DMakePerspective(CGPoint center, float disZ)
{
    CATransform3D transToCenter = CATransform3DMakeTranslation(-center.x, -center.y, 0);
    CATransform3D transBack = CATransform3DMakeTranslation(center.x, center.y, 0);
    CATransform3D scale = CATransform3DIdentity;
    scale.m34 = -1.0f/disZ;
    return CATransform3DConcat(CATransform3DConcat(transToCenter, scale), transBack);
}

CATransform3D CATransform3DPerspect(CATransform3D t, CGPoint center, float disZ)
{
    return CATransform3DConcat(t, CATransform3DMakePerspective(center, disZ));
}

About rotation is on X-axis (horizontal) on respective layer. You can change axis value to Y and Z from below line in rotateAnimation.

CATransform3DMakeRotation(M_PI, 1, 0, 0), CGPointMake(0, 0), 400)]

By changing 1, 0, 0 values to 0, 1, 0 in above code will change rotation on Y axis and similarly for Z axis. Replace values and have look for rotation you like.

score 0 · Answer 2 · edited Feb 24 '15 at 12:28

Here is my UIImageView with IBOutlet named drawPad.

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150)
radius:100
startAngle:0
endAngle:(22.0f/7.0f)
clockwise:YES];

UIGraphicsBeginImageContext(self.view.frame.size);

path.lineCapStyle = kCGLineCapRound;
path.lineWidth = 10.0f;

[[UIColor blackColor] setStroke];
[path stroke];

self.drawpad.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Move image 90 degree using Bezier curve

2 Answers2