ios iPhone UIView 动画最佳实践

iPhone UIView Animation Best Practice

提问by Keith Fitzgerald

What is considered best practice for animating view transitions on the iPhone?

在 iPhone 上动画视图转换的最佳实践是什么？

For example, the ViewTransitionssample project from apple uses code like:

例如，ViewTransitions来自苹果的示例项目使用如下代码：

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

but there are also code snippets floating around the net that look like this:

但也有一些代码片段在网络上漂浮，看起来像这样：

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

What is the best approach? If you could provide a snippet as well it'd be much appreciated.

最好的方法是什么？如果您也可以提供一个片段，将不胜感激。

NOTE:I've been unable to get the second approach to work correctly.

注意：我一直无法让第二种方法正常工作。

采纳答案by Rafael Vega

From the UIView reference's section about the beginAnimations:context:method:

从UIView 参考关于该beginAnimations:context:方法的部分：

Use of this method is discouraged in iPhone OS 4.0 and later. You should use the block-based animation methods instead.

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

Eg of Block-based Animation based on Tom's Comment

例如基于 Tom's Comment 的基于块的动画

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

回答by mahboudz

I have been using the latter for a lot of nice lightweight animations. You can use it crossfade two views, or fade one in in front of another, or fade it out. You can shoot a view over another like a banner, you can make a view stretch or shrink... I'm getting a lot of mileage out of beginAnimation/commitAnimations.

我一直在使用后者制作很多漂亮的轻量级动画。您可以使用它交叉淡入淡出两个视图，或者在另一个视图前面淡入淡出，或者淡出它。你可以像横幅一样拍摄另一个视图，你可以拉伸或缩小视图......我从beginAnimation/ 中获得了很多里程commitAnimations。

Don't think that all you can do is:

不要以为你能做的只有：

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

Here is a sample:

这是一个示例：

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

As you can see, you can play with alpha, frames, and even sizes of a view. Play around. You may be surprised with its capabilities.

如您所见，您可以使用 alpha、帧甚至视图的大小。玩转。您可能会对它的功能感到惊讶。

回答by Ryan McCuaig

The difference seems to be the amount of control you need over the animation.

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

The CATransitionapproach gives you more control and therefore more things to set up, eg. the timing function. Being an object, you can store it for later, refactor to point all your animations at it to reduce duplicated code, etc.

该CATransition方法为您提供了更多控制权，因此可以设置更多内容，例如。计时功能。作为一个对象，您可以存储它以备后用，重构以将所有动画指向它以减少重复代码等。

The UIViewclass methods are convenience methods for common animations, but are more limited than CATransition. For example, there are only four possible transition types (flip left, flip right, curl up, curl down). If you wanted to do a fade in, you'd have to either dig down to CATransition'sfade transition, or set up an explicit animation of your UIView's alpha.

在UIView类方法是常见的动画方便的方法，但超过限制CATransition。例如，只有四种可能的过渡类型（向左翻转、向右翻转、向上卷曲、向下卷曲）。如果您想进行淡入，则必须向下挖掘以CATransition's淡入淡出过渡，或者设置UIViewalpha的显式动画。

Note that CATransitionon Mac OS X will let you specify an arbitrary CoreImagefilter to use as a transition, but as it stands now you can't do this on the iPhone, which lacks CoreImage.

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

回答by Guru

We can animate images in ios 5 using this simple code.

我们可以使用这个简单的代码在 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!");
    }];

回答by Chris

In the UIViewdocs, have a read about this function for ios4+

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

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

回答by Deepukjayan

Anyway the "Block" method is preffered now-a-days. I will explain the simple block below.

无论如何，“阻止”方法现在是首选。我将在下面解释简单的块。

Consider the snipped below. bug2 and bug 3 are imageViews. The below animation describes an animation with 1 second duration after a delay of 1 second. The bug3 is moved from its center to bug2's center. Once the animation is completed it will be logged "Center Animation Done!".

考虑下面的剪辑。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!");
                 }];
}

Hope that's clean!!!

希望干净！！！

回答by iPatel

Here is Code for Smooth animation, might Be helpful for many developers.
I found this snippet of code from this tutorial.

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

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.

回答by Saurabh Sharma

let's do try and checkout For Swift 3...

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

UIView.transition(with: mysuperview, duration: 0.75, options:UIViewAnimationOptions.transitionFlipFromRight , animations: {
    myview.removeFromSuperview()
}, completion: nil)