Question

I’m making a custom ImagePicker, similar to the usual UIImagePickerController, except that you can tap to select up to 3 photos. As you tap to select the first photo, a small UIView tray will slide in from the bottom and the selected thumbnail will appear there. As you tap to select the 2nd and 3rd photo, they are added to the selected photos tray. If you tap the same photo in the picker, it will be removed from the tray. (Apologies for the magic numbers in the code; I am still testing things out for now)

I’ve attached a cropped photo below to give an idea of how the tray looks with 3 photos correctly selected.

http://dl.dropbox.com/u/762437/screen1.jpg

Everything is working ok if the photos are tapped at a normal speed. However, if the user somehow decided to rapidly tap the photos in a random manner, it occasionally messes up the animation and the placement of the photos on the tray.

I’ve attached an example below. In the example below, there are actually only 2 photos selected, but somehow, the 3rd photo is still partially visible.

http://dl.dropbox.com/u/762437/screen2.jpg

I’m not sure how to to alleviate such behaviours when the user decides to just “mash the buttons”, so to speak.

I thought that maybe it might be good to use @synchronized(self) and wrap the inside of the assetsWasTapped function, but it didnt seem to do anything (assetsWasTapped is called from the main thread).

On occasion, I might see two photos being added to the same position in the tray, which makes me think that there is some timing issue with my NSMutableArray count (selectedPhotos), which I use to determine where each thumbnail should go.

I apologize for the specific question, but perhaps the more general version of it would be how to deal with animations and rapid user input.

Any help would be much, much appreciated. Thank you!

- (void)assetWasTapped:(CustomAsset*)tappedAsset
{
    // The asset thumbnail was tapped.  Check if the count is < 3 and add to the tray
    if([selectedAssets count] < 3)
    {
        NSMutableDictionary *dataToAdd = [NSMutableDictionary dictionaryWithObjectsAndKeys:
                                          tappedAsset, @"selectedAsset",
                                          [[tappedAsset.asset defaultRepresentation] url], @"selectedAssetURL",
                                          tappedAsset.indexPath, @"selectedAssetIndexPath",
                                          [NSNumber numberWithInt:[tappedAsset tag]], @"selectedAssetTag", nil];
        [selectedAssets addObject:dataToAdd];
        [self addAssetToSelectedTray:tappedAsset];
    }
}

- (void)addAssetToSelectedTray:(CustomAsset*)tappedAsset
{
    UIView *existingButton;
    int xPos = 30;

    CustomAsset *tempCustomAsset = [[[CustomAsset alloc] initWithAsset:tappedAsset.asset] autorelease];

    // Switch to deal with 1~3 selected assets
    switch ([selectedAssets count]) 
    {  
        case 1:
            tempCustomAsset.frame = CGRectMake(125, 8, 73, 73);
            [selectedPhotosTray addSubview:tempCustomAsset];
            break;
        case 2:
            for(existingButton in [selectedPhotosTray subviews])
            {

                [UIView animateWithDuration:0.1
                                      delay:0.0
                                    options:UIViewAnimationOptionCurveEaseOut 
                                 animations:^{ 
                                     existingButton.frame = CGRectMake(70, 8, 73, 73);
                                 }

                                 completion:^(BOOL  completed){

                                 }
                 ];
            }
            tempCustomAsset.frame = CGRectMake(180, 8, 73, 73);
            [selectedPhotosTray addSubview:tempCustomAsset];
            break;
        case 3:
            for(existingButton in [selectedPhotosTray subviews])
            {

                [UIView animateWithDuration:0.1
                                      delay:0.0
                                    options:UIViewAnimationOptionCurveEaseOut 
                                 animations:^{ 
                                     existingButton.frame = CGRectMake(xPos, 8, 73, 73);
                                 }

                                 completion:^(BOOL  completed){

                                 }
                 ];
                xPos += 95;
            }

            tempCustomAsset.frame = CGRectMake(220, 8, 73, 73);
            [selectedPhotosTray addSubview:tempCustomAsset];
            break;
        default:
            break;
    }
}

- (void)removeAssetFromSelectedTray:(CustomAsset*)tappedAsset
{
    // If the asset was removed, remove from the tray
    [UIView animateWithDuration:0.2
                          delay:0.0
                        options:UIViewAnimationOptionCurveEaseInOut 
                     animations:^{ 
                         tappedAsset.transform = CGAffineTransformMakeScale(0.3, 0.3);
                         tappedAsset.alpha = 0.0;
                     }

                     completion:^(BOOL  completed){
                         [tappedAsset removeFromSuperview];

                         if([selectedAssets count] == 0)
                         {
                             [self closeSelectedPhotosTrayWithAnimation:YES];
                         }

                         int xPos = 70;
                         UIButton *existingButton;
                         switch ([selectedAssets count]) 
                         {
                             case 1:
                                 for(existingButton in [selectedPhotosTray subviews])
                                 {
                                     [UIView animateWithDuration:0.1
                                                           delay:0.0
                                                         options:UIViewAnimationOptionCurveEaseOut 
                                                      animations:^{ 
                                                          existingButton.frame = CGRectMake(125, 8, 73, 73);
                                                      }

                                                      completion:^(BOOL  completed){

                                                      }
                                      ];
                                 }
                                 break;
                             case 2:

                                 for(existingButton in [selectedPhotosTray subviews])
                                 {
                                     [UIView animateWithDuration:0.1
                                                           delay:0.0
                                                         options:UIViewAnimationOptionCurveEaseOut 
                                                      animations:^{ 
                                                          existingButton.frame = CGRectMake(xPos, 8, 73, 73);
                                                      }
                                                      completion:^(BOOL  completed){
                                                      }
                                      ];

                                     xPos += 110;
                                 }            
                                 break;            
                             default:

                                 break;
                         }
                     }
     ];
}

Answer 1

When something like that happens for me the answer tends to be using the UIViewAnimationOptionBeginFromCurrentState or whatever its named. Don’t have code completion here haha.

But the could depend on how you’re doing your path. If it has a final resting place then that should fix it.

The other thing that you could do is set the userInteractionEnabled to NO in the beginning of the animation and then set it back to YES in the completion block to ensure only one animation goes at a time.