动画视图缩放弹跳？
Posted
技术标签:
【中文标题】动画视图缩放弹跳？【英文标题】：Animate a view zoom-bouncing in? 【发布时间】：2011-05-26 01:57:52 【问题描述】：有没有办法为视图设置动画，使其放大并有点过分，并且橡皮筋回到最终大小？我不确定如何制作这种动画。
【问题讨论】：
【参考方案1】：当你想触发这个动画时写这个代码
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
)
这是更新的代码（来自 fabio.cionini），因为它已被接受，因此更新为最新的。
【讨论】：
这是反弹和缩放类型动画的正确代码，您也可以在 Facbook API 中找到此代码，旧的 facebook api..... 只是为了添加到对话中，您可以更改动画点，例如：popUp.center=CGPointMake(0,0) 并在您的动画块内：popUp.center=self.view.center 这将创造 popUp 来自视图边缘并在视图内居中的错觉... 非常有用。谢谢。 太棒了，谢谢。使用它，我可以在不到两分钟的时间内为图像（instagram-ish）添加一个很酷的心跳动画！ 超级...非常感谢【参考方案2】：刚刚由 Amit Singh 使用块重构了代码，这使其更简单和可读。
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】：太多复杂的答案?。从 2017 年（Swift 3/4）开始，这样做要容易得多。
斯威夫特 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)
注意usingSpringWithDamping 参数。这个参数决定了你想要多少反弹/弹簧效果，并允许从 0 到 1 的值。值越低，反弹效果越多。此外，如果您不喜欢scaleBy 效果，那么您可以简单地使用好的旧框架来显示扩展和弹跳UIView。
【讨论】：
我也走这条路。好奇你为什么使用.curveEaseInOut，不使用物理弹簧的动画曲线意味着你不使用easeInOut 曲线吗？似乎没有意义
CGAffineTransform.identity.scaleBy(1, 1) 等价于 CGAffineTransform.identity
这个春季动画也可以在 Swift 5 中使用。【参考方案4】：
如今，这可以通过更简单的方式完成：
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 的回答很好并且被接受。我在这里为想要在 Swift/future 中开发的人发布了该答案的 Swift 版本。我使用 Xcode 7.3.1 和 Swift 2.2 来开发这个。
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
)
)
)
谢谢，请对更新发表评论。
更新 这是 Swift 3 的相同代码。适用于 Xcode 8 和 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
)
)
)
希望这会有所帮助。
【讨论】：
【参考方案6】：只是为了将来的代码重用和保持代码干净。
@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
【讨论】：
如何用相同的动画隐藏它？ @Gabriel Molter：只需反转上面的动画，最后一个块是：popUp.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.001, 0.001);【参考方案7】：使用以下代码进行缩放弹跳动画。
#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】：用于 iOS9 和 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】：在您的 Xcode 中查看 UIView 类参考中的动画相关部分。提示：使用变换属性。
【讨论】：
【参考方案10】：斯威夫特 5
完成时回调。
func bounceIn(_ callBack: @escaping ()->())
let scaleTransform = CGAffineTransform(scaleX: 0.0, y: 0.0)
self.transform = scaleTransform
UIView.animate(
withDuration: 0.5,
usingSpringWithDamping: 0.4,
initialSpringVelocity: 0.4,
options: [UIView.AnimationOptions.curveLinear],
animations: [weak self] in
self?.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
,
completion: (finished: Bool) -> Void in
callBack()
)
用途：
bounceIn()
// doStuff when animation is complete
【讨论】：
以上是关于动画视图缩放弹跳？的主要内容，如果未能解决你的问题，请参考以下文章