带标签的旋转轮 - 如何在车轮旋转时保持标签水平?

时间:2014-01-21 20:04:30

标签: ios animation image-rotation catransform3drotate

我一直在寻找一种如何实现一个幸运型车轮(工作良好)的解决方案,除了我需要车轮周边的图像/标签保持水平而不是随着车轮旋转。我实现了以下内容,但标签(在本例中为红色椭圆)并未保持水平。

This is how it should always look, no matter where the wheel has rotated

enter image description here

我附上了在屏幕上构建红色椭圆的代码:

CGFloat cita = 0;
for(int i = 1; i < 2; ++i)
{
    CGFloat smallCircleRadius = bigCircleRadius / 8.0;
    for (int i = 0; i < 8; i++)
    {

        CGPoint smallCircleCenter = CGPointMake(wheelCenter.x  + bigCircleRadius * cos(cita) - smallCircleRadius/2.0 , wheelCenter.y + bigCircleRadius * sin(cita) - smallCircleRadius / 2.0 );


        CGRect smallCircleRect = CGRectMake(smallCircleCenter.x,smallCircleCenter.y,smallCircleRadius * 2,smallCircleRadius);

        cita += M_PI / 4.0;

        CAShapeLayer *l = [CAShapeLayer layer];
        UIBezierPath * p1 = [UIBezierPath bezierPathWithOvalInRect:smallCircleRect];

        l.path = p1.CGPath;
        l.strokeColor = [[UIColor redColor] CGColor];
        l.fillColor = [[UIColor redColor] CGColor];
        l.lineWidth = 3.0;

        l.anchorPoint = CGPointMake(.5, .5);

        [self.emoticonsArray addObject:l];

        [self.baseWheel.layer addSublayer:l];

      }

   }

以下是旋转车轮的功能;我正在制作为标签进行旋转的代码行 - 我显然在这里做错了,但我不知道是什么。任何指导都非常感谢。

-(void)spin:(double)delta
{
currentAngle = currentAngle + delta;

CATransform3D transform = CATransform3DMakeRotation(currentAngle, 0, 0, 1);

[self.baseWheel.layer setTransform:transform];

  // rotate the red labels here.
  for (CAShapeLayer * l in self.emoticonsArray)
  {

    CGPoint miniWheelCenter = [l convertPoint:l.position toLayer:self.baseWheel.layer.superlayer];


    // !! something wrong here!! but what? 
    CATransform3D t_l = CATransform3DMakeRotation(-currentAngle, miniWheelCenter.x/2, miniWheelCenter.y/2, 1);
    [l setTransform:t_l];
  }
}

3 个答案:

答案 0 :(得分:1)

CATransform3DMakeRotation的参数是角度和旋转轴的三个分量。车轮和标签子层的旋转轴应该只是Z轴。你有正确的方向盘,但标签错了。

CATransform3D t_l = CATransform3DMakeRotation(-currentAngle, 0, 0, 1);
[l setTransform:t_l];

然而,仅使用仿射变换会更简单,仿射变换只能围绕Z轴旋转:

-(void)spin:(double)delta {
    currentAngle = currentAngle + delta;
    self.baseWheel.layer.affineTransform = CGAffineTransformMakeRotation(currentAngle);

    CGAffineTransform labelTransform = CGAffineTransformMakeRotation(-currentAngle);
    for (CAShapeLayer *l in self.emoticonsArray) {
        l.affineTransform = labelTransform;
    }
}

Core Animation会将仿射变换转换为3D变换。

答案 1 :(得分:0)

问题是因为你正在旋转整个车轮,那些标签是subViews.so,还有车轮,它们也会旋转。
最好的方法是计算旋转角度值。从该角度,计算该圆上标签的新位置,并在这些新位置放置标签(不是轮子的子驱动)。

OR(方法2)

将旋转变换的负数设置为那些标签。

答案 2 :(得分:0)

其他方式你可以摆脱这个问题,不要使用标签作为轮子的子视图。你只需将它们放在方向盘顶部即可。因此,当车轮旋转时,标签将位于同一位置。如果我不够清楚,请告诉我

修改

以下是您的问题的替代解决方案。它并不完美,但可能会给你一个新的思考方向。

  1. png 格式拍摄您的车轮图像。
  2. 使您的车轮背景透明。 (不需要..只是为了美化)
  3. 在要显示标签的方向盘上的位置打个洞。 (通过孔我的意思是使部分透明)。
  4. 现在将标签放在方向盘后面。根据所需的旋转角度定位。
  5. 现在,当您以精确的角度旋转滚轮时,您将能够看到标签。就像两层纸一样。
  6. 为什么不完美 标签不会随轮子移动。因此,您只能在特定角度看标签。

    我不知道您的问题背后的确切目的,但我使用这种方法为我的应用创建慢速拨号 ..