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

Posted 2023-02-24

【中文标题】随着视图围绕视图中心旋转，向中心移动

【英文标题】：Move towards the center as the view rotates around the center of the view

【发布时间】：2015-05-25 19:14:45

【问题描述】：

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/rlayout"
android:layout_
android:layout_ 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_
    android:layout_
    android:layout_alignParentLeft="true"
    android:layout_centerInParent="true"
    android:background="@drawable/ring">
</LinearLayout>

<Button
    android:id="@+id/btnStart"
    android:layout_
    android:layout_
    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: android:/>
    <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);

【参考方案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_
    android:layout_
    android:layout_centerInParent="true">

    <ImageView
        android:src="@drawable/ring"
        android:layout_
        android:layout_/>
</LinearLayout>

<Button
    android:id="@+id/btnStart"
    android:layout_
    android:layout_
    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);

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

【讨论】：

谢谢，但我以前试过这个。如果您对此进行编码，您会发现它不会产生我正在寻找的效果。我希望旋转中心始终是屏幕和圆的中心，因为它围绕这个固定中心旋转以减小旋转半径，类似于螺旋运动。我认为您的建议改变了旋转中心。因为如果你仔细想想，它不是一个恒定的向右平移，取决于圆的位置，平移可以在任何方向（总是朝向旋转的中心）。

嘿，你是对的，原来的解决方案行不通。我尝试了一种不同的方法，并相应地更新了答案。让我知道这是否更好。