滑出效果 (translationX) 不适用于 LayoutTransition + ObjectAnimator

Slide out effect (translationX) doesn't work with LayoutTransition + ObjectAnimator

当我在 LinearLayout 中使 View 不可见(未消失)时,我倾向于产生滑出效果。

我期望的动画效果是:-

  1. 视图会慢慢淡出(alpha)
  2. 视图将从左向右滑动 (translationX)

我尝试通过LayoutTransition + ObjectAnimator实现这样的效果,参考官方API demo LayoutAnimationsHideShow.java

但是,对于我的情况,只有 alpha 效果有效。我无法使 translationX 效果起作用。

这是我在视频中的结果:http://youtu.be/iU9ArUFvgbY

完整的代码示例如下

LayoutAnimationsHideShow.java

public class LayoutAnimationsHideShow extends Activity {

    private int numButtons = 1;
    ViewGroup container = null;
    private LayoutTransition mTransitioner;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_animations_hideshow);

        container = new LinearLayout(this);
        container.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT));

        // Add a slew of buttons to the container. We won't add any more buttons at runtime, but
        // will just show/hide the buttons we've already created
        for (int i = 0; i < 4; ++i) {
            Button newButton = new Button(this);
            newButton.setText(String.valueOf(i));
            container.addView(newButton);
            newButton.setOnClickListener(new View.OnClickListener() {
                public void onClick(View v) {
                    v.setVisibility(View.INVISIBLE);
                }
            });
        }

        resetTransition();

        ViewGroup parent = (ViewGroup) findViewById(R.id.parent);
        parent.addView(container);

        Button addButton = (Button) findViewById(R.id.addNewButton);
        addButton.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                for (int i = 0; i < container.getChildCount(); ++i) {
                    View view = (View) container.getChildAt(i);
                    view.setVisibility(View.VISIBLE);
                }
            }
        });

        setupCustomAnimations();
        long duration = 500;
        mTransitioner.setDuration(duration);
    }

    private void resetTransition() {
        mTransitioner = new LayoutTransition();
        container.setLayoutTransition(mTransitioner);
    }

    private void setupCustomAnimations() {
        mTransitioner.setAnimator(LayoutTransition.APPEARING, null);
        mTransitioner.setAnimator(LayoutTransition.CHANGE_APPEARING, null);
        mTransitioner.setAnimator(LayoutTransition.CHANGE_DISAPPEARING, null);

        final WindowManager wm = (WindowManager) this.getSystemService(Context.WINDOW_SERVICE);
        int width = wm.getDefaultDisplay().getWidth();

        // Removing
        ObjectAnimator animOut = ObjectAnimator.
                ofFloat(null, "translationX", 0f, (float)width).
                ofFloat(null, "alpha", 1f, 0f).
                setDuration(mTransitioner.getDuration(LayoutTransition.DISAPPEARING));
        mTransitioner.setAnimator(LayoutTransition.DISAPPEARING, animOut);
        animOut.addListener(new AnimatorListenerAdapter() {
            public void onAnimationEnd(Animator anim) {
                View view = (View) ((ObjectAnimator) anim).getTarget();
                view.setAlpha(0f);
            }
        });

    }
}

layout_animations_hideshow.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/parent"
    >
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Show Buttons"
            android:id="@+id/addNewButton"
            />
    </LinearLayout>
</LinearLayout>

我在想,是不是我哪里做错了,导致从左向右滑动动画效果不起作用?

很确定您需要使用 ObjectAnimator.of(PropertyValuesHolder) 来并行设置多个属性的动画。对 ofFloat(null, "alpha", 1f, 0f) 的第二次调用只是覆盖第一个实例,因此永远不会设置转换。

例如:

public static ValueAnimator ofFloat(float... values) {
        ValueAnimator anim = new ValueAnimator();
        anim.setFloatValues(values);
        return anim;
    }

可以找到有关如何处理动画的好视频 here