Эффект затухания между макетами - PullRequest
Новая
       6

Эффект затухания между макетами

10 голосов
/ 26 декабря 2010

Как и в случае с объектом, я бы воспроизвел эффект затухания между двумя макетами.Теперь у меня есть такая ситуация: 

LinearLayout l;
LinearLayout l2;

Для переключения между ними я использовал 

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

Я хочу добавить эффект затухания между этой транскрипцией, как я могу это сделать?

Ответы [ 3 ]

22 голосов
/ 30 июля 2012

Вот рабочее решение для перекрестного затухания между двумя раскладками: 

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) с видимым / ушедшим, добавляли слушателей к анимациям, чтобы переключать видимость на финише, и устанавливали вид, который должен исчезнуть, до видимого переданимация запускается, иначе анимация не будет видна.

Я поместил кнопки со слушателями, чтобы переключать анимацию в самих макетах, потому что мне нужно реализовать ее таким образом, но слушатель щелчков может быть где-то, конечноиначе (если это только один, это должно использоваться в сочетании с некоторым флагом или проверкой, чтобы знать, как переключить).

Это файлы анимации.Они должны храниться в папке 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" />

ОБНОВЛЕНИЕ:

Вместоиспользования R.anim.fade_in, вы можете использовать fade_in по умолчанию из Android API ( android.R.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

3 голосов
/ 20 августа 2015

С 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 голосов
/ 26 декабря 2010

Используя R.anim.fade_out & .R.anim.fade_in, вы можете создать анимацию, которая делает это.Я сам не очень разбираюсь в этом, но вот учебник, касающийся анимации в Android: Учебник по анимации

PS Этот учебник не мой, поэтому заслуга мне не идет.

Редактировать: 

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.Другим примером может быть Пример 2

...