动画视图缩放弹跳？答案

【问题标题】：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
    }

【讨论】：