4

我正在UIView使用它CALayer的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 为我做的一样？

4

1 回答 1

3

如果您希望能够与动画交互（可能使用手势或滑块或其他机制），那么您可以使用一个小技巧，通过将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
}
于 2014-01-23T20:38:58.770 回答