基于输入值（触摸）而不是时间的 iPhone 动画答案

【问题标题】：iPhone animation based on input values (touches) not time基于输入值（触摸）而不是时间的 iPhone 动画
【发布时间】：2011-06-10 20:17:10
【问题描述】：

对于完全适合动画组方法的动画效果，如Brad Larson's answer here 所示，我需要动画根据输入进行。特别是触摸和检测到的触摸的位置。处理 touchesMoved: 并为每次触摸设置元素的位置很容易，但它不像核心动画方法那样平滑。

想象一下有凹槽的轨道上的大理石。我想在一个方向或另一个方向上以任何速度将弹珠推到任何位置。动画必须做类似的事情，沿着路径移动视觉元素以响应触摸。 CAKeyframeAnimation 有确切的路径位，但似乎总是希望从帧到帧的过渡基于经过的时间，而不是任何其他因素，并且在一个方向上。

1 月 31 日更新 - 感谢所有到目前为止的回复，但没有一个真正解决问题。我有一个圆形菜单，可以拖动以选择一个选项。所有这些都需要一起移动，我通过使用应用了旋转变换的视图和应用到其子视图的反向旋转变换来解决它，因此图标都以适当的摩天轮方向旋转。不过，当图标沿略呈卵形的路径进行动画处理时，它确实看起来更好……大理石描述是为了弄清楚我想要做什么。也许更好地想象磁铁的方向是排斥所有在凹槽中移动的磁铁 - 移动一个，它的邻居也移动，但不一定沿着被拖动的磁铁随着路径曲线移动的方向。

现在的问题是遵循一个用一个圆圈创建的简单路径，但我真的很想知道如何沿着任意路径为对象设置动画，位置完全由触摸控制，不涉及速度或方向的计算。

【问题讨论】：

嗯，这成了一个热门问题。 Pivot 的答案是正确的，并且在我提出问题后编写的代码中效果很好。

标签： iphone core-animation cakeyframeanimation

【解决方案1】：

您可以在层树中使用hierarchical nature of timelines 来实现您正在寻找的东西。实现CAMediaTiming 的对象（包括CAAnimation 和CALayer）从它们的父对象继承一个时间空间，它们可以修改（通过缩放、移动和重复）并传播给它们的子对象。通过将层的 speed 属性设置为 0.0 并手动调整 timeOffset 属性，您可以将该层（及其所有子层）与通常的时间概念分离。

在您的情况下，您要做的是定义所有菜单项的动画，以动画它们沿着您想要的CGPath 从时间 t₀ 到 t₁，在每个动画上使用适当的timeOffset，以使您的项目保持适当的间距。请注意，动画上 0.0 的 beginTime 通常被解释为从动画添加到其层的时间开始，因此如果您希望 t₀ 为 0.0 ，您可能必须将其设置为一个很小的 epsilon > 0.0。

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.beginTime = 1e-100;
animation.duration = 1.0;
animation.fillMode = kCAFillModeBoth;
animation.removedOnCompletion = NO;
animation.path = path;
animation.calculationMode = kCAAnimationPaced;
animation.timeOffset = timeOffset;

然后，您将父层（仅包含这些菜单项）上的 speed 属性设置为 0.0，并将其 timeOffset 更新为 t₀之间的值> 和 t₁ 以响应您的触摸事件。

这种方法有两个潜在的警告。因为您已经在此层子树上接管了时间的性质，所以您可能无法同时为其他属性设置动画。此外，如果您想要快速滑动的滑行行为，您可能需要自己为时间前进设置动画。

【讨论】：

好主意！我接受它，因为即使它没有将动画完全绑定到触摸位置，它也会提供我需要的控制级别。应该可以操纵 timeOffset 使其非常接近同一事物。
如果触摸位置和动画进度之间的关系是线性的，您可以选择动画的开始时间和持续时间，这样您就可以将触摸位置的相关组件作为 timeOffset 传递并获得核心动画的时间-进度映射为您应用该关系。

【解决方案2】：

如果您的目标是 iOS 4.0 或更高版本，则可以使用 new block based class methods 开始对 view 对象进行动画更改。因此，从您的触摸事件中，您可以对视图上的属性进行动画更改：

[UIView animateWithDuration:1.0 animations:^{
    yourView.alpha = 0.0; // fade out yourView over 1 second
}];

注意这可以很容易地改变视图上的另一个属性，比如它的位置。您可以通过这种方式在视图上为以下属性设置动画：

@property frame
@property bounds
@property center
@property transform
@property alpha
@property backgroundColor
@property contentStretch

如果您针对的是早期版本的 iOS，则需要使用 UIView beginAnimations 和 commitAnimations 方法来创建动画块：

[UIView beginAnimations:nil context:context];
[UIView setAnimationDuration:1.0]; 
yourView.alpha = 0.0;
[UIView commitAnimations];

这个东西真的很好用，一旦你开始使用它，你必须小心不要上瘾。 ;)

评论更新：

您可以将弹珠的位置绑定到触摸事件的位置。获得touchesEnded 事件后，您可以使用动画块为大理石的位置设置动画。

【讨论】：

是的，但问题是我不想与持续时间有任何关系。想想大理石。如果我什么都不做，它什么也不做。如果我慢慢推它，它就会慢慢移动，如果我推它快，它就会快速移动。如果我在快速移动后突然停止推动它，它应该继续滚动一段时间，直到它减速并停止。似乎时间方法不允许这样做。我确实使用 CAKeyframeAnimation 发生了一些漂亮的流畅动画，但除了设置它运行和设置缓入/缓出之外，我无法控制它。
还是有问题。物体的位置不是触摸的位置，它们必须停留在一条路径上。当触摸发生在正确的视图中时，触摸的笔触只是将运动传递给对象。对象必须遵循路径。同样计算位置并以明显的方式执行此操作还不够流畅，尤其是在位置计算变得昂贵或在较旧的 iOS 设备上时。
@adam-eberbach 啊！我明白你的意思。导致问题的是触摸事件之间的插值。我会考虑的。绝对不平凡:)

【解决方案3】：

速度 = 距离/时间。您可以尝试根据移动的触摸和时间给予延迟。您可以计算 touchesBegan 和 touchesEnded 方法之间的时间。

【讨论】：

【解决方案4】：

我不完全确定我完全理解您想要做什么，但是... 为什么不直接在用户手指所在的位置绘制弹珠呢？不需要动画。如果你想在用户放手后让弹珠继续移动，你需要保持一个动量的概念，并用它来动画弹珠减速。您可以为此使用 CoreAnimation 或计时器。

【讨论】：

【解决方案5】：

我会在移动的触摸中进行速度计算，并将其添加到一个块可以通过计时器进行变异的局部变量中。

换句话说，在触摸移动时会考虑到先前速度的方向来计算速度。在接触结束时，发射一个方块，当你渴望时，它会翻译“大理石”衰减速度。如果用户再次移动弹珠，修改局部变量，这将反过来加快弹珠的动画或减慢/根据触摸方向改变方向。

【讨论】：