动画视图缩放 - 弹跳?

时间:2011-05-26 01:57:53

标签: iphone objective-c

是否有办法为视图设置动画以使其放大并且有点过分而橡皮筋又回到最终尺寸?我不确定如何做这种动画。

11 个答案:

答案 0 :(得分:98)

如果要触发此动画,请编写此代码

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;                            
        }];
    }];
}];

这是更新的代码(来自fabio.cionini),因为它被接受答案,所以更新到最新。

答案 1 :(得分:45)

使用块重构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;                            
        }];
    }];
}];

答案 2 :(得分:12)

太多复杂的答案。截至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)

请注意usingSpringWithDamping参数。此参数指示您需要多少反弹/弹簧效果,并允许从0到1的值。值越低,反弹效果越大。此外,如果您不喜欢scaleBy效果,那么您只需使用优质旧框架即可展示展开和弹跳UIView

答案 3 :(得分:8)

这些日子可以用更简单的方式完成:

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;
}];

答案 4 :(得分:6)

阿米特的回答很好,接受了一个。对于想要在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
                    })
                })
            })

希望这会有所帮助。

答案 5 :(得分:5)

仅用于将来的代码重用并保持代码清洁。

@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

答案 6 :(得分:1)

使用以下代码进行缩放弹跳动画。

 #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"];

答案 7 :(得分:1)

与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){}];

答案 8 :(得分:0)

检查Xcode中UIView类参考中的动画相关部分。提示:使用转换属性。

答案 9 :(得分:0)

这是一篇关于如何使用各种不同的弹跳技术的文章,应该让你到那里

http://watchingapple.com/2008/04/core-animation-creating-a-jack-in-the-box-with-cakeyframeanimation/

答案 10 :(得分:0)

Swift 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
    }