随着视图围绕视图中心旋转，向中心移动

Question

我想围绕屏幕中心旋转以下圆圈，我正在这样做。但我也想让它在旋转时越来越靠近中心。有人对我如何实现这一目标有任何建议和代码示例吗？

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/rlayout"
android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<LinearLayout
    android:id="@+id/ring1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentLeft="true"
    android:layout_centerInParent="true"
    android:background="@drawable/ring">
</LinearLayout>

<Button
    android:id="@+id/btnStart"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:background="@color/main_blue"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:textColor="@color/white"
    android:text="Start"
    android:onClick="startAnimation" />

戒指代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <size android:width="25dp" android:height="25dp"/>
    <solid android:color="@color/main_red" />
</shape>

动画代码：

public void startAnimation(View view) {
    LinearLayout ring1 = (LinearLayout)findViewById(R.id.ring1);
    AnimationSet animationSet = new AnimationSet(false);
    RotateAnimation rAnimation = new RotateAnimation(0f, 360f, 328f, 100f);
    rAnimation.setInterpolator(new LinearInterpolator());
    rAnimation.setRepeatCount(Animation.INFINITE);
    rAnimation.setDuration(5000);      
    animationSet.addAnimation(rAnimation);
    ring1.startAnimation(animationSet);
}

Answer 1

将另一个TranslateAnimation(int fromXDelta, int toXDelta, int fromYDelta, int toYDelta) 动画添加到AnimationSet。您可以通过测量屏幕大小、将其除以 2 并减去要放置在中心的视图大小的一半来计算 x 和 y 增量。

Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int centerOfScreenX = size.x / 2;
int xDelta = width - ring1.getWidth()/2

TranslateAnimation transAnimation = new TranslateAnimation(0, xDelta, 0, 0);
transAnimation.setInterpolator(new LinearInterpolator());
transAnimation.setDuration(5000);
animationSet.addAnimation(rAnimation);

==============编辑================

动画比我最初意识到的要复杂，因此可能需要使用不同的方法：因为围绕中心旋转视图很容易，我们可以旋转宽度与父级匹配的LinearLayout，其中包含ImageView 与其左侧对齐。那么LinearLayout的左边padding就可以同时动画了。这应该会产生一个“螺旋”动画，图像围绕屏幕中心旋转，同时靠近它。

这是布局：

<LinearLayout
    android:id="@+id/ring1"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_centerInParent="true">

    <ImageView
        android:src="@drawable/ring"
        android:layout_width="100dp"
        android:layout_height="100dp"/>
</LinearLayout>

<Button
    android:id="@+id/btnStart"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:text="Start"
    android:onClick="startAnimation" />

方法如下：

public void startAnimation(View view) {
    final LinearLayout ring1 = (LinearLayout)findViewById(R.id.ring1);

    final int origWidth = ring1.getWidth();
    int halfWidth = origWidth / 2;
    int halfHeight = ring1.getHeight() / 2;
    final int targetPadding = halfWidth - halfHeight;

    ValueAnimator valueAnimator = new ObjectAnimator().ofFloat(0, 1);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            int paddingLeft = (int) (targetPadding * (float) animation.getAnimatedValue());
            ring1.setPadding(paddingLeft, 0, 0, 0);
        }
    });
    valueAnimator.setDuration(5000);
    valueAnimator.start();

    AnimationSet animationSet = new AnimationSet(false);
    RotateAnimation rAnimation = new RotateAnimation(0f, 360f, halfWidth, halfHeight);
    rAnimation.setInterpolator(new LinearInterpolator());
    rAnimation.setRepeatCount(Animation.INFINITE);
    rAnimation.setDuration(1000);
    ring1.startAnimation(rAnimation);
}

我稍微改变了时间，以使正在发生的事情更加明显。希望这会有所帮助。