逐渐平滑地停止 UIImageView 动画

Question

我有以下简单的 UIImageView 动画：

-(void) setupTheAnimation {
  self.imgView.animationImages = imagesArr;
  [self.imgView setAnimationRepeatCount:-1];
  self.imgView.animationDuration =0.9;
  [self.imgView startAnimating];
  [self performSelector:@selector(stopTheAnimation) withObject:nil afterDelay:4.0];
}

-(void) stopTheAnimation {
  [self.imgView stopAnimating];
}

但是当动画停止时我遇到了一个问题我不知道它停止的最后一帧是什么！所以动画的结局一点都不流畅。

所以我需要：

1)知道动画结束的最后一帧是什么，所以我将它设置为动画的最后一个图像，这会导致平滑停止。

2)逐渐停止此动画，即在停止之前更改其持续时间以先减慢然后停止。

This is a link to the sample project.

Answer 1

我知道您的原始实现使用animationImages，但我不知道有一种方法可以使用animationImages 直接 持续可变的持续时间。但是，这是一个非常简单的功能，可以自己实现。如果这样做，那么您可以在数组中的图像之间编写动态持续时间值。

在以下代码中，我将animationImages 替换为自定义步进函数，并动态调整请求停止后 的持续时间。请注意，这与指定硬结束时间的原始代码略有不同。此代码指定齿轮旋转应开始减速的时间。

如果你真的有一个硬动画周期，你可以调整对stopTheAnimation的调用来考虑你选择的减速因素（我只是在减速期间每步增加10%的持续时间，直到步数比给定的阈值）：

// my animation stops when the step duration reaches this value:
#define STOP_THRESHOLD_SECONDS 0.1f
#define NUM_IMAGES 35

@implementation ViewController
{
    NSMutableArray *imagesArr;
    int currentImage;
    BOOL stopRequested;
    NSTimeInterval duration;
}

-(void) setupTheAnimation {

    stopRequested = NO;
    currentImage = 0;
    duration = 0.9f / NUM_IMAGES;
    [self stepThroughImages];

    [self performSelector:@selector(stopTheAnimation) withObject:nil afterDelay:4.0];
}

- (void) stepThroughImages {

    self.imgView.image = [imagesArr objectAtIndex: currentImage];

    if (currentImage == NUM_IMAGES - 1) {
        currentImage = 0;
    } else {
        currentImage++;
    }

    if (stopRequested && duration < STOP_THRESHOLD_SECONDS) {
        // we're slowing down gradually
        duration *= 1.1f;
        dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(duration * NSEC_PER_SEC));
        dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
            [self stepThroughImages];
        });
    } else if (!stopRequested) {
        dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(duration * NSEC_PER_SEC));
        dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
            [self stepThroughImages];
        });
    }
}

-(void) stopTheAnimation {
    stopRequested = YES;
}

Answer 2

我只通过使用块知道这一点，但你可以这样做：

    [UIImageView animateWithDuration:0.9f delay:0.0f options:UIViewAnimationOptionCurveEaseOut animations:^{

                // animate what you want
                self.imgView.transform = CGAffineTransformMakeScale(1.0f, 1.0f);

            } completion:^(BOOL finished){

                // animation is completed
                self.imgView.image = image;

            }];

“UIViewAnimationOptionCurveEaseOut”选项应该会逐渐停止您的动画。您可以尝试使用其他选项来亲自查看效果。

Answer 3

您的方法有一个问题：每秒的帧数不是恒定的（您减慢了时间）。

您确定需要帧动画吗？

如果您的动画可以通过几何（仿射）变换实现，那就更好了。

如果您的动画可以通过以下组合完成：

• 翻译
• 旋转
• 缩放

那么这是一个仿射变换。