如何停止并反转UIView动画？

Question

如何停止并反转UIView动画？

16

我已经为一个UIView添加了动画效果，使得当用户触摸切换按钮时它会缩小，再次触摸按钮时可以回到原始大小。目前一切正常。问题在于动画需要一些时间 - 例如3秒钟。在此期间，我仍希望用户能够与界面进行交互。因此，当用户在动画仍在进行时再次触摸按钮时，动画应该停止在当前位置并反向播放。

在Apple的问答中，我找到了一种立即暂停所有动画的方法：

https://developer.apple.com/library/ios/#qa/qa2009/qa1673.html

但我没有看到从这里反转动画(并省略其余部分的初始动画)的方法。我该如何实现这个目标？

返回内容：我已经为一个UIView添加了动画效果，使得当用户触摸切换按钮时它会缩小，再次触摸按钮时可以回到原始大小。目前一切正常。问题在于动画需要一些时间 - 例如3秒钟。在此期间，我仍希望用户能够与界面进行交互。因此，当用户在动画仍在进行时再次触摸按钮时，动画应该停止在当前位置并反向播放。

在Apple的问答中，我找到了一种立即暂停所有动画的方法：

https://developer.apple.com/library/ios/#qa/qa2009/qa1673.html

但我没有看到从这里反转动画(并省略其余部分的初始动画)的方法。我该如何实现这个目标？

- (IBAction)toggleMeter:(id)sender {
    if (self.myView.hidden) {        
        self.myView.hidden = NO;
        [UIView animateWithDuration:3 animations:^{
            self.myView.transform = expandMatrix;
        } completion:nil];
    } else {
        [UIView animateWithDuration:3 animations:^{
            self.myView.transform = shrinkMatrix;
        } completion:^(BOOL finished) {
            self.myView.hidden = YES;
        }];
    }
}

- Mischa

3个回答

1

有一个常见的技巧可以用来做到这一点，但需要编写一个单独的方法来缩小（以及另一个类似的扩展方法）：

- (void) shrink {  
    [UIView animateWithDuration:0.3
                     animations:^{
                        self.myView.transform = shrinkALittleBitMatrix;
                     }
                     completion:^(BOOL finished){
                          if (continueShrinking && size>0) {
                              size=size-1;
                              [self shrink];      
                           }
                     }];
}

现在的关键是将3秒的缩小动画分解为10个（或更多）0.3秒的动画，每个动画中你都要缩小1/10的整个动画：shrinkALittleBitMatrix。每完成一个动画后，只有当bool变量continueShrinking为true且int变量size为正数时（完整大小的视图为size=10，最小大小的视图为size=0），才会调用相同的方法。当你按下按钮时，将ivar continueShrinking更改为FALSE，然后调用expand。这将在不到0.3秒的时间内停止动画。

好吧，你需要填写细节，但我希望这可以帮助你。

- Roberto Canogar

这是一个很好的解决方案，可以弥补框架中应该包含的功能。但是这里的问题基本上与Rob的解决方案相同：它仅支持线性动画，因为每个部分动画的持续时间都相同。当然，我可以通过根据ivar size的值更改持续时间来模仿UIViewAnimationOptionCurveEaseInOut的行为，从而模拟加速和减速。但那将是另一种解决方法，使事情变得更加复杂和不整洁。 - Mischa

0

首先：如何在视图中移除或取消动画？

[view.layer removeAllAnimations]

如果视图有许多动画，例如，一个动画从上到下移动，另一个动画从左到右移动；

您可以像这样取消或删除特定的动画：

[view.layer removeAnimationForKey:@"someKey"];
// the key is you assign when you create a animation 
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"someKey"];

当你这样做时，动画将停止，它会调用它的代理：

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag

如果flag等于1，表示动画已完成。如果flag等于0，则表示动画未完成，可能被取消或移除。

第二点：因此，在这个委托方法中，您可以做任何想做的事情。

如果您想在删除代码执行时获取视图的框架，可以这样做：

currentFrame = view.layer.presentationlayer.frame;

注意：

当你获取当前帧并移除动画时，视图也会在一段时间内进行动画，因此currentFrame不是设备屏幕上的最后一帧。

我现在无法解决这个问题。如果有一天我能解决，我会更新这个问题。

- charvel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob · Accepted Answer

除了下面的方法(我们从展示层获取当前状态，停止动画，从保存的展示层重置当前状态，并启动新动画)，还有一个更简单的解决方案。

如果在iOS 8.0之前的版本中进行基于块的动画，如果您想停止动画并启动新动画，您可以简单地使用UIViewAnimationOptionBeginFromCurrentState选项。(在iOS 8中，默认行为不仅从当前状态开始，而且以反映当前位置和当前速度的方式进行，因此基本上不必担心这个问题。请参阅WWDC 2014视频Building Interruptible and Responsive Interactions了解更多信息。)

[UIView animateWithDuration:3.0
                      delay:0.0
                    options:UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionAllowUserInteraction
                 animations:^{
                     // specify the new `frame`, `transform`, etc. here
                 }
                 completion:NULL];

你可以通过停止当前动画并从当前位置开始新的动画来实现这一点。使用Quartz 2D可以做到这一点：

Add QuartzCore.framework to your project if you haven't already. (In contemporary versions of Xcode, it is often unnecessary to explicitly do this as it is automatically linked to the project.)
Import the necessary header if you haven't already (again, not needed in contemporary versions of Xcode):
```
#import <QuartzCore/QuartzCore.h>
```

Have your code stop the existing animation:

[self.subview.layer removeAllAnimations];

Get a reference to the current presentation layer (i.e. the state of the view as it is precisely at this moment):
```
CALayer *currentLayer = self.subview.layer.presentationLayer;
```
Reset the transform (or frame or whatever) according to the current value in the presentationLayer:
```
self.subview.layer.transform = currentLayer.transform;
```

Now animate from that transform (or frame or whatever) to the new value:

[UIView animateWithDuration:1.0
                      delay:0.0
                    options:UIViewAnimationOptionAllowUserInteraction
                 animations:^{
                     self.subview.layer.transform = newTransform;
                 }
                 completion:NULL];

将所有内容结合起来，这是一个可以将我的变换比例从2.0x切换到标识并返回的例程：

- (IBAction)didTouchUpInsideAnimateButton:(id)sender
{
    CALayer *currentLayer = self.subview.layer.presentationLayer;

    [self.subview.layer removeAllAnimations];

    self.subview.layer.transform = currentLayer.transform;

    CATransform3D newTransform;

    self.large = !self.large;

    if (self.large)
        newTransform = CATransform3DMakeScale(2.0, 2.0, 1.0);
    else
        newTransform = CATransform3DIdentity;

    [UIView animateWithDuration:1.0
                          delay:0.0
                        options:UIViewAnimationOptionAllowUserInteraction
                     animations:^{
                         self.subview.layer.transform = newTransform;
                     }
                     completion:NULL];
}

或者，如果你想要切换frame的大小从100x100到200x200再切回来：

- (IBAction)didTouchUpInsideAnimateButton:(id)sender
{
    CALayer *currentLayer = self.subview.layer.presentationLayer;

    [self.subview.layer removeAllAnimations];

    CGRect newFrame = currentLayer.frame;

    self.subview.frame = currentLayer.frame;

    self.large = !self.large;

    if (self.large)
        newFrame.size = CGSizeMake(200.0, 200.0);
    else
        newFrame.size = CGSizeMake(100.0, 100.0);

    [UIView animateWithDuration:1.0
                          delay:0.0
                        options:UIViewAnimationOptionAllowUserInteraction
                     animations:^{
                         self.subview.frame = newFrame;
                     }
                     completion:NULL];
}

顺便提一下，对于非常快速的动画，这通常并不重要，但对于您这样的慢速动画，您可能希望将反转动画的持续时间设置为您当前动画的进度（例如，如果您进行了3.0秒的动画中的0.5秒，当您反转时，您可能不想花费3.0秒来反转您已完成的小部分动画，而只需0.5秒）。因此，代码应该是这样的：

- (IBAction)didTouchUpInsideAnimateButton:(id)sender
{
    CFTimeInterval duration = kAnimationDuration;             // default the duration to some constant
    CFTimeInterval currentMediaTime = CACurrentMediaTime();   // get the current media time
    static CFTimeInterval lastAnimationStart = 0.0;           // media time of last animation (zero the first time)

    // if we previously animated, then calculate how far along in the previous animation we were
    // and we'll use that for the duration of the reversing animation; if larger than
    // kAnimationDuration that means the prior animation was done, so we'll just use
    // kAnimationDuration for the length of this animation

    if (lastAnimationStart)
        duration = MIN(kAnimationDuration, (currentMediaTime - lastAnimationStart));

    // save our media time for future reference (i.e. future invocations of this routine)

    lastAnimationStart = currentMediaTime;

    // if you want the animations to stay relative the same speed if reversing an ongoing
    // reversal, you can backdate the lastAnimationStart to what the lastAnimationStart
    // would have been if it was a full animation; if you don't do this, if you repeatedly
    // reverse a reversal that is still in progress, they'll incrementally speed up.

    if (duration < kAnimationDuration)
        lastAnimationStart -= (kAnimationDuration - duration);

    // grab the state of the layer as it is right now

    CALayer *currentLayer = self.subview.layer.presentationLayer;

    // cancel any animations in progress

    [self.subview.layer removeAllAnimations];

    // set the transform to be as it is now, possibly in the middle of an animation

    self.subview.layer.transform = currentLayer.transform;

    // toggle our flag as to whether we're looking at large view or not

    self.large = !self.large;

    // set the transform based upon the state of the `large` boolean

    CATransform3D newTransform;

    if (self.large)
        newTransform = CATransform3DMakeScale(2.0, 2.0, 1.0);
    else
        newTransform = CATransform3DIdentity;

    // now animate to our new setting

    [UIView animateWithDuration:duration
                          delay:0.0
                        options:UIViewAnimationOptionAllowUserInteraction
                     animations:^{
                         self.subview.layer.transform = newTransform;
                     }
                     completion:NULL];
}