自定义视图的缩放动画（相对于中心点）

Question

我有一个自定义视图，我想相对于中心进行缩放。

如果我将这行代码用于 ImageView，它会工作得很好并且可以正确缩放：

imageView.animate().scaleX(2.5f).scaleY(2.5f).setDuration(2000);

但是如果我将它用于我的自定义视图，它会上升，并且动画看起来不正确，如何解决？

这是一个视频：https://youtu.be/f0-jMqE9ULU
（红圈动画出错，粉圈（imageView）动画正常）

我的自定义视图：

public class CircleDrawView extends View {
    private Paint paint;
    private int x;
    private int y;
    private String labelName;
    private int radius = 40;

    public CircleDrawView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }

    public CircleDrawView(Context context)
    {
        super(context);
        paint = new Paint();
    }

    public CircleDrawView(Context context, int x, int y, String labelName)
    {
        super(context);
        paint = new Paint();
        this.x=x;
        this.y=y;
        this.labelName=labelName;
    }


    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        paint.setColor(Color.RED);
        canvas.drawCircle(x, y, radius, paint);
        Paint textPaint = new Paint();
        textPaint.setTextSize(25);
        textPaint.setColor(Color.WHITE);
        textPaint.setAntiAlias(true);
        textPaint.setTextAlign(Paint.Align.CENTER);
        Rect bounds = new Rect();
        textPaint.getTextBounds(labelName, 0, labelName.length(), bounds);
        canvas.drawText(labelName, x, y, textPaint);

    }
}

Activity:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        LinearLayout rootView =(LinearLayout) findViewById(R.id.test_layout);
        ImageView imageView = (ImageView) findViewById(R.id.test_image);

        CircleDrawView circle = new CircleDrawView(getApplicationContext(), 200, 200, "1");
        rootView.addView(circle);
        rootView.invalidate();
        circle.animate().scaleX(1.2f).scaleY(1.2f).setDuration(2000);
        imageView.animate().scaleX(2.5f).scaleY(2.5f).setDuration(2000);
}
}

xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context="com.example.attracti.animation.MainActivity">

    <LinearLayout
        android:id="@+id/test_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/test_image"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="100dp"
            android:background="@drawable/circle_shape" />

    </LinearLayout>

</RelativeLayout>

Answer 1

您给 circle.animate() returns 打来的电话 ViewPropertyAnimator。您在此 ViewPropertyAnimator 上调用的 scaleX() 和 scaleY() 方法围绕其枢轴缩放 View。

View 的枢轴由 View.setPivotX() 和 View.setPivotY() 方法设置。

在您的构造函数中，将这些值设置为提供的 x 和 y。然后，您的视图将围绕提供的中心点进行缩放。

自定义视图的缩放动画（相对于中心点）

Scale animation of the custom view (relative to the centre point)

java

animation

android

android-custom-view