如何一起平滑地制作2个视图的动画？

Question

在此处输入图片说明

我有2个LinearLayout。 可以说它们是左面板和主面板，如图所示。 我正在使用动画隐藏左面板。 这是我用的：

<scale
    android:duration="500"
    android:fromXScale="0.0"
    android:fromYScale="1.0"
    android:interpolator="@android:anim/linear_interpolator"
    android:toXScale="1.0"
    android:toYScale="1.0" />

我在主面板上使用android：layout_toRightOf =“ @ + id / left_panel”将其保持在左侧面板的右侧。 问题是当我使用动画隐藏左面板时，主面板只是跳到起点。 当我使用动画再次显示左面板时，主面板跳到终点。

那么，如何才能顺利地将这两个视图一起移动？

Answer 1

您可以使用幻灯片（平移）动画来代替缩放动画，而不必使用比例动画。 触发事件（在此单击按钮）时，将两个面板的动画设置为向左滑动。 您可以放置反向动画以将它们向后滑动。

这是我的方法。

AnimActivity

public class AnimActivity extends Activity {

    View leftPanel, rightPanel;
    Button button;

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

        leftPanel = findViewById(R.id.left_panel);
        rightPanel = findViewById(R.id.right_panel);
        button = (Button) findViewById(R.id.btn_animate);

        button.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                leftPanel.startAnimation(
                    AnimationUtils.loadAnimation(AnimActivity.this,R.anim.slide_left));
                rightPanel.startAnimation(
                    AnimationUtils.loadAnimation(AnimActivity.this,R.anim.slide_left));
            }
        });
    }       
}

slide_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillEnabled="true" android:fillAfter="true" >
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="-200.0"
       android:interpolator="@android:anim/linear_interpolator"/>
</set>

activity_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/left_panel" 
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:background="#FFD94E4E"
        android:orientation="vertical" >

    </LinearLayout>
    <LinearLayout 
        android:id="@+id/right_panel" 
        android:layout_width="420dp"
        android:layout_height="match_parent"
        android:background="#FF242325"
        android:orientation="vertical" >

        <Button
            android:id="@+id/btn_animate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Animate" />

    </LinearLayout>
</LinearLayout>

注意

这种方法有一个很大的问题，那就是我在左右面板上设置了固定的宽度 。 但是我不知道如何解决这个问题。 抱歉，希望对您有所帮助。