iOS: Custom activity indicator

Question

I am trying to create custom activity indicator it has two images one image will be static (in the background) and another image will be in the front, it has to move left, right, top and bottom (just to give animation feel). I tried to use the following code (Its wrong one). Can anyone help me, how to do animation

UIImage *statusImage = [UIImage imageNamed:@"image1.png"];
UIImageView *activityImageView = [[UIImageView alloc]
                                  initWithImage:statusImage];


//Add more images which will be used for the animation
activityImageView.animationImages = [NSArray arrayWithObjects:
                                     [UIImage imageNamed:@"image1.png"],
                                     [UIImage imageNamed:@"image2.png"], nil];


//Set the duration of the animation (play with it
//until it looks nice for you)
activityImageView.animationDuration = 7;

activityImageView.frame = CGRectMake(
                                     self.view.frame.size.width/2
                                     -statusImage.size.width/3,
                                     self.view.frame.size.height/2
                                     -statusImage.size.height/3,
                                     statusImage.size.width/3,
                                     statusImage.size.height/3);

//Start the animation
[activityImageView startAnimating];

Answer 1

A UIImageView can animate through the images, kind of like a gif. What you want can be achieved much more elegantly using CAAnimation. This code gives shows you an animation to left and right:

- (CATransform3D) moveToRight
{
    return [self moveWithScale:CGSizeMake(0.25f, 1.5f)];
}
- (CATransform3D) moveToLeft
{
    return [self moveWithScale: CGSizeMake(-0.25f, 1.5f)];
}
- (CATransform3D) moveWithScale: (CGSize) scale
{
    CGAffineTransform scaleTransform CGAffineTransformMakeScale(ABS(scale.width), scale.height);
    CGFloat XTranslationFactor = (1.0f - ABS(scale.width)) / 2.0 * (ABS(scale.width) / scale.width);

    CGAffineTransform translationTransform = CGAffineTransformMakeTranslation(XTranslationFactor * self.bounds.size.width,
                                                                          0.0f);
    CGAffineTransform completeTransform = CGAffineTransformConcat(scaleTransform, translationTransform);

    CATransform3D transform3D = CATransform3DMakeAffineTransform(completeTransform);
    return transform3D;
}
- (NSArray *) keyFrameAnimationValues
{
    values = @[[NSValue valueWithCATransform3D: [self moveToLeft]],
               [NSValue valueWithCATransform3D: [self moveToRight]],
               [NSValue valueWithCATransform3D: [self moveToTop]],
               [NSValue valueWithCATransform3D: [self moveToBottle]]
               ];
}

- (void) startAnimating
{
    NSArray * values = [self keyFrameAnimationValues];
    NSInteger frameCount = frameValues.count;
    CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath: @"transform"];
    keyFrameAnimation.duration = 7;
    keyFrameAnimation.calculationMode = kCAAnimationCubic;
    keyFrameAnimation.values = [self keyFrameAnimationValues];
    // this next part could be done a little more generic
    // by constructing the array dynamically using a for loop,
    // but this will give you an idea
    keyFrameAnimation.keyTimes = @[@(1.0f / frameCount),
                                   @(2.0f / frameCount),
                                   @(3.0f / frameCount),
                                   @(4.0f / frameCount)
                                 ];
    keyFrameAnimation.repeatCount = HUGE_VALF;
    [self.layer addAnimation: keyFrameAnimation forKey: @"myAnimation"];
}

Answer 2

Create a CAAnimation for the layer which you want to move at each corners and add it as a positioning object. Hope it helps