android - 针绕其指针头旋转

Question

我有一个针图像，当给定值发生变化时，我需要旋转该图像。获得的值是随机的。

我在 xml 中创建了图像，它是一个 ImageView 。

      <RelativeLayout
    android:id="@+id/relativeLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerInParent="false" >

    <ImageView
        android:id="@+id/meter_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:layout_marginTop="54dp"
        android:src="@drawable/gauge_meter" />

    <ImageView
        android:id="@+id/meter_needle_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/meter_image"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="14dp"
        android:src="@drawable/meter_needle" />
</RelativeLayout>

我使用以下代码进行旋转，但它不沿底部轴旋转

 RotateAnimation rpmNeedleDeflection = new RotateAnimation((float) (0.5f), (float) (90), 130, 0);

     rpmNeedleDeflection.setDuration(500);

     rpmNeedleDeflection.setFillAfter(true);

     rpmArrowView.startAnimation(rpmNeedleDeflection);

我仍在弄清楚旋转是如何工作的，就我而言，我需要根据速度设置角度。但现在给定一个值，我如何让它从针的底部绕该轴转动？

编辑:针是31*113，底部图像是224*224

Answer 1

要解决此问题，您有 2 个选择:

选项 1:

将针图像的大小调整为与背景图像完全相同的大小，即从 31 x 113 调整为 224 x 224。执行此操作时，请确保实际上并不只是将图像缩放到此大小(这将导致奇怪的拉伸(stretch)针图像)。你要做的是创建一个224x224的透明图像，并将原始尺寸(31x113)的针图像复制粘贴到这个新的透明图像中，使针的基圆正好位于224x224透明图像的中心，并且与“想象的”背景正确对齐。保存图像并将其导出为 png 格式，然后使用该图像作为针图像。

您现在需要做的就是确保 2 个图像彼此完美对齐。这应该不难，因为它们的大小应该相同。当您旋转针图像时，您将获得所需的结果。

选项 2:

假设您无法调整图像的大小 - 也许是因为它被程序的其他部分使用，或者其他一些原因。您的第二个选择是定位图像，并使用枢轴点来确保它通过代码正确定位。

为此，您需要将图像水平居中，垂直居中，您需要将其对齐，以便针的底座直接位于背景的中心。

就定位而言，需要一些尝试和错误才能使其完美，但看起来您已经确定了该部分。您缺少的是旋转的枢轴点。让我们看看如何计算:

数学时间!

我猜测直径等于图像的宽度，因为它是图像最宽的部分。这意味着针的水平中心位于图像宽度的一半:

final int pivotX = rpmArrowView.getMeasuredWidth() / 2;

图像的垂直中心应该相同，除了图像底部:

final int pivotY = rpmArrowView.getMeasuredHeight() - rpmArrowView.getMeasuredWidth() / 2;

现在，在制作动画之前，请确保设置枢轴点:

rpmArrowView.setPivotX(pivotX);
rpmArrowView.setPivotY(pivotY);

然后制作动画:

rpmArrowView.animate().rotation(someDegree).setDuration(someDuration)

就是这样!它可能需要更多的调整才能获得完美的定位，但这就是它的要点。

希望这些选项之一可以帮助您。