当前位置： 文江博客话题详情

动画视图缩放弹跳？

发布于 2024-11-09 11:59:02 字数 65 浏览 0 评论 0原文

有没有一种方法可以对视图进行动画处理，使其放大并有点走得太远，然后用橡皮筋恢复到最终尺寸？我不确定如何制作这种动画。

原文

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.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（10）

倾｀听者〃 2024-11-16 11:59:03

如今，这可以通过更简单的方式完成：

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

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;
}];
回复 原文
猫性小仙女 2024-11-16 11:59:03

阿米特的回答很好并且被接受了。我在这里为那些想要在 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
                    })
                })
            })

希望这有帮助。

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.

回复 原文
满栀 2024-11-16 11:59:03

只是为了将来的代码重用和保持代码干净。

@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

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
回复 原文
又怨 2024-11-16 11:59:03

使用以下代码来实现缩放弹跳动画。

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

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"];
回复 原文
霞映澄塘 2024-11-16 11:59:03

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

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){}];
回复 原文
梦里人 2024-11-16 11:59:03

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

Check the animation related section in UIView Class Reference in your Xcode. Hint: use transform property.

回复 原文
眉目亦如画i 2024-11-16 11:59:03

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
    }

Swift 5

With a callback on completion.

    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()
        })
    }

Use:

    bounceIn() {
        // doStuff when animation is complete
    }
回复 原文
表情可笑 2024-11-16 11:59:02

当您想触发此动画时编写此代码

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），因为它已被接受答案，因此更新到最新版本。

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.

回复 原文
眼眸里的那抹悲凉 2024-11-16 11:59:02

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

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;                            
        }];
    }];
}];
回复 原文
伪心 2024-11-16 11:59:02

太多复杂的答案

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.

回复 原文
~没有更多了~

关于作者

等风也等你

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文