iPhone UIView动画最佳做法


142

在iPhone上为视图过渡设置动画的最佳做法是什么?

例如,ViewTransitions苹果公司的示例项目使用如下代码:

CATransition *applicationLoadViewIn = [CATransition animation];
[applicationLoadViewIn setDuration:1];
[applicationLoadViewIn setType:kCATransitionReveal];
[applicationLoadViewIn setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[[myview layer] addAnimation:applicationLoadViewIn forKey:kCATransitionReveal];

但是网上也有一些代码片段,看起来像这样:

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.75];
[UIView setAnimationDelegate:self];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:myview cache:YES];
[myview removeFromSuperview];
[UIView commitAnimations];

最好的方法是什么?如果您还可以提供摘要,将不胜感激。

注意:我一直无法获得第二种方法才能正常工作。

Answers:


118

在有关该方法的UIView参考部分中beginAnimations:context:

不建议在iPhone OS 4.0及更高版本中使用此方法。您应该改用基于块的动画方法。

例如,基于汤姆评论的基于块的动画

[UIView transitionWithView:mysuperview 
                  duration:0.75
                   options:UIViewAnimationTransitionFlipFromRight
                animations:^{ 
                    [myview removeFromSuperview]; 
                } 
                completion:nil];

4
所以..明确地说,这意味着使用第一种方法(CATransition),而不是第二种方法?
史蒂夫·N 2010年

2
是的,这是第一种方法(CATransition)。
NebulaFox

16
@Steven N,不,这意味着要改为使用基于块的动画UIView。它们本质上与beginAnimations和朋友相同,但是使用阻止/关闭功能。
Dan Rosenstark 2010年

36
是的,亚尔是对的。这是块动画的外观: [UIView transitionWithView:mysuperview duration:0.75 options:UIViewAnimationTransitionFlipFromRight animations:^{ [myview removeFromSuperview]; } completion:nil]检查UIView文档以了解详细信息。
汤姆·范·祖默伦2011年

3
除非您想支持3.1.3手机。然后不要使用块。
ZaBlanc 2011年

69

我一直在将后者用于许多不错的轻量级动画。您可以使用它淡入淡出两个视图,或者淡入一个在另一个视图之前,或淡出它。您可以像横幅一样在另一个视图上进行拍摄,可以使视图伸展或缩小...我从beginAnimation/中得到了很多东西commitAnimations

不要以为您能做的就是:

[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:myview cache:YES];

这是一个示例:

[UIView beginAnimations:nil context:NULL]; {
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationDuration:1.0];
    [UIView setAnimationDelegate:self];
    if (movingViewIn) {
// after the animation is over, call afterAnimationProceedWithGame
//  to start the game
        [UIView setAnimationDidStopSelector:@selector(afterAnimationProceedWithGame)];

//      [UIView setAnimationRepeatCount:5.0]; // don't forget you can repeat an animation
//      [UIView setAnimationDelay:0.50];
//      [UIView setAnimationRepeatAutoreverses:YES];

        gameView.alpha = 1.0;
        topGameView.alpha = 1.0;
        viewrect1.origin.y = selfrect.size.height - (viewrect1.size.height);
        viewrect2.origin.y = -20;

        topGameView.alpha = 1.0;
    }
    else {
    // call putBackStatusBar after animation to restore the state after this animation
        [UIView setAnimationDidStopSelector:@selector(putBackStatusBar)];
        gameView.alpha = 0.0;
        topGameView.alpha = 0.0;
    }
    [gameView setFrame:viewrect1];
    [topGameView setFrame:viewrect2];

} [UIView commitAnimations];

如您所见,您可以使用Alpha,帧甚至大小的视图进行播放。玩。您可能会对它的功能感到惊讶。


52

区别似乎在于您需要对动画进行控制。

CATransition方法使您可以更好地控制,因此可以进行更多设置。计时功能。作为对象,您可以将其存储以备后用,重构以将所有动画指向该对象以减少重复的代码,等等。

UIView类方法是常见的动画方便的方法,但超过限制CATransition。例如,只有四种可能的过渡类型(向左翻转,向右翻转,向上卷曲,向下卷曲)。如果您想进行淡入,则必须向下钻取以进行CATransition's淡入淡出过渡,或者为您UIView的Alpha 设置显式动画。

请注意,CATransition在Mac OS X上,您可以指定CoreImage要用作过渡的任意过滤器,但就目前而言,您无法在缺少的iPhone上执行此操作CoreImage


7
请注意,这是iOS 2.0时代的建议。如果您使用的是iOS 4.0或更高版本,请参见Rafael Vega关于基于块的方法的答案。
Ryan McCuaig 2011年

还要注意,CoreImage现在从iOS 5开始可用,但是只有其中一些功能。我相信您可以在动画中使用CoreImage过渡,但不能在iOS(5)上制作自定义CoreImage滤镜。
亚伦·阿什

26

我们可以使用此简单代码在ios 5中对图像进行动画处理。

CGRect imageFrame = imageView.frame;
imageFrame.origin.y = self.view.bounds.size.height;

[UIView animateWithDuration:0.5
    delay:1.0
    options: UIViewAnimationCurveEaseOut
    animations:^{
        imageView.frame = imageFrame;
    } 
    completion:^(BOOL finished){
        NSLog(@"Done!");
    }];

5
这在iOS 4中也可用,称为“基于块”的动画。它不限于iOS 5和更高版本。
johnbakers 2012年

8

UIView文档中,阅读有关ios4 +的此功能的信息

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion

6

无论如何,如今都采用“阻止”方法。我将在下面解释简单的块。

考虑下面的片段。bug2和bug 3是imageViews。以下动画描述了经过1秒延迟后持续时间为1秒的动画。bug3从其中心移到bug2的中心。动画完成后,将记录为“中心动画完成!”。

-(void)centerAnimation:(id)sender
{
NSLog(@"Center animation triggered!");
CGPoint bug2Center = bug2.center;

[UIView animateWithDuration:1
                      delay:1.0
                    options: UIViewAnimationCurveEaseOut
                 animations:^{
                     bug3.center = bug2Center;
                 } 
                 completion:^(BOOL finished){
                     NSLog(@"Center Animation Done!");
                 }];
}

希望这很干净!!!


2
您将CGPoint bug3.center分配给bug3Center,然后将CGPoint bug2.center分配给相同的变量bug3Center?你为什么要这么做?
pnizzle

哎呀!多数民众赞成在打字错误的伙伴。现在更新。
Deepukjayan

2

这是平滑动画的代码,可能对许多开发人员有帮助。
我从本教程中找到了这段代码。

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[animation setAutoreverses:YES];
[animation setFromValue:[NSNumber numberWithFloat:1.3f]];
[animation setToValue:[NSNumber numberWithFloat:1.f]];
[animation setDuration:2.f];
[animation setRemovedOnCompletion:NO];

[animation setFillMode:kCAFillModeForwards];
[[self.myView layer] addAnimation:animation forKey:@"scale"];/// add here any Controller that you want t put Smooth animation.

2

让我们尝试检查一下Swift 3 ...

UIView.transition(with: mysuperview, duration: 0.75, options:UIViewAnimationOptions.transitionFlipFromRight , animations: {
    myview.removeFromSuperview()
}, completion: nil)
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.