Question

我需要为图像视图设置动画以进入螺旋路径，就像轮盘球落入插槽（没有物理）一样。见下图。

带有球形图像的图像视图需要从螺旋开始的顶部开始，并且必须遵循白色路径并在螺旋结束时停止。

我尝试过使用锚点等，但没有发生预期的结果。这只是球在周围和周围旋转，但从未下降并进入螺旋状。

CGPoint rotationPoint = anchorPointImageView.center;// The point we are rotating around

CGPoint anchorPoint =  CGPointMake((rotationPoint.x-201)/12.5, (rotationPoint.y-137)/12.5);

ballImageView.layer.anchorPoint = anchorPoint;
ballImageView.layer.position = rotationPoint;

CABasicAnimation *rotate = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotate.toValue = @(-M_PI*2); // The angle we are rotating to
rotate.duration = 2.32;
rotate.repeatCount = 3; // reset to 3

rotate.fillMode = kCAFillModeForwards;
rotate.removedOnCompletion = NO;

[ballImageView.layer addAnimation:rotate forKey:@"myRotationAnimation"];

Answer 1

那个形状是一个简单的螺旋。您可以使用一点触发器将其创建为一系列线段。

从零开始的馈入角度，通过小的分步进入2 pi的某个倍数

double angle = 0;
double spacing = 30
double end_angle = 20 * M_PI; //Do 10 360 degree arcs (2pi * 5)
double step = M_PI / 64; //128 steps per full circle, so lines are short.
double x,y;
do
{
  y = sin(angle) + angle * spacing;
  x = cos(angle) + angle * spacing;
  angle += step;
}
while angle < end_angle;

该代码将生成一系列描述螺旋的x / y点。然后，您可以使用这些点使用moveToPoint和lineToPoint方法调用来构建UIBezierPath。我把它充实给你了。您可以根据圆弧周围的通道间距以及步长值更改间距值，具体取决于您希望曲线看起来的平滑程度。较小的步长值将使曲线更平滑，但绘制更慢并占用更多内存。较大的步长值会使它看起来更像一系列线条，但画得更快。

创建弧形路径后，您可以使用它创建关键帧动画，如Matt的回答中所述。

编辑：

请记住，使用轮盘转盘时，球会围绕车轮外侧绕一圈运行一段时间，直到它的速度下降到足以使向心力不再支撑它为止，然后转变为螺旋状。您可能想要动画的两个阶段：首先让它以慢慢减速的速度跟随圆圈，然后切换到螺旋关键帧动画。

Answer 2

我要做的是将螺旋描述为CGPath，然后使用keyframe animation沿路径设置动画。当然你不会得到一个完美的螺旋路径 - 你必须把它构造成一系列接近螺旋的弧线 - 但是因为路径不是绘制的而只是跟着相当大的球，这没关系。

UIImageView螺旋动画

2 个答案:

编辑：