创建幻灯片放映,将图像相互淡化并进行变换

时间:2011-07-07 15:18:24

标签: android animation

我正在尝试制作类似于this

的图片幻灯片

我找到了this tutorial,它向我展示了如何使图像相互淡入淡出,效果非常好,但我找不到任何示例如何让它同时进行移动/缩放,所以我我正试图改编它。

我添加了一个缩放动画并将其与动画集中的alpha动画一起放入但是我无法使其正常工作,它只在每个其他图像上执行动画,然后当缩放开始时它缩放一个方式和开关然后以另一种方式放大。

我是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>

2 个答案:

答案 0 :(得分:8)

最后对它进行了排序......因为我无法掌握动画结束事件,因为它有多个动画,因此很长时间啰嗦..所以可能不是最好的方式,但它有效,我很高兴!

对于任何想要知道如何...或想要适应它以使其更好的人来说,它是:

主要活动(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>

答案 1 :(得分:0)

您正在添加两个单独的动画。这就是他们间隔的原因。

作为初学者,我建议养成使用xml制作动画(以及所有可能的资源)的习惯。它更加冗长,以后更容易更改资源(以及允许您根据屏幕大小,语言等在运行时自动更改资源)。在实现自定义之前,还养成了真正耗尽所有Android小部件的习惯。 至于动画资源,请查看animation resources处的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时间,因为这个时间实际上只取决于动画的持续时间。