问题
Is there a way to animate a view so that it zooms up and kinda goes a bit too far and rubberbands back to the final size? I'm unsure how to do this sort of animation.
回答1:
write this code when you want to trigger this animation
popUp.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.001, 0.001);
[self.view addSubview:popUp];
[UIView animateWithDuration:0.3/1.5 animations:^{
popUp.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3/2 animations:^{
popUp.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.9, 0.9);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3/2 animations:^{
popUp.transform = CGAffineTransformIdentity;
}];
}];
}];
SWIFT 5.0
selectView.transform =
CGAffineTransform.identity.scaledBy(x: 0.001, y: 0.001)
view.addSubview(selectView)
UIView.animate(withDuration: 0.3 / 1.5, animations: {
selectView.transform =
CGAffineTransform.identity.scaledBy(x: 1.1, y: 1.1)
}) { finished in
UIView.animate(withDuration: 0.3 / 2, animations: {
selectView.transform = .identity.scaledBy(x: 0.9, y: 0.9)
}) { finished in
UIView.animate(withDuration: 0.3 / 2, animations: {
selectView.transform = CGAffineTransform.identity
})
}
}
This is updated code (from fabio.cionini) as it is accepted answer so updating to latest.
回答2:
Just refactored the code by Amit Singh using blocks, which makes it much simpler and readable.
popUp.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.001, 0.001);
[self.view addSubview:popUp];
[UIView animateWithDuration:0.3/1.5 animations:^{
popUp.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3/2 animations:^{
popUp.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.9, 0.9);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3/2 animations:^{
popUp.transform = CGAffineTransformIdentity;
}];
}];
}];
回答3:
Too many complicated answers 😊. It's much easier to do it as of 2017 (Swift 3/4).
Swift 4-
yourview.transform = yourview.transform.scaledBy(x: 0.001, y: 0.001)
UIView.animate(withDuration: 0.5, delay: 0.0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.3, options: .curveEaseInOut, animations: {
yourview.transform = CGAffineTransform.identity.scaledBy(x: 1.0, y: 1.0)
}, completion: nil)
Note the usingSpringWithDamping parameter. This parameter dictates how much bounce/spring effect you want and allows values from 0 to 1. The lower the value the more the bounce effect. Also, if you do not like the scaleBy effect then you can simply use good old frames to show a expanding and bouncing UIView.
回答4:
This can be done in a much simpler way these days:
view.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.001, 0.001);
[UIView animateWithDuration:0.5 delay:0.2 usingSpringWithDamping:0.6f initialSpringVelocity:1.f options:UIViewAnimationOptionCurveEaseInOut animations:^{
view.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.0, 1.0);
} completion:^(BOOL finished) {
view.transform = CGAffineTransformIdentity;
}];
回答5:
Amit's answer is nice and accepted one. I am posting the Swift version of that answer over here for someone who wants to develop in Swift/future. I have used Xcode 7.3.1 and Swift 2.2 to develop this.
popView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.001, 0.001)
self.view.addSubview(popView)
UIView.animateWithDuration(0.3/1.0, animations: {
popView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1)
}, completion: {finished in
UIView.animateWithDuration(0.3/1.2, animations: {
popView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.9, 0.9);
}, completion: {finished in
UIView.animateWithDuration(0.3/1.5, animations: {
popView.transform = CGAffineTransformIdentity
})
})
})
Thanks and please do comment for update.
UPDATE Here is the same code for Swift 3. Works well with Xcode 8 and iOS 10.
let identityAnimation = CGAffineTransform.identity
let scaleOfIdentity = identityAnimation.scaledBy(x: 0.001, y: 0.001)
popView.transform = scaleOfIdentity
self.view.addSubview(popView)
UIView.animate(withDuration: 0.3/1.5, animations: {
let scaleOfIdentity = identityAnimation.scaledBy(x: 1.1, y: 1.1)
popView.transform = scaleOfIdentity
}, completion: {finished in
UIView.animate(withDuration: 0.3/2, animations: {
let scaleOfIdentity = identityAnimation.scaledBy(x: 0.9, y: 0.9)
popView.transform = scaleOfIdentity
}, completion: {finished in
UIView.animate(withDuration: 0.3/2, animations: {
popView.transform = identityAnimation
})
})
})
Hope this helped.
回答6:
Just for future code reuse and keeping code clean.
@interface UIView (Animation)
- (void)addSubviewWithBounce:(UIView*)theView;
@implementation UIView (Animation)
-(void)addSubviewWithBounce:(UIView*)theView
{
theView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.001, 0.001);
[self addSubview:theView];
[UIView animateWithDuration:0.3/1.5 animations:^{
theView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3/2 animations:^{
theView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.9, 0.9);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3/2 animations:^{
theView.transform = CGAffineTransformIdentity;
}];
}];
}];
}
@end
回答7:
Use following code for zoom bouncing animation.
#define DURATION 1.0
CAKeyframeAnimation *animation = [CAKeyframeAnimation
animationWithKeyPath:@"transform"];
CATransform3D scale1 = CATransform3DMakeScale(0.5, 0.5, 1);
CATransform3D scale2 = CATransform3DMakeScale(1.2, 1.2, 1);
CATransform3D scale3 = CATransform3DMakeScale(0.9, 0.9, 1);
CATransform3D scale4 = CATransform3DMakeScale(1.0, 1.0, 1);
NSArray *frameValues = [NSArray arrayWithObjects:
[NSValue valueWithCATransform3D:scale1],
[NSValue valueWithCATransform3D:scale2],
[NSValue valueWithCATransform3D:scale3],
[NSValue valueWithCATransform3D:scale4],
nil];
[animation setValues:frameValues];
NSArray *frameTimes = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:0.5],
[NSNumber numberWithFloat:0.9],
[NSNumber numberWithFloat:1.0],
nil];
[animation setKeyTimes:frameTimes];
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
animation.duration = DURATION;
[animationView.layer addAnimation:animation forKey:@"popup"];
回答8:
Used with iOS9 and xCode 7
//for zoom in
[UIView animateWithDuration:0.5f animations:^{
self.sendButton.transform = CGAffineTransformMakeScale(1.5, 1.5);
} completion:^(BOOL finished){}];
// for zoom out
[UIView animateWithDuration:0.5f animations:^{
self.sendButton.transform = CGAffineTransformMakeScale(1, 1);
}completion:^(BOOL finished){}];
回答9:
Check the animation related section in UIView Class Reference in your Xcode. Hint: use transform property.
回答10:
This is an article on how to use various different bouncing techniques, should get you there
http://watchingapple.com/2008/04/core-animation-creating-a-jack-in-the-box-with-cakeyframeanimation/
来源：https://stackoverflow.com/questions/6132933/animate-a-view-zoom-bouncing-in