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。您可以通过测量屏幕的大小来计算x和y增量，将其除以2，然后减去要放在中心的视图大小的一半。

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。然后，padding的左LinearLayout可以同时进行动画处理。这应该会导致“螺旋式”动画，图像围绕屏幕中心旋转，同时接近它。

这是布局：

<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);
}

我略微改变了时间，使其更明显地发生了什么。希望这会有所帮助。

当视图围绕视图中心旋转时，向中心移动

1 个答案: