animate UIView in a loop - objective-c

Question

I am creating an app that will show how a bubble sort works. The one problem I am having is the animation. It seems to be skipping and the animation is firing all at once. Within my if statement I want to swap the two images and animate the swap. Then I want a delay so once they swap it will go back through the loop and swap the next two images. Below is my code. I have tried many things like sleep() but it did not seems to work. The images are four boxes and I'm swapping them by left to right, smallest to largest.
for (int i = 0; i < 3; i++)
{
UIImageView *temp1 = [imagesArray objectAtIndex:i];
UIImageView *temp2 = [imagesArray objectAtIndex:i+1];
temp1Width = temp1.frame.size.width;
temp2Width = temp2.frame.size.width;
if (temp1Width > temp2Width)
{
CGPoint tempPoint = temp1.center;
[UIView animateWithDuration:1.0
delay: 1.0
options: nil
animations:^{
temp1.center = temp2.center;
}
completion:^(BOOL finished){
[UIView animateWithDuration:1.0
delay: 0.0
options: nil
animations:^{
temp2.center = tempPoint;
}
completion:^(BOOL finished){
}];
}];
[imagesArray exchangeObjectAtIndex:i+1 withObjectAtIndex:i];
}
}
Any Help would be appreciated.

Answer 1

If you apply an animation to a view that's already being animated, the new animation replaces the existing animation. It doesn't just get tacked on to the end. That's why your version doesn't work the way you want.
This happens even if you set a delay on the new animation. The existing animation will be removed, and the new animation will start after the specified delay. This prevents k20's simple answer from working. (Too bad, because that would be a really easy solution.)
So, a very simple alternative is to defer adding each additional animation at all. This is pretty easy with the dispatch_after function. First, let's factor out the code that swaps the views' Y origins into a helper function:
static void swapViewYOrigins(UIView *a, UIView *b) {
CGRect aFrame = a.frame;
CGRect bFrame = b.frame;
CGFloat t = aFrame.origin.y;
aFrame.origin.y = bFrame.origin.y;
bFrame.origin.y = t;
a.frame = aFrame;
b.frame = bFrame;
}
Now we can write the sort function, making it use dispatch_after to postpone each successive animation:
- (IBAction)sortButtonWasTapped {
NSTimeInterval duration = 1;
dispatch_time_t time = DISPATCH_TIME_NOW;
for (int i = imagesArray.count - 1; i > 0; --i) {
for (int j = 0; j < i; ++j) {
UIView *a = imagesArray[j];
UIView *b = imagesArray[j+1];
if (a.frame.size.width > b.frame.size.width) {
imagesArray[j] = b;
imagesArray[j+1] = a;
dispatch_after(time, dispatch_get_main_queue(), ^{
[UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
swapViewYOrigins(a, b);
} completion:nil];
});
time = dispatch_time(time, duration * NSEC_PER_SEC);
}
}
}
}
So this is an ok solution, but it does have one shortcoming. It's not easy to add a button that cancels the animations, because there's no API that removes a pending dispatch_after block from the queue.
If you want to support cancelation, it's better to explicitly manage the queue of pending operations. We can do that by adding an instance variable to hold the queue:
#implementation ViewController {
IBOutletCollection(UIView) NSMutableArray *imagesArray;
NSMutableArray *pendingSwaps;
}
Then, we modify sortButtonWasTapped to add a block to the queue instead of calling dispatch_after, and we make it start running the queue after it finishes sorting:
- (IBAction)sortButtonWasTapped {
pendingSwaps = [NSMutableArray array];
for (int i = imagesArray.count - 1; i > 0; --i) {
for (int j = 0; j < i; ++j) {
UIView *a = imagesArray[j];
UIView *b = imagesArray[j+1];
if (a.frame.size.width > b.frame.size.width) {
imagesArray[j] = b;
imagesArray[j+1] = a;
[pendingSwaps addObject:^{
swapViewYOrigins(a, b);
}];
}
}
}
[self runPendingSwaps];
}
We're using the same swapViewYOrigins function as before. We run the pending swaps like this:
- (void)runPendingSwaps {
if (pendingSwaps.count == 0)
return;
void (^swapBlock)(void) = pendingSwaps[0];
[pendingSwaps removeObjectAtIndex:0];
[UIView animateWithDuration:1 animations:swapBlock completion:^(BOOL finished) {
[self runPendingSwaps];
}];
}
So, we just stop if the queue is empty. Otherwise, we take the first block off the queue, and we use it as the animation block of a UIView animation. We give the animation a completion block that calls runPendingSwaps again, which starts the next pending animation (if there is one) after the current one finishes.
To cancel, we can just set pendingSwaps to nil:
- (IBAction)cancelButtonWasTapped {
pendingSwaps = nil;
}
Note that if the user taps Cancel, the views will not necessarily be in the same order on the screen as they are in imagesArray, because imagesArray is fully sorted when sortButtonWasTapped returns. We can fix that by sorting imagesArray by Y origins (using the built-in sort) before starting the bubble sort:
- (IBAction)sortButtonWasTapped {
[self sortImagesArrayByY];
// etc. same as previous version
}
- (void)sortImagesArrayByY {
[imagesArray sortUsingComparator:^NSComparisonResult(id obj1, id obj2) {
CGFloat d = [obj1 frame].origin.y - [obj2 frame].origin.y;
return
d < 0 ? NSOrderedAscending
: d > 0 ? NSOrderedDescending
: NSOrderedSame;
}];
}
With this in place, you can click the Sort button, then click Cancel before the views have been fully sorted on screen, then click Sort again and it will resume (by performing bubble sort again).

Answer 2

Try doing it implicitly with a timer instead of using a loop and a delay. For example, you could use a scheduled NSTimer whose duration is equal to or greater than the animation time to fire this method:
- (void)performNextAnimation:(NSTimer *)timer
{
BOOL didSwap = NO;
for(NSInteger i = 0; i < [self.imageViews count] - 1; ++i)
{
UIImageView *image1 = [self.imageViews objectAtIndex:i];
UIImageView *image2 = [self.imageViews objectAtIndex:(i + 1)];
if(image1.frame.size.width <= image2.frame.size.width)
continue;
CGPoint center1 = image1.center;
CGPoint center2 = image2.center;
[UIView animateWithDuration:AnimationDuration
delay:0
options:UIViewAnimationOptionCurveEaseInOut
animations:^
{
image1.center = center2;
image2.center = center1;
}
completion:nil];
[self.imageViews exchangeObjectAtIndex:(i + 1) withObjectAtIndex:i];
didSwap = YES;
break;
}
if(!didSwap)
{
[self.animationTimer invalidate];
self.animationTimer = nil;
NSLog(#"Done!");
}
}
This simply finds the first two views that are out of order and swaps them, moving them to one another's center point simultaneously. You can, of course, choose any type of animation to perform for each out-of-order pair.
For completeness, here's how I set up my timer and views in the first place:
self.animationTimer = [NSTimer scheduledTimerWithTimeInterval:AnimationDuration
target:self
selector:#selector(performNextAnimation:)
userInfo:nil
repeats:YES];
CGFloat viewCenterX = self.view.center.x;
self.imageViews = [NSMutableArray array];
const CGFloat imageHeight = 35;
const CGFloat imageMargin = 10;
for(size_t i = 0; i < 10; ++i)
{
CGFloat imageWidth = arc4random_uniform(250) + 30;
CGRect imageFrame = CGRectMake(viewCenterX - imageWidth * 0.5, i * (imageHeight + imageMargin) + imageMargin,
imageWidth, imageHeight);
UIImageView *imageView = [[UIImageView alloc] initWithFrame:imageFrame];
imageView.backgroundColor = [UIColor redColor];
[self.view addSubview:imageView];
[self.imageViews addObject:imageView];
}

Answer 3

Even if you call the animateWithDuration:delay: different times, they are being called at almost the same time (the "for" time). As all of them have the same delay, you don't see the animation.
An easy fix would be using a dynamic delay:
[UIView animateWithDuration:AnimationDuration
delay:i
...