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

时间:2016-07-15 14:06:28

标签: java android animation android-custom-view

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

如果我将这行代码用于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);

    }
}

的活动:

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>

1 个答案:

答案 0 :(得分:1)

您对circle.animate()的来电将返回ViewPropertyAnimator。 您在此scaleX()上调用的scaleY()ViewPropertyAnimator方法会缩放View关于它的支点。

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

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