Question

作为对象，我会重现两个布局之间的淡入淡出效果。现在我遇到了这种情况：

LinearLayout l;
LinearLayout l2;

要在它们之间切换，我已经使用了

l.setVisibility(View.GONE);
l2.setVisibility(View.VISIBLE);

我想在这个转录之间添加淡入淡出效果，我该怎么做？

Answer 1

以下是两种布局之间交叉淡入淡出的有效解决方案：

public class CrossFadeActivity extends Activity {

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

    final View l1 = findViewById(R.id.l1);
    final View l2 = findViewById(R.id.l2);

    final Animation fadeOut = AnimationUtils.loadAnimation(CrossFadeActivity.this, R.anim.fade_out);
    final Animation fadeIn = AnimationUtils.loadAnimation(CrossFadeActivity.this, R.anim.fade_in);

    findViewById(R.id.button1).setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            fadeOut.setAnimationListener(new AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                }

                @Override
                public void onAnimationRepeat(Animation animation) {
                }

                @Override
                public void onAnimationEnd(Animation animation) {
                    l1.setVisibility(View.GONE);
                }
            });
            l1.startAnimation(fadeOut);
            l2.setVisibility(View.VISIBLE);
            l2.startAnimation(fadeIn);
        }
    });
    findViewById(R.id.button2).setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            fadeOut.setAnimationListener(new AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                }

                @Override
                public void onAnimationRepeat(Animation animation) {
                }

                @Override
                public void onAnimationEnd(Animation animation) {
                    l2.setVisibility(View.GONE);
                }
            });
            l2.startAnimation(fadeOut);
            l1.setVisibility(View.VISIBLE);
            l1.startAnimation(fadeIn);
        }
    });
}
}

crossfade.xml：

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

<LinearLayout
    android:id="@+id/l1"
    android:layout_width="fill_parent"
    android:layout_height="300dip"
    android:orientation="vertical" 
    android:background="@drawable/someimage"
    >

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

</LinearLayout>

<RelativeLayout
    android:id="@+id/l2"
    android:layout_width="fill_parent"
    android:layout_height="300dip"
    android:orientation="vertical" 
    android:background="@drawable/someimage2"
    android:visibility="gone"
    >

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" 
        android:layout_centerInParent="true"
        />

</RelativeLayout>

</RelativeLayout>

其中l1和l2是2个随机示例布局。诀窍是将它们放在XML中，使它们彼此重叠（例如在RelativeLayout中）与visible / gone相互重叠，为动画添加侦听器以切换完成时的可见性，并设置必须淡入到可见之前的视图。动画开始，否则动画将不可见。

我将按钮与侦听器一起切换布局本身的动画，因为我需要以这种方式实现它，但是点击侦听器当然可以在其他地方（如果它只是一个它应该与一些组合使用）标记或检查以了解如何切换。）

这些是动画文件。它们必须存储在文件夹res / anim：

中

fade_in.xml

<?xml version="1.0" encoding="UTF-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fillAfter="true"
android:fromAlpha="0.0"
android:toAlpha="1.0" />

fade_out.xml

<?xml version="1.0" encoding="UTF-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fillAfter="true"
android:fromAlpha="1.0"
android:toAlpha="0" />

更新：

您可以使用Android API（android.R.fade_in）中的默认fade_in，而不是使用R.anim.fade_in：

final Animation fadeIn = AnimationUtils.loadAnimation(CrossFadeActivity.this, android.R.anim.fade_in);

使用android.R.anim.fade_in，您不需要创建文件res / anim / fade_in.xml。

Android在android.R.anim上有一些包含一些有用动画的包：http://developer.android.com/reference/android/R.anim.html

Answer 2

使用R.anim.fade_out＆amp; .R.anim.fade_in你可以创建一个动画来做到这一点。我自己对此并不了解，但是有关android中动画的教程：Animation Tutorial

P.S。本教程不是我的，因此不会向我发出信用。

编辑：

AnimationSet set = new AnimationSet(true);

Animation animation = new AlphaAnimation(0.0f, 1.0f);
animation.setDuration(50);
set.addAnimation(animation);

animation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0.0f,Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, -1.0f,Animation.RELATIVE_TO_SELF, 0.0f
);
animation.setDuration(100);
set.addAnimation(animation);

LayoutAnimationController controller = new LayoutAnimationController(set, 0.5f);
l.setLayoutAnimation(controller);

淡出动画

public static Animation runFadeOutAnimationOn(Activity ctx, View target) {
  Animation animation = AnimationUtils.loadAnimation(ctx,android.R.anim.fade_out);
  target.startAnimation(animation);
  return animation;
}

我猜你可以尝试这样的东西，我复制粘贴了教程中的动画我不知道它究竟做了什么，因为我没有Android开发的经验。另一个例子可能是Example 2

Answer 3

因为android 3.0你可以使用

android:animateLayoutChanges="true"

在xml中的布局中，运行时对此特定布局内容的任何更改都将被设置为动画。例如，在您的情况下，您需要为l和l2的父布局设置父属性，例如

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="me.kalem.android.RegistrationActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:animateLayoutChanges="true"
    android:padding="20dp">

    <LinearLayout
        android:id="@+id/l1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:visibility="visible">

    ........

    </LinearLayout>

    <LinearLayout
        android:id="@+id/l2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:visibility="gone">

    ........

    </LinearLayout>

</LinearLayout>

现在隐藏l1并在运行时显示l2将被设置为动画。

布局之间的淡化效果

3 个答案: