Fade In Fade Out Animasi Android di Jawa


148

Saya ingin memiliki 2 detik animasi dari ImageView yang menghabiskan 1000ms memudar dan kemudian 1000ms memudar.

Inilah yang saya miliki sejauh ini di konstruktor ImageView saya:

Animation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setDuration(1000);

Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setStartOffset(1000);
fadeOut.setDuration(1000);

AnimationSet animation = new AnimationSet(true);
animation.addAnimation(fadeIn);
animation.addAnimation(fadeOut);
this.setAnimation(animation);

Ketika saya menjalankan animasi itu, tidak ada yang muncul. Namun, ketika saya menghapus salah satu animasi alfa, perilaku tersebut berfungsi seperti yang diharapkan.

Hal yang sudah saya coba:

  • Setiap kombinasi yang mungkin dari setFillBefore, setFillAfter, dan setFillEnabled.
  • Menambahkan LinearInterpolatorke AnimationSet.

1
Ya, Anda dapat memudar gambar masuk dan keluar! Tutorial ini harus melakukan triknya. sankarganesh-info-exchange.blogspot.com/2011/04/...
Adam Storm

Tutorial itu menjelaskan metode menggunakan XML. Apakah Anda tahu cara mencapai hal yang sama menggunakan Java?
pembajak

Yah, saya tidak di sebelah komputer pemrograman saya jadi saya tidak bisa menguji kode ini, tetapi Anda dapat mengatur atribut xml di java. ini adalah kode asli: android: interpolator = "@ android: anim / accelerate_interpolator" android: fromAlpha = "0.0" android: toAlpha = "1.0" android: durasi = "300" /> \ n sehingga Anda mungkin dapat MyTween.setDurationg (300) MyTween.fromAlpha (0.0) MyTween (1.0)
Adam Storm

Jawaban:


258

Menemukan masalah saya sendiri. Solusinya akhirnya berbasis di interpolator.

Animation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setInterpolator(new DecelerateInterpolator()); //add this
fadeIn.setDuration(1000);

Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setInterpolator(new AccelerateInterpolator()); //and this
fadeOut.setStartOffset(1000);
fadeOut.setDuration(1000);

AnimationSet animation = new AnimationSet(false); //change to false
animation.addAnimation(fadeIn);
animation.addAnimation(fadeOut);
this.setAnimation(animation);


Jika Anda menggunakan Kotlin

val fadeIn = AlphaAnimation(0f, 1f)
fadeIn.interpolator = DecelerateInterpolator() //add this
fadeIn.duration = 1000

val fadeOut = AlphaAnimation(1f, 0f)
fadeOut.interpolator = AccelerateInterpolator() //and this
fadeOut.startOffset = 1000
fadeOut.duration = 1000

val animation = AnimationSet(false) //change to false
animation.addAnimation(fadeIn)
animation.addAnimation(fadeOut)
this.setAnimation(animation)

1
Bagaimana jika Anda ingin melakukan 5 atau 6 fading in / out, dengan penundaan sangat kecil seperti masing-masing 100, dapatkah Anda menggunakan sesuatu seperti ini? Saya mencoba tetapi itu tidak benar-benar cair. Tujuannya adalah untuk mensimulasikan misalnya bola lampu yang tidak akan berfungsi dengan baik, dan berkelap-kelip.
Chayy

coba dan hubungi this.setAnimation in a loop
Jonathan

Saya berpikir saya memudar bg img terakhir dan mode di yang sekarang, tapi jawaban ini mengilhami saya bahwa saya hanya perlu memudar di bg img saat ini dan memudar yang sekarang, karena AlphaAnimation tidak dapat memudar dua gambar yang berbeda .
macio.Jun

8
Saya tidak berpikir Anda perlu memiliki dua animasi independen ... Saya pikir Anda bisa memiliki satu animasi dan mengatur parameter: fadeInOut.setRepeatMode (Animation.REVERSE);
RoundSparrow hilltx

Kedua: jika Anda ingin mengulang, tidak perlu menelepon dalam lingkaran seperti kata @jonney. gunakan fadeInOut.setRepeatCount (6) - ubah 6 menjadi berapa banyak yang ingin Anda ulangi. Apalagi overhead untuk membiarkan kode C ++ asli di Android melakukan semua ini alih-alih memanggil dalam Java loop.
RoundSparrow hilltx

137

Saya tahu ini sudah dijawab tetapi .....

<?xml version="1.0" encoding="utf-8"?> 
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0" 
    android:toAlpha="0.0" 
    android:duration="1000"    
    android:repeatCount="infinite" 
    android:repeatMode="reverse"
    />

Cara cepat dan mudah untuk cepat memudar dan keluar dengan pengulangan sendiri. Nikmati

EDIT : Dalam aktivitas Anda, tambahkan ini:

yourView.startAnimation(AnimationUtils.loadAnimation(co‌​ntext, R.anim.yourAnimation));

6
+1 Karena dengan jawaban ini saya dapat membuat fade in, fade out dan fade in (hanya mengatur repeatCount = "2"). Saya tidak bisa menyatukan animasi seperti yang diajukan oleh jawaban yang diterima.
ElYeante

1
Setelah menyatakan alphasumber ini, bagaimana saya bisa menggunakannya? Terima kasih
zozelfelfo

1
zozelfelfo itu hanya xml animasi jadi muat ke dalam kode lalu panggil startAnimation pada tampilan apa pun yang Anda inginkan.
Konrad Winkowski

@KonradWinkowski startAnimation method membutuhkan objek Animation sebagai argumen! apa yang harus saya lewati?
Ahmad Vatani

Bagi mereka yang mencari jawaban yang lebih lengkap viewToAnimate.startAnimation(AnimationUtils.loadAnimation(context, R.anim.fade_in_out):, di mana ada file fade_in_out.xml di folder anim di bawah res.
Chris Knight

32
viewToAnimate.animate().alpha(1).setDuration(1000).setInterpolator(new DecelerateInterpolator()).withEndAction(new Runnable() {
    @Override
    public void run() {
        viewToAnimate.animate().alpha(0).setDuration(1000).setInterpolator(new AccelerateInterpolator()).start();
    }
}).start();

4
Elegan untuk Marshmallow!
BIARKAN

26

Inilah solusi saya menggunakan AnimatorSet yang tampaknya sedikit lebih dapat diandalkan daripada AnimationSet.

// Custom animation on image
ImageView myView = (ImageView)splashDialog.findViewById(R.id.splashscreenImage);

ObjectAnimator fadeOut = ObjectAnimator.ofFloat(myView, "alpha",  1f, .3f);
fadeOut.setDuration(2000);
ObjectAnimator fadeIn = ObjectAnimator.ofFloat(myView, "alpha", .3f, 1f);
fadeIn.setDuration(2000);

final AnimatorSet mAnimationSet = new AnimatorSet();

mAnimationSet.play(fadeIn).after(fadeOut);

mAnimationSet.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        mAnimationSet.start();
    }
});
mAnimationSet.start();

Saya harus menggunakan ObjectAnimator daripada Animasi untuk mendapatkan solusi yang berfungsi karena untuk beberapa alasan, setiap kali saya memulai AlphaAnimation, itu berjalan dua kali dan melakukan beberapa kedipan aneh.
Andrew Orobator

solusi elegan
Vlad

Yah, ini sudah terlambat tapi saya pikir ini mungkin bisa membantu beberapa, mohon hapus animasi sebelum menggunakannya lagi pada tampilan yang sama ..
Bhavesh Moradiya

21

Alternatif lain:

Tidak perlu mendefinisikan 2 animasi untuk fadeIn dan fadeOut . fadeOut adalah kebalikan dari fadeIn .

Jadi Anda dapat melakukan ini dengan Animasi. REVERSE seperti ini:

AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
alphaAnimation.setDuration(1000);
alphaAnimation.setRepeatCount(1);
alphaAnimation.setRepeatMode(Animation.REVERSE);
view.findViewById(R.id.imageview_logo).startAnimation(alphaAnimation);

lalu padaAnimationEnd :

alphaAnimation.setAnimationListener(new Animation.AnimationListener() {
    @Override
        public void onAnimationStart(Animation animation) {
            //TODO: Run when animation start
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            //TODO: Run when animation end
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
            //TODO: Run when animation repeat
        }
    });

12

Karena saya percaya pada kekuatan XML (untuk tata letak), ini setara dengan jawaban yang diterima , tetapi murni sebagai sumber animasi:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/accelerate_decelerate"
    android:fillAfter="true">
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="1000" />
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="1000"
        android:startOffset="1000"/>
</set>

Ini fillAfteruntuk memudar untuk tetap setelah menyelesaikan animasi. The interpolatormenangani interpolasi dari animasi, karena Anda bisa menebak. Anda juga dapat menggunakan jenis interpolator lain, seperti Linear atau Overshoot.

Pastikan untuk memulai animasi Anda pada tampilan Anda:

yourView.startAnimation(AnimationUtils.loadAnimation(co‌​ntext, R.anim.fade));

@KGCybeX tidak masalah, senang saya bisa membantu :)
DarkCygnus

1
Sangat membantu dan bersih. Berfungsi sempurna untuk saya.
Fernando Barbosa

9

Ini adalah apa yang saya gunakan untuk memudar tampilan, berharap ini membantu seseorang.

private void crossFadeAnimation(final View fadeInTarget, final View fadeOutTarget, long duration){
    AnimatorSet mAnimationSet = new AnimatorSet();
    ObjectAnimator fadeOut = ObjectAnimator.ofFloat(fadeOutTarget, View.ALPHA,  1f, 0f);
    fadeOut.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
        }

        @Override
        public void onAnimationEnd(Animator animation) {
            fadeOutTarget.setVisibility(View.GONE);
        }

        @Override
        public void onAnimationCancel(Animator animation) {
        }

        @Override
        public void onAnimationRepeat(Animator animation) {
        }
    });
    fadeOut.setInterpolator(new LinearInterpolator());

    ObjectAnimator fadeIn = ObjectAnimator.ofFloat(fadeInTarget, View.ALPHA, 0f, 1f);
    fadeIn.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
            fadeInTarget.setVisibility(View.VISIBLE);
        }

        @Override
        public void onAnimationEnd(Animator animation) {}

        @Override
        public void onAnimationCancel(Animator animation) {}

        @Override
        public void onAnimationRepeat(Animator animation) {}
    });
    fadeIn.setInterpolator(new LinearInterpolator());
    mAnimationSet.setDuration(duration);
    mAnimationSet.playTogether(fadeOut, fadeIn);
    mAnimationSet.start();
}

Entah bagaimana ini adalah satu-satunya jawaban yang mencakup pengaturan visibilitas, baik
Luke

8

AnimationSets tampaknya tidak berfungsi seperti yang diharapkan sama sekali. Pada akhirnya saya menyerah dan menggunakan postDelayed () kelas Handler untuk mengurutkan animasi.


8

Jika Anda menggunakan Animator untuk membuat animasi Anda bisa

anim (direktori) -> fade_out.xml

<?xml version="1.0" encoding="UTF-8"?>
<objectAnimator
    android:propertyName="alpha"
    android:valueFrom="0"
    android:valueTo="1"
    xmlns:android="http://schemas.android.com/apk/res/android"/>

Di jawa

Animator animator = AnimatorInflater.loadAnimator(context, R.animator.fade_out);
animator.setTarget(the_view_you_want_to_animation);
animator.setDuration(1000);
animator.start();

Cara lain untuk membuat animasi menghilang hanya dengan kode java

ObjectAnimator fadeOut = ObjectAnimator.ofFloat(the_view_you_want_to_animation, "alpha",  1f, 0);
fadeOut.setDuration(2000);
fadeOut.start();

dalam direktori anim * not animator
kosas

4

Anda juga dapat menggunakan animationListener, sesuatu seperti ini:

fadeIn.setAnimationListener(new AnimationListener() {
    @Override
    public void onAnimationEnd(Animation animation) {
        this.startAnimation(fadeout);
    }
});

0

Saya sangat suka solusi Vitaly Zinchenkos karena pendek.

Ini adalah versi yang lebih singkat di kotlin untuk fade out yang sederhana

viewToAnimate?.alpha = 1f
viewToAnimate?.animate()
             ?.alpha(0f)
             ?.setDuration(1000)
             ?.setInterpolator(DecelerateInterpolator())
             ?.start()
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.