如何在单独的动画中将CGAffineTransform链接在一起？

Question

我在UIView上需要两个动画：

1. 使视图向下移动并略微增长。
2. 使其新中心的视野更大。

当我尝试执行此操作时，第二个动画从怪异的位置开始，但最终在正确的位置和大小上结束。 如何使第二个动画从第一个动画结束的位置开始？

#import "ViewController.h"

static const CGFloat kStartX = 100.0;
static const CGFloat kStartY = 20.0;
static const CGFloat kStartSize = 30.0;
static const CGFloat kEndCenterY = 200.0;

@interface ViewController ()

@property (nonatomic, strong) UIView *box;

@end

@implementation ViewController

- (void)viewDidLoad
{
  [super viewDidLoad];

  self.box = [[UIView alloc] initWithFrame:CGRectMake(kStartX, kStartY, kStartSize, kStartSize)];
  self.box.backgroundColor = [UIColor brownColor];
  [self.view addSubview:self.box];

  [UIView animateWithDuration:2.0
                        delay:1.0
       usingSpringWithDamping:1.0
        initialSpringVelocity:0.0
                      options:0
                   animations:^{
                     self.box.transform = [self _transformForSize:50.0 centerY:kEndCenterY];
                   }
                   completion:^(BOOL finished) {
                     [UIView animateWithDuration:2.0
                                           delay:1.0
                          usingSpringWithDamping:1.0
                           initialSpringVelocity:0.0
                                         options:0
                                      animations:^{
                                        self.box.transform = [self _transformForSize:100.0 centerY:kEndCenterY];
                                      }
                                      completion:^(BOOL finished) {
                                      }];
                   }];
}

- (CGAffineTransform)_transformForSize:(CGFloat)newSize centerY:(CGFloat)newCenterY
{
  CGFloat newScale = newSize / kStartSize;
  CGFloat startCenterY = kStartY + kStartSize / 2.0;
  CGFloat deltaY = newCenterY - startCenterY;
  CGAffineTransform translation = CGAffineTransformMakeTranslation(0.0, deltaY);
  CGAffineTransform scaling = CGAffineTransformMakeScale(newScale, newScale);
  return CGAffineTransformConcat(scaling, translation);
}

@end

有一个警告：我被迫使用setTransform而不是setFrame。 我的真实代码中没有使用棕色框。 我真正的代码使用的是复杂的UIView子类，当我使用setFrame时，它无法平滑缩放。

Answer 1

看起来这可能是一个UIKit错误，其中涉及到在现有转换之上应用转换时UIView如何解析其布局。 通过在第二个完成块的开始处执行以下操作，我至少能够正确地获得第二个动画的起始坐标：

  [UIView animateWithDuration:2.0
                        delay:1.0
       usingSpringWithDamping:1.0
        initialSpringVelocity:0.0
                      options:0
                   animations:^{
                     self.box.transform = [self _transformForSize:50.0 centerY:kEndCenterY];
                   }
                   completion:^(BOOL finished) {
                     // <new code here>
                     CGRect newFrame = self.box.frame;
                     self.box.transform = CGAffineTransformIdentity;
                     self.box.frame = newFrame;
                     // </new code>
                     [UIView animateWithDuration:2.0
                                           delay:1.0
                          usingSpringWithDamping:1.0
                           initialSpringVelocity:0.0
                                         options:0
                                      animations:^{
                                        self.box.transform = [self _transformForSize:100.0 centerY:kEndCenterY];
                                      }
                                      completion:^(BOOL finished) {
                                      }];
                   }];

但是，对-_transformForSize:centerY:使用相同的调用会导致在第二个动画中执行相同的Y转换，因此，说完所有内容后，该框在视图中的位置将比您想要的更远。

要解决此问题，您需要根据第一个动画结尾处框的起始Y坐标而不是原始的恒定Y坐标来计算deltaY：

- (CGAffineTransform)_transformForSize:(CGFloat)newSize centerY:(CGFloat)newCenterY
{
  CGFloat newScale = newSize / kStartSize;
  // Replace this line:
  CGFloat startCenterY = kStartY + kStartSize / 2.0;
  // With this one:
  CGFloat startCenterY = self.box.frame.origin.y + self.box.frame.size.height / 2.0;
  // </replace>
  CGFloat deltaY = newCenterY - startCenterY;
  CGAffineTransform translation = CGAffineTransformMakeTranslation(0.0, deltaY);
  CGAffineTransform scaling = CGAffineTransformMakeScale(newScale, newScale);
  return CGAffineTransformConcat(scaling, translation);
}

它应该可以解决问题。

UPDATE

我应该说，我认为这种“技巧”更多的是一种变通方法，而不是实际的解决方案，但是盒子的框架和变换在动画管道的每个阶段看起来都是正确的，因此，如果有一个真正的“解决方案”，那么我就会被它迷住了。时刻。 该技巧至少可以为您解决翻译问题，因此您可以尝试使用更复杂的视图层次结构，并了解您能走多远。