插值CGAffineTransform

Question

我正在使用UIView的CALayer's affineTransform属性来制作动画。我要做的转换是这样构建的：CGAffineTransformTranslate(CGAffineTransformScale(zoomContainer.layer.transform, scaleX, scaleY), translateX, translateY)。

现在我想改进这个动画，让它具有交互性。因此，我需要使用一个完成百分比来插值CGAffineTransform。但是，我似乎找不到系统在为我动画时插入转换的方式。我总是以奇怪的曲线结束，在这些曲线中，转换与缩放不同步。下面是我目前的代码：

CGFloat completion = fmax(0, fmin(completionPercentage, 1));
CGFloat scaleX = CGRectGetWidth(zoomContainerInitialBounds) / CGRectGetWidth(zoomTargetInitialFrame);
CGFloat scaleY = CGRectGetHeight(zoomContainerInitialBounds) / CGRectGetHeight(zoomTargetInitialFrame);
scaleX = 1 + ((scaleX - 1) * (1 - completion));
scaleY = 1 + ((scaleY - 1) * (1 - completion));
CGFloat translateX = CGRectGetMidX(zoomContainerInitialBounds) - CGRectGetMidX(zoomTargetInitialFrame);
CGFloat translateY = CGRectGetMidY(zoomContainerInitialBounds) - CGRectGetMidY(zoomTargetInitialFrame);
translateX *= (1 - completion);
translateY *= (1 - completion);
zoomContainer.layer.affineTransform = CGAffineTransformTranslate(CGAffineTransformScale(initialTransform, scaleX, scaleY), translateX, translateY);

我需要更改哪些内容才能像UIKit一样对转换进行插值？

Answer 1

如果您希望能够与动画交互(可能使用手势、滑块或其他机制)，那么您可以使用一个小技巧，通过将视图层的speed设置为0来“暂停”动画，然后通过设置图层的timeOffset将动画移动到特定的时间点。

我在一个类似的问题的答案(但能激活另一个属性)中解释了这一点，我在博客文章中动画时间的上下文中做了更详细的解释。

所以这不仅仅是一个链接答案，这是你需要做这个交互所需要的非常小的代码。在这种情况下我假设是滑块。这篇博文展示了如何在滚动事件中使用它，如果您想用手势来实现它，那么我相信您可以理解它:)

在动画设置中(请注意，我使用的是CATransform3D而不是CGAffineTransform)

CABasicAnimation *yourAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
yourAnimation.duration  = 1.; // For convenience (so that timeOffset is from 0.0 to 1.0)
yourAnimation.fromValue = [NSValue valueWithCATransform3D:fromTransform];
yourAnimation.toValue   = [NSValue valueWithCATransform3D:toTransform];
[self.yourView.layer addAnimation: yourAnimation forKey:@"Your Animation"];

self.yourView.layer.speed = 0.0; // Pause every animation on that layer

以及驱动动画交互的滑块(滑块配置为从0.0到1.0)：

- (IBAction)sliderChanged:(UISlider *)sender {
    self.yourView.layer.timeOffset = sender.value; // Change the "current time" of the animation
}