如何在iOS上的弧形路径中移动图形...如在仪表或钟面中

时间:2013-01-03 18:04:54

标签: ios image animation sdk caanimation

这是我想要实现的结果:

http://mouseaddict.com/images/sample-meter.png

我的应用程序有静态图像,但我想为它们添加动作。

想象一下一米。它有一个锁在底部的针(在圆形钟面上的6点),其针顶从左向右旋转成弧形。弧(零)开始时针指向(大致)圆形钟表面上的9:30位置,该弧的最顶部应在圆形时钟大约2:30结束 - 风格面。

我有几个图形元素1)圆形仪表面(png)和2)仪表针的垂直方向png文件。我需要使针在圆弧面内以弧形图案移动。

因此,假设上述两个要求,使用动画在仪表内旋转针头的最佳方法是什么?

我见过这个:Speedometer - 但这是最​​好的方法吗?我的主要问题是我想要将针头锁定在底部并且从左到右移动一小部分......就像它上面的文件很少(实际上没有)一样。像" calculateDeviationAngle"原因不明。

此外,车速表似乎移动了很多,而那个例子的枢轴点也行不通......(我不认为)

我想用以下命令调用它:

[self moveNeedleToPosition:degreeOrClockFaceNumber]让它从当前位置移到degreeOrClockFaceNumber之后,然后在degreeOrClockFaceNumber处反弹回来。

TIA

1 个答案:

答案 0 :(得分:0)

我做了以下事情:我将图像分成几块。轮廓(黑色)部分,背景和针。每件作品都具有相同的足迹" (形状)。

假设theImageView是针的imageView(在其他两个imageViews之上分层),我创建了以下函数:

-(void) rotateNeedle:(UIImageView *)theImageView toAngle:(float) theAngle
{
    [UIView animateWithDuration:0.5
                          delay: 0.0
                        options: UIViewAnimationOptionCurveEaseInOut
                     animations:^{
                         theImageView.transform =CGAffineTransformMakeRotation((M_PI / 180) * (theAngle + 10));
                     }
                     completion:^(BOOL finished){
                         //
                         [UIView animateWithDuration:0.5
                                          animations:^{
                                              theImageView.transform = CGAffineTransformMakeRotation((M_PI / 180) * theAngle);
                                          }];


                     }];

}

块中的第一个动画执行"拍摄过去"动画的一部分...即:移动超过实际值10度。完成块中的第二个动画然后"弹跳"针回到正确的值。这些动画的速度创造了物理效果。它对我来说效果很好。