Создание слайд-шоу, которое превращает изображения друг в друга и трансформирует

Question

Я пытаюсь создать слайд-шоу с изображением, похожим на this

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

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

Я довольно новичок в том, что Android еще не делал анимации, и мне трудно понять, как работает пример. Поэтому я с трудом могу это исправить.

Может кто-нибудь помочь мне понять, что я делаю неправильно? Я начинаю вырывать волосы!

Мой код Java:

  public class TopListActivity extends Activity {

    ImageView slide_0;
    ImageView slide_1;

    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.test2);

        slide_0 = (ImageView) findViewById(R.id.slide_1);
        slide_1 = (ImageView) findViewById(R.id.slide_2);

    }

    private static class AnimationTimer extends TimerTask implements
            AnimationListener {

        TopListActivity topList;
        Vector<BitmapDrawable> images;
        int count = 0;

        public AnimationTimer(TopListActivity _topList) {
            this.topList = _topList;

            this.images = new Vector<BitmapDrawable>();

            Resources resources = topList.getResources();
            images.add((BitmapDrawable) resources.getDrawable(R.drawable.one));
            images.add((BitmapDrawable) resources.getDrawable(R.drawable.two));
            images.add((BitmapDrawable) resources.getDrawable(R.drawable.three));
            images.add((BitmapDrawable) resources.getDrawable(R.drawable.four));
            images.add((BitmapDrawable) resources.getDrawable(R.drawable.five));
            images.add((BitmapDrawable) resources.getDrawable(R.drawable.six));

            if (this.images.size() > 0) {
                this.topList.slide_0.setBackgroundDrawable(this.images.get(0));

                if (this.images.size() > 1) {
                    this.topList.slide_1.setBackgroundDrawable(this.images
                            .get(1));
                }

            }

            this.count = 1;
        }

        public void launch() {
            if (this.images.size() >= 2) {
                (new Timer(false)).schedule(this, 100);
            }
        }

        @Override
        public void run() {
            this.doit();
            this.cancel();
        }

        private void doit() {
            if ((this.count % 2) == 0) {
                AnimationSet set = new AnimationSet(false);


                AlphaAnimation animation = new AlphaAnimation(1.0f, 0.0f);
                animation.setStartOffset(5000);
                animation.setDuration(3000);
                animation.setFillAfter(true);

                ScaleAnimation zoom = new ScaleAnimation(1, 1.20f, 1, 1.20f);
                zoom.setStartOffset(0);
                zoom.setDuration(8000);
                zoom.setFillAfter(true);

                set.addAnimation(animation);
                set.addAnimation(zoom);
                set.setAnimationListener(this);

                this.topList.slide_1.startAnimation(set);
            } else {

                AnimationSet set = new AnimationSet(false);

                AlphaAnimation animation = new AlphaAnimation(0.0f, 1.0f);
                animation.setStartOffset(5000);
                animation.setDuration(3000);
                animation.setFillAfter(true);

                ScaleAnimation zoom = new ScaleAnimation(1.20f, 1, 1.20f, 1);
                zoom.setStartOffset(0);
                zoom.setDuration(8000);
                zoom.setFillAfter(true);

                set.addAnimation(animation);
                set.addAnimation(zoom);
                set.setAnimationListener(this);

                this.topList.slide_1.startAnimation(set);
            }
        }

        public void onAnimationEnd(Animation animation) {
            if ((this.count % 2) == 0) {
                this.topList.slide_1.setBackgroundDrawable(this.images
                        .get((this.count + 1) % (this.images.size())));
            } else {
                this.topList.slide_0.setBackgroundDrawable(this.images
                        .get((this.count + 1) % (this.images.size())));
            }

            this.count++;
            this.doit();

        }

        public void onAnimationRepeat(Animation animation) {
        }

        public void onAnimationStart(Animation animation) {
        }
    }

    @Override
    public void onResume() {
        super.onResume();

        (new AnimationTimer(this)).launch();
    }
}

и мой макет:

    <FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/frame"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/slide_1"
        android:layout_gravity="center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ImageView
        android:id="@+id/slide_2"
        android:layout_gravity="center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</FrameLayout>

Answer 1

Наконец-то отсортировано ... оно очень длинное, потому что я не мог разобраться с событием окончания анимации из-за нескольких анимаций ... так что, вероятно, не лучший способ, но он работает, и я счастлив!

Для тех, кто хочет знать, как .. или хочет адаптировать его, чтобы сделать его лучше, вот оно:

Основная деятельность (MyTransition.java):

import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.Vector;

public class MyTransition extends AppCompatActivity {

    ImageView slide_0;
    ImageView slide_1;
    ImageView lastSlide;
    Vector<Integer> imageIds;
    LinearLayout linLayout;
    int count = 0;

    private Handler transparencyHandler = new Handler();
    private Handler timerHandler = new Handler();
    private Runnable transparencyTimer = new Runnable() {
        public void run() {
            if (lastSlide == slide_0) {
                slide_1.setBackgroundColor(getResources().getColor(android.R.color.transparent));
                slide_1.setImageResource(0);
            } else {
                slide_0.setBackgroundColor(getResources().getColor(android.R.color.transparent));
                slide_0.setImageResource(0);
            }
        }
    };
    private Runnable timer = new Runnable() {
        public void run() {
            if (lastSlide == slide_0) {
                slide_1.setImageResource(0);
                slide_1.setImageResource(imageIds.get((count + 1)
                        % (imageIds.size())));
                slide_1.startAnimation(AnimationUtils
                        .loadAnimation(MyTransition.this,
                                R.anim.transition_down));
                lastSlide = slide_1;
            } else {
                slide_0.setImageResource(0);
                slide_0.setImageResource(imageIds.get((count + 1)
                        % (imageIds.size())));
                slide_0.startAnimation(AnimationUtils
                        .loadAnimation(MyTransition.this,
                                R.anim.transition_up));
                lastSlide = slide_0;
            }
            count++;
            transparencyHandler.postDelayed(transparencyTimer, 1000);
            timerHandler.postDelayed(timer, 8000);
        }
    };

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.test2);
        slide_0 = (ImageView) findViewById(R.id.slide_1);
        slide_1 = (ImageView) findViewById(R.id.slide_2);
        imageIds = new Vector<Integer>();
        imageIds.add(R.drawable.first_image);
        imageIds.add(R.drawable.second_image);

        // Load Image 1
        slide_0.setImageResource(imageIds.get(0));
        slide_0.startAnimation(AnimationUtils.loadAnimation(this,
                R.anim.transition_down));

        lastSlide = slide_0;
        timerHandler.postDelayed(timer, 8000);
    }
}

Макет (test2.xml):

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/frame"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/slide_1"
        android:layout_gravity="center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop" />
    <ImageView
        android:id="@+id/slide_2"
        android:layout_gravity="center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop" />
</FrameLayout>

Анимация (transition_down.xml):

<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<alpha
    android:fromAlpha="0.0"
    android:toAlpha="2.0"
    android:duration="2000"
    android:repeatCount="0"
    android:fillAfter="true" />
    <scale
        android:fromXScale="1"
        android:toXScale="1.2"
        android:fromYScale="1"
        android:toYScale="1.2"
        android:duration="10000"
        android:repeatCount="0"
        android:fillAfter="true" />
    <alpha
        android:fromAlpha="2.0"
        android:toAlpha="0.0"
        android:duration="2000"
        android:repeatCount="0"
        android:startOffset="8000"
        android:fillAfter="true" />
</set>

Answer 2

Вы добавляете две отдельные анимации.Вот почему они интервалы.

Как новичок, я рекомендую привыкнуть делать анимацию (и действительно все возможные ресурсы), используя xml.Это намного более многословно и в дальнейшем легче менять ресурсы (а также позволяет автоматически изменять ресурсы во время выполнения в зависимости от размера экрана, языка и т. Д.).Кроме того, нужно привыкнуть к истощению всех виджетов Android, прежде чем реализовывать что-то свое.Что касается ресурса анимации, посмотрите на hyperspace_jump.xml пример ресурсов анимации .

Для переходов просмотра я обычно рекомендую ViewFlipper .Однако, поскольку вам нужны пользовательские переходы, вам может потребоваться перейти на уровень ниже и использовать ViewnAnimator .Я понимаю, что вы хотите переключаться между анимациями, но сначала заставьте это работать для одной анимации.Я думаю, что это все еще может работать с ViewFlipper, который будет выглядеть примерно так:

<ViewFlipper
        android:id="@+id/VF"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inAnimation="@anim/yourFirstAnimation
        android:flipInterval="@integer/flip_interval_time">
        <ImageView
            android:id="@+id/slide_1"
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/slide_2"
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </ViewFlipper>

onCreate(Bundle b) {
   setContentView(R.layout.main);
   mVF = (ViewFlipper) findViewById(R.id.VF);
   mVF.startFlipping();
}

Затем, когда вы хотите переключаться между анимациями: установите для вашего flipInterval значение 0 (я думаю) и делайте так, как вы делали сСобытие OnAnimationEnd:

public void onAnimationEnd(Animation animation) {
   Animation an = myAnimationContainer.getRandomAnimation();
   mVF.setInAnimation(an);
   mVF.showNext();

}

Вам не нужно синхронизировать время flipInterval, поскольку это время действительно зависит только от продолжительности анимации.