使用自动反转的UIView动画 [英] UIView animations with autoreverse

问题描述

我遇到设置 UIViewAnimationOptionAutoReverse 的问题。
这是我的代码。

I have a problem with the setting UIViewAnimationOptionAutoReverse. Here is my code.

CALayer *aniLayer = act.viewToChange.layer;
[UIView animateWithDuration:2.0 delay:1.0 options:(UIViewAnimationCurveLinear | UIViewAnimationOptionAutoreverse) animations:^{
                    viewToAnimate.frame = GCRectMake(1,1,100,100);
                    [aniLayer setValue:[NSNumber numberWithFloat:degreesToRadians(34)] forKeyPath:@"transform.rotation"];
                } completion:nil ];

问题是，在动画反转后，视图会跳回到设置的框架中动画块。我希望视图增长并取消并停止在其原始位置。

The problem is that, after the animation has reversed, the view jumps back to the frame set in the animation block. I want the view to grow and "ungrow" and stop at its original position.

是否有没有编程连续两个动画的解决方案？

Is there a solution without programming two consecutive animations?

推荐答案

您有三种选择。

当您使用 - [UIView animateWithDuration：...] 方法，您在动画块中所做的更改会立即应用于相关视图。但是，还有一个隐式的 CAAnimation 应用于从旧值到新值的动画。当 CAAnimation 在视图上处于活动状态时，它会更改显示的视图，但不会更改视图的实际属性。

When you use the -[UIView animateWithDuration:…] methods, the changes you make in the animations block are applied immediately to the views in question. However, there is also an implicit CAAnimation applied to the view that animates from the old value to the new value. When a CAAnimation is active on a view, it changes the displayed view, but does not change the actual properties of the view.

例如，如果你这样做：

NSLog(@"old center: %@", NSStringFromCGPoint(someView.center));
[UIView animateWithDuration:2.0 animations: ^{ someView.center = newPoint; }];
NSLog(@"new center: %@", NSStringFromCGPoint(someView.center));

你会看到'旧中心'和'新中心'不同;新中心将立即反映newPoint的值。但是，隐式创建的 CAAnimation 将导致视图在旧中心仍然显示并平稳地移动到新中心。当动画结束时，它将从视图中删除，然后您切换回只看到实际的模型值。

you will see that 'old center' and 'new center' are different; new center will immediately reflect the values of newPoint. However, the CAAnimation that was implicitly created will cause the view to still be displayed at the old center and smoothly move its way to the new center. When the animation finishes, it is removed from the view and you switch back to just seeing the actual model values.

当您传递 UIViewAnimationOptionAutoreverse ，它会影响隐式创建的 CAAnimation ，但不会影响您对值所做的实际更改。也就是说，如果上面的示例定义了 UIViewAnimationOptionAutoreverse ，则隐式创建的 CAAnimation 将从oldCenter动画到newCenter，背部。然后动画将被移除，我们将切换回看到我们设置的值... 仍处于新位置。

When you pass UIViewAnimationOptionAutoreverse, it affects the implicitly created CAAnimation, but does NOT affect the actual change you're making to the values. That is, if our example above had the UIViewAnimationOptionAutoreverse defined, then the implicitly created CAAnimation would animate from oldCenter to newCenter and back. The animation would then be removed, and we'd switch back to seeing the values we set… which is still at the new position.

正如我所说，有三种方法可以解决这个问题。第一种是在动画上添加一个完成块来反转它，如下所示：

As I said, there are three ways to deal with this. The first is to add a completion block on the animation to reverse it, like so:

CGPoint oldCenter = someView.center;
[UIView animateWithDuration:2.0
                 animations: ^{ someView.center = newPoint; }
                 completion: 
   ^(BOOL finished) {
       [UIView animateWithDuration:2.0
                        animations:^{ someView.center = oldCenter; }];
   }];

第二期权

第二种选择是像你正在做的那样自动反转动画，并将视图设置回完成块中的原始位置：

Second Option

The second option is to autoreverse the animation like you're doing, and set the view back to its original position in a completion block:

CGPoint oldCenter = someView.center;
[UIView animateWithDuration:2.0
                      delay:0
                    options: UIViewAnimationOptionAutoreverse
                 animations: ^{ someView.center = newPoint; }
                 completion: ^(BOOL finished) { someView.center = oldCenter; }];

但是，这可能会导致动画自动反转完成和完成块运行之间的闪烁，所以它可能不是你的最佳选择。

However, this may cause flickering between the time that the animation autoreverse completes and when the completion block runs, so it's probably not your best choice.

最后一个选项是简单地创建一个 CAAnimation 直接。当您实际上不想更改要更改的属性的最终值时，这通常更简单。

The last option is to simply create a CAAnimation directly. When you don't actually want to change the final value of the property you're changing, this is often simpler.

#import <QuartzCore/QuartzCore.h>

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.autoreverses = YES;
animation.repeatCount = 1; // Play it just once, and then reverse it
animation.toValue = [NSValue valueWithCGPoint:newPoint];
[someView.layer addAnimation:animation forKey:nil];

请注意 CAAnimation 做事方式永远不会改变视图的实际值;它只是用动画掩盖实际值。该视图仍然认为它位于原始位置。 （例如，这意味着，如果您的视图响应触摸事件，它仍将监视在原始位置发生的触摸事件。动画仅改变视图绘制的方式;没有其他。

Note that the CAAnimation way of doing things never changes the actual values of the view; it just masks the actual values with an animation. The view still thinks it's in the original location. (This means, for example, that if your view responds to touch events, it will still be watching for those touch events to happen at the original location. The animation only changes the way the view draws; nothing else.

CAAnimation 方式还要求您将其添加到视图的底层 CALayer 。如果这让您感到害怕，请随意使用 - [UIView animateWithDuration：...] 方法。使用<$ c可以获得其他功能$ c> CAAnimation ，但是如果它是你不熟悉的东西，链接UIView动画或在完成块中重置它是完全可以接受的。事实上，这是完成块的主要目的之一。

The CAAnimation way also requires that you add it to the view's underlying CALayer. If this scares you, feel free to use the -[UIView animateWithDuration:…] methods instead. There's additional functionality available by using CAAnimation, but if it's something you're not familiar with, chaining UIView animations or resetting it in the completion block is perfectly acceptable. In fact, that's one of the main purposes of the completion block.

所以，你去。有三种不同的方法可以反转动画并保持原始值。享受！

So, there you go. Three different ways to reverse an animation and keep the original value. Enjoy!

这篇关于使用自动反转的UIView动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！