iPhone动画基于输入值（触摸）而不是时间 [英] iPhone animation based on input values (touches) not time

问题描述

对于完全适合动画组方法的动画效果，如布拉德·拉森（Brad Larson）在这里的答案，我需要根据输入内容进行动画处理。具体的触摸和检测到的触摸的位置。操作touchesMoved很容易：并且可以为每次触摸设置元素的位置，但是它不像核心动画方法那样平滑。

For an animation effect perfectly suited to an animation group approach as shown in Brad Larson's answer here, I need the animation to proceed according to inputs. Specifically touch and position of detected touches. It is easy to handle touchesMoved: and to set the position of the elements for every touch but it just isn't smooth like the core animation approach.

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

Imagine a marble in a grooved track. I want to push the marble along to any position at any speed in one direction or the other. The animation has to do something like that, moving a visual element along a path in response to touches. CAKeyframeAnimation has the path bit exactly but seems to always want to base the transition from frame to frame on time elapsed, not on any other factor, and in one direction.

1月31日更新-到目前为止，感谢所有反馈，但是没有一个能够真正解决问题。我有一个圆形菜单，可以拖动以选择一个选项。所有这些都需要一起移动，我已经通过使用一个视图应用了此视图，该视图已应用了旋转变换，并且对其子视图应用了逆旋转变换，因此图标全部以适当的摩天轮方向旋转。不过，当图标沿略微卵形的路径进行动画处理时，看起来确实更好。...大理石的描述是为了使我清楚自己想做的事情。也许更好地想象一下旨在排斥所有在凹槽中行进的磁铁-移动一个磁铁及其相邻物件也移动，但不一定沿路径弯曲的方向移动被拖动的磁铁。

31 January update - Thanks all for the responses so far however none is really solving the problem. I have a circular menu that is dragged to select an option. All of it needs to move together and I have worked around it by using an view that has a rotational transform applied and the inverse rotational transform applied to its subviews so the icons all rotate with appropriate ferris wheel orientation. It really looks better when the icons are animated along a slightly ovoid path though... the marble description is an attempt to make clear what I'm trying to do. Better perhaps to imagine magnets oriented to repel all travelling in a groove - move one and its neighbours move too but not necessarily in the direction that the dragged magnet moves as the path curves.

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

Right now the problem is one of following a simple path created with one circle but I'd really like to know how to animate objects along an arbitrary path, position controlled purely by touch with no calculations involving velocity or direction.

推荐答案

您也许可以使用时间线的分层性质在图层树中实现您所需要的。实现 CAMediaTiming （包括 CAAnimation 和 CALayer ）都从其父级继承了一个时空，他们可以修改（通过缩放，移动和重复）并传播给他们的孩子。通过将图层的 speed 属性设置为0.0并手动调整 timeOffset 属性，可以将该图层解耦（以及

You may be able to use the hierarchical nature of timelines in layer trees to achieve what you’re looking for. Objects implementing CAMediaTiming, which include both CAAnimation and CALayer, inherit a timespace from their parent, which they can modify (via scaling, shifting and repeating) and propagate to their children. By setting the speed property of a layer to 0.0 and adjusting the timeOffset property manually, you can decouple that layer (and all of its sublayers) from the usual notion of time.

在这种情况下，您需要为所有菜单项定义动画，以使其沿您的位置进行动画处理从时间 t ₀ 到 t ₁ 所需的 CGPath ，并在每个动画上加上适当的 timeOffset ，以使您的项目保持适当的间距。请注意，动画的 beginTime 通常被解释为从将动画添加到其图层开始的时间，因此如果要 t ₀ 设置为0.0，您可能必须将其设置为大于0.0的小epsilon。

What you’d do in your case is define the animations for all your menu items to animate their position along your desired CGPath from time t₀ to t₁, with the appropriate timeOffset on each animation to keep your items appropriately spaced. Note that a beginTime of 0.0 on an animation is usually interpreted as starting from the time the animation was added to its layer, so if you want t₀ to be 0.0, you'll probably have to set it to a tiny 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 ₁ 来响应您的触摸事件。

You’d then set the speed property to 0.0 on a parent layer (containing only these menu items) and update its timeOffset to values between t₀ and t₁ in response to your touch events.

此方法有两个潜在的警告。由于您已经接管了该图层子树的时间性质，因此可能无法同时为其他属性设置动画。此外，如果您想快速滑动动作，则可能需要自己动动时间。

This approach has two potential caveats. Because you’ve taken over the nature of time on this layer subtree, you probably won’t be able to animate other properties at the same time. Additionally, if you want coasting behavior for a fast flick, you’ll probably need to animate time forward on your own.

这篇关于iPhone动画基于输入值（触摸）而不是时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！