iOS - 动画效果 - 图片弹出

iOS - Animation effects - Image pop-in

提问by Brian Boyle

I'd like to have an image in my iphone app "pop-in" on screen rather than just appearing. By "pop-in" I mean that it would grow from a small dot to its actual size. For reference, this is exactly the same as the "pop" animation effect in Keynote. I'm completely new to iOS animations, so if someone could point me in the direction on the animation effects I would need to use, it would be greatly appreciated.

我想在我的 iphone 应用程序“弹出”屏幕上有一个图像，而不是仅仅出现。“弹出”我的意思是它会从一个小点增长到它的实际大小。作为参考，这与 Keynote 中的“流行”动画效果完全相同。我对 iOS 动画完全陌生，所以如果有人能指出我需要使用的动画效果的方向，我将不胜感激。

Thanks

谢谢

Brian

布赖恩

UPDATEI've added this code from the suggestions below. This works but it scales my image down, rather than up. I know that is because I have 0.01 as the transform scale size, but I would like to know how I can start out with an image of size 0.0 and scale up to 1. Is it just a matter to setting the size of my image to 0? Thanks

更新我从下面的建议中添加了这段代码。这有效，但它缩小了我的形象，而不是放大了。我知道这是因为我有 0.01 作为变换比例大小，但我想知道如何从大小为 0.0 的图像开始并缩放到 1。将我的图像大小设置为0? 谢谢

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration: 0.2];
image.transform = CGAffineTransformMakeScale(0.01, 0.01);
[UIView setAnimationDelegate:self];
[UIView commitAnimations];

回答by Noah Witherspoon

The effect you're looking for is something like this:

你正在寻找的效果是这样的：

// instantaneously make the image view small (scaled to 1% of its actual size)
view.transform = CGAffineTransformMakeScale(0.01, 0.01);
[UIView animateWithDuration:0.2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
    // animate it to the identity transform (100% scale)
    view.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished){
    // if you want to do something once the animation finishes, put it here
}];

回答by Kunal Gupta

if you want something like Facebookdoes on liking any post then use this

如果你想要像Facebook那样喜欢任何帖子，然后使用这个

-(void)animateButton:(UIButton *)sender{
UIButton * btn = (UIButton *)sender;
[UIView animateWithDuration:0.3/1.5 animations:^{
    btn.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.4, 1.4); // scales up the view of button 
} completion:^(BOOL finished) {
    [UIView animateWithDuration:0.3/2 animations:^{
        btn.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.7, 0.7);// scales down the view of button
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.3/2 animations:^{
            btn.transform = CGAffineTransformIdentity; // at the end sets the original identity of the button
        }];
    }];
}];}

just call this method when you want to animate the view

当你想要动画视图时调用这个方法

if you have text and image on the button and you just want to animate the image of the button then just replace "btn" with "btn.imageView" , this will just produce animation on the image view property of the button. Hope it helps All the best.

如果按钮上有文本和图像，并且只想为按钮的图像设置动画，那么只需将 "btn" 替换为 "btn.imageView" ，这只会在按钮的图像视图属性上生成动画。希望它能帮助一切顺利。

回答by Nil Rathod

For that you will have to use a simple UIView

为此，您将不得不使用一个简单的 UIView

Add the UIview to your current view.

将 UIview 添加到您当前的视图中。

- (void) initPopUpView
 {
   popup.alpha = 0;
   popup.frame = CGRectMake (160, 240, 0, 0);
   [self.view addSubview:popup];
 }

- (void) animatePopUpShow 
 {
   [UIView beginAnimations:nil context:NULL];
   [UIView setAnimationDuration:0.3];
   [UIView setAnimationDelegate:self];
   [UIView setAnimationWillStartSelector:@selector(initPopUpView)];

   popup.alpha = 1;
   popup.frame = CGRectMake (20, 40, 300, 400);

   [UIView commitAnimations];
 }

回答by Thyraz

You have to animate the frame of the view, to shrink it from zero to the final state. This can be done for example with UIView block animation.

您必须为视图的框架设置动画，将其从零缩小到最终状态。例如，这可以通过 UIView 块动画来完成。

So for example start with your view as an IBOutlet property self.myView with the final size and position, but set the hidden flag. Then when you want it to appear use the following:

因此，例如，将您的视图作为具有最终大小和位置的 IBOutlet 属性 self.myView 开始，但设置隐藏标志。然后，当您希望它出现时，请使用以下命令：

// Save old frame as final stater and set it to zero size for the start of the animation
// But keep the same center position, so it just grows and don't move around 
CGRect oldFrame = self.myView.frame;
CGRect oldCenter = self.myView.center;

self.myView.frame = CGRectZero;
self.myView.center = oldCenter;

self.myView.hidden = NO;

NSTimeInterval duration = 0.3;

[UIView animateWithDuration:duration delay:0.0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
                // New position and size after the animation should be the same as in Interface Builder
                self.myView.frame = oldFrame
    }
                     completion:^(BOOL finished){
                                                 // You can do some stuff here after the animation finished
                     }];

回答by Manu Antony

Swift 2.0 version

斯威夫特 2.0 版本

    view.transform = CGAffineTransformMakeScale(0.01, 0.01);

    UIView.animateWithDuration(0.2, delay: 0, options: .CurveEaseOut, animations: { () -> Void in
        // animate it to the identity transform (100% scale)
        self.view.transform = CGAffineTransformIdentity;

        }) { (finished) -> Void in
        // if you want to do something once the animation finishes, put it here
    }