UIImageView & UILabel Animation Synchronizing Issue

rameshmrthy · July 2012

I am displaying character dialogues inside a speech bubble which opens & closes in a animated way. Here is the code logic:

@synthesize uiImageViewC1;
@synthesize uiLabelC1;
@synthesize uiImageViewC2;
@synthesize uiLabelC2;

-(void)hideDialogue{
    [UIView animateWithDuration:0.5
                     animations:^(void) {
                         uiImageViewC1.frame = CGRectMake(250, 350, 0, 0);
                         uiLabelC1.frame = CGRectMake(30, 10, 0, 0);
                     } completion:nil];

}

-(void)showDialogue:(NSString *)dialogueID{

    NSString* txt = @\"Defaukt text\";
    NSString* adio = @\"Default audio location\";
    NSDictionary *mainDictionary = [NSDictionary dictionaryWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@\"dialogues\" ofType:@\"plist\"]];

    if (mainDictionary != nil){
        NSLog(@\"showDialogue: mainDictionary != nil\");
        NSDictionary *innerDictionary = [mainDictionary objectForKey:dialogueID];
        if (innerDictionary != nil){
            NSLog(@\"showDialogue: innerDictionary != nil\");
            txt = [innerDictionary objectForKey:@\"text\"];
            adio = [innerDictionary objectForKey:@\"audio\"];
        }
    }else{
        NSLog(@\"showDialogue: mainDictionary == nil\");
    }


CGSize size = [txt sizeWithFont:[UIFont systemFontOfSize:14.0] constrainedToSize:CGSizeMake(250.0f, CGFLOAT_MAX) lineBreakMode:UILineBreakModeWordWrap];


    UIImage *bubble = [[UIImage imageNamed:@\"BubbleLefthand.png\"] //41 X 39
                       resizableImageWithCapInsets:UIEdgeInsetsMake(19, 21, 19, 21)]; // UIEdgeInsetsMake: CGFloat top, left, bottom, right;

    uiLabelC1.text = txt;
    uiImageViewC1.image = bubble;
    uiImageViewC1.frame = CGRectMake(250, 350, 0, 0);
    [UIView animateWithDuration:0.5
                     animations:^(void) {
                         uiImageViewC1.frame = CGRectMake(250, 350, size.width + 60.0f, -(size.height + 30.0f));
                         uiLabelC1.frame = CGRectMake(30, 10, size.width + 20.0f, size.height);
                     } completion:^(BOOL finished) {
                         STLog(@\"ChildrenBookViewController: showDialogue ==> SPPECH BUBBLE ANIMATION COMPLETE. Switch Case: %d\", pageNum);
                         [self performSelector:@selector(hideDialogue) withObject:nil afterDelay:5.0];

                     }];

}

This is how I call inside viewDidLoad:

[self performSelector:@selector(showDialogue:) withObject:@\"1_C1_1\" afterDelay:3.0];
[self performSelector:@selector(showDialogue:) withObject:@\"1_C2_1\" afterDelay:10.0];

Above logic works but animation for closing of dialogue is not smooth. Label text disappears first and then an empty speech bubble image closes. I will be using this logic a lot inside my children's book app. Is there a better way to implement this logic?

McCaffers · July 2012

Setup two animations, the second with a small delay.

Also use UIViewAnimationOptionCurveEaseOut for a nicer animation. As it says the view will "ease out". There are others too, check out UIViewAnimationOptions.

[UIView animateWithDuration:0.5f
                  delay:0.0f
                options:UIViewAnimationOptionCurveEaseOut
             animations:^{
                uiLabelC1.frame = CGRectMake(30, 10, 0, 0);
             }
             completion:^(BOOL finished) {}];

[UIView animateWithDuration:0.5f
                  delay:0.2f
                options:UIViewAnimationOptionCurveEaseOut
             animations:^{
                uiImageViewC1.frame = CGRectMake(250, 350, 0, 0);
             }
             completion:^(BOOL finished) {}];

Edit: If you want the animation to go a constant speed instead of easing you can use options:UIViewAnimationOptionCurveLinear

Howdy, Stranger!

Forums

UIImageView & UILabel Animation Synchronizing Issue

Replies