iOS - 动画效果 - 图片弹入效果

33
我希望我的iPhone应用程序中的图像能够“pop-in”到屏幕上,而不是只是出现。所谓“pop-in”,是指它会从一个小点开始逐渐增长到实际大小。可以参考Keynote中的“pop”动画效果。由于我完全不懂iOS动画,如果有人能指导我需要使用哪些动画效果,我将不胜感激。

谢谢

Brian

更新 我已经添加了下面建议的代码。这个代码有效,但它会缩小我的图像,而不是放大。我知道那是因为我将转换比例大小设置为0.01,但我想知道如何从大小为0的图像开始缩放到1。只需将我的图像大小设置为0就可以了吗? 谢谢

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

79
您所寻找的效果类似于这样:
// 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
}];

1
有没有一种方法可以从与中心不同的点进行图像缩放? - tiguero
5
是的 - 改变它的图层锚点theView.layer.anchorPoint = CGPointMake(0, 0)将使视图从其左上角缩放;(1,1)是其右下角。 - Noah Witherspoon
变量image是什么类型的对象? - Fernando Santiago
在这个例子中,image 是一个 UIView。 - Noah Witherspoon

5
如果您想要像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
        }];
    }];
}];}

当您想要对视图进行动画处理时,只需调用此方法即可。

如果您的按钮上有文本和图像,并且您只想对按钮的图像进行动画处理,那么只需将 "btn" 替换为 "btn.imageView",这将仅在按钮的图像视图属性上产生动画效果。 希望这可以帮助到您。


0

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

0

为此,您将需要使用一个简单的UIView

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

0

您需要对视图的框架进行动画处理,将其从零缩小到最终状态。可以使用UIView块动画来实现此目的。

例如,首先将您的视图设置为IBOutlet属性self.myView,并设置最终大小和位置,但将隐藏标志设置为true。 然后,当您想要显示它时,请使用以下代码:

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

那可能不会很好。对图像视图的帧进行动画处理会强制它在每个动画帧上重新绘制自己。 - Noah Witherspoon
1
@NoahWitherspoon会有更好的转换方式吗? - Thyraz
是的。从CGAffineTransformMakeScale(0.01,0.01)到CGAffineTransformIdentity的动画效果会起到作用。 - Noah Witherspoon
谢谢你们的回复。我已经更新了我的问题,并提供了更多的例子。如何进行放大而不是缩小? - Brian Boyle

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接