CODEWITHSUNDEEP
iphoneioscore-animationcore-graphics
DD_
DD_

Reputation: 7398

Add subview with UIAlertVIew like animation,with a bouncing effect

How to give a bounce or pop up style animation while adding a subview in iOS? I need something similar to UIAlertView appearance style. I know there are several methods to do the same: but I prefer to use basic [UIView animateWithDuration: ...]; block here, so may I get some help regarding the transform I should use here to get the pop up effect?

Thanks

Upvotes: 18

Views: 13410

Answers (6)

Paresh Navadiya
Paresh Navadiya

Reputation: 38249

Animation for PopUp style :

Swift

    yourView.transform = CGAffineTransform(scaleX: 0.01, y: 0.01)
    UIView.animate(withDuration: 0.2, delay: 0, options: .curveEaseOut, animations: {() -> Void in
        yourView.transform = .identity
    }, completion: {(finished: Bool) -> Void in
        // do something once the animation finishes, put it here
    })

Reverse Animation with hiding the same View

    yourView.transform = .identity
    UIView.animate(withDuration: 0.2, delay: 0, options: .curveEaseOut, animations: {() -> Void in
        yourView.transform = CGAffineTransform(scaleX: 0.01, y: 0.01)
    }, completion: {(finished: Bool) -> Void in
        // do something once the animation finishes, put it here
        yourView.isHidden = true
    })

Objective-C

yourView.transform = CGAffineTransformMakeScale(0.01, 0.01);
[UIView animateWithDuration:0.2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
    yourView.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished){
    // do something once the animation finishes, put it here
}];

Reverse Animation with hiding the same View

 yourView.transform = CGAffineTransformIdentity;
[UIView animateWithDuration:0.2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
    yourView.transform = CGAffineTransformMakeScale(0.01, 0.01);
} completion:^(BOOL finished){
    yourView.hidden = YES;
}];

Upvotes: 52

Sudhir kumar
Sudhir kumar

Reputation: 731

Use below code working in swift3

func popIn(yourView : UIView){

    yourView.transform = CGAffineTransform(scaleX: 0.01, y: 0.01)
    UIView.animateKeyframes(withDuration: 0.2, delay: 0.0, options: UIViewKeyframeAnimationOptions.calculationModeDiscrete, animations: {
        yourView.transform = .identity
    }, completion: nil)


}
func popOut(yourView: UIView) {
    yourView.transform = .identity
    UIView.animateKeyframes(withDuration: 0.2, delay: 0.0, options: UIViewKeyframeAnimationOptions.calculationModeDiscrete, animations: {
        yourView.transform = CGAffineTransform(scaleX: 0.01, y: 0.01)
    }, completion:{(_ finish : Bool) in
        yourView.removeFromSuperview()}
    )
}

Upvotes: 0

kb920
kb920

Reputation: 3089

Try these three methodes..

****vwTemp is my custome alert view****

- (void)showAlertView
{
    vwTemp.transform = CGAffineTransformMakeScale( 0.001, 0.001);
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:kTransitionDuration/1.5];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(bounce1AnimationStopped)];
    vwTemp.transform = CGAffineTransformMakeScale( 1.1, 1.1);

   [UIView commitAnimations];   
}

 - (void)bounce1AnimationStopped 
{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:kTransitionDuration/2];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(bounce2AnimationStopped)];
    vwTemp.transform = CGAffineTransformMakeScale (0.9, 0.9);
    [UIView commitAnimations];
}



- (void)bounce2AnimationStopped
{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:kTransitionDuration/2];
    [UIView setAnimationDelegate:self];

    vwTemp.transform =  CGAffineTransformIdentity;
    [UIView commitAnimations];
}

Upvotes: 1

Oleh Kudinov
Oleh Kudinov

Reputation: 2543

Try this: 

self.popUpContainerView.alpha = 0;
[UIView animateWithDuration:0.1 animations:^{self.popUpContainerView.alpha = 1.0;}];
CAKeyframeAnimation *bounceAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
bounceAnimation.values = @[@0.01f, @1.1f, @1.0f];
bounceAnimation.keyTimes = @[@0.0f, @0.5f, @1.0f];
bounceAnimation.duration = 0.2;
[self.popUpContainerView.layer addAnimation:bounceAnimation forKey:@"bounce"];

Upvotes: 1

SachinVsSachin
SachinVsSachin

Reputation: 6427

I had already done before ... you can get my idea from this code . this may help you. if you have any problem, please let me know.thanks

- (CGAffineTransform)transformForOrientation {
UIInterfaceOrientation orientation = [UIApplication sharedApplication].statusBarOrientation;
if (orientation == UIInterfaceOrientationLandscapeLeft) {
    return CGAffineTransformMakeRotation(M_PI*1.5);
} else if (orientation == UIInterfaceOrientationLandscapeRight) {
    return CGAffineTransformMakeRotation(M_PI/2);
} else if (orientation == UIInterfaceOrientationPortraitUpsideDown) {
    return CGAffineTransformMakeRotation(-M_PI);
} else {
    return CGAffineTransformIdentity;
}
}



-(void)showCustomAlertView{
UIWindow *window = [UIApplication sharedApplication].keyWindow;
//self (this view pop up like alert)
[window addSubview:self];
self.transform = CGAffineTransformScale([self transformForOrientation], 0.001, 0.001);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:kTransitionDuration/1.5];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(bounce1AnimationStopped)];
self.transform = CGAffineTransformScale([self transformForOrientation], 1.1, 1.1);
[UIView commitAnimations];
}

- (void)bounce1AnimationStopped {
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:kTransitionDuration/2];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(bounce2AnimationStopped)];
self.transform = CGAffineTransformScale([self transformForOrientation], 0.9, 0.9);
[UIView commitAnimations];
}


- (void)bounce2AnimationStopped {
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:kTransitionDuration/2];
self.transform = [self transformForOrientation];
[UIView commitAnimations];
}

Upvotes: 2

Paras Joshi
Paras Joshi

Reputation: 20541

    yourView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.001, 0.001);
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.3/1.5];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(bounce1AnimationStopped)];
    [self.view addSubview:yourView];
    yourView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
    [UIView commitAnimations];

After bouncing animation two time this bellow two methods are used..

- (void)bounce1AnimationStopped {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.3/2];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(bounce2AnimationStopped)];
    yourView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.9, 0.9);
    [UIView commitAnimations];
}

- (void)bounce2AnimationStopped {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.3/2];
    yourView.transform = CGAffineTransformIdentity;
    [UIView commitAnimations];
}

Upvotes: 0

Related Questions