Fade In Fade Out Android Animation ใน Java


148

ฉันต้องการที่จะมีอนิเมชั่น 2 วินาทีของ ImageView ที่ใช้เวลา 1,000 มิลลิวินาทีในการเฟดและจากนั้นจะหายไป 1,000 มิลลิวินาที

นี่คือสิ่งที่ฉันมีใน ImageView Constructor ของฉัน:

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);

เมื่อฉันรันภาพเคลื่อนไหวนั้นไม่มีอะไรปรากฏขึ้น อย่างไรก็ตามเมื่อฉันลบภาพเคลื่อนไหวอัลฟาหนึ่งรายการพฤติกรรมจะทำงานตามที่คาดไว้

สิ่งที่ฉันได้ลองไปแล้ว:

  • ทุกคนรวมกันเป็นไปได้ของsetFillBefore, และsetFillAftersetFillEnabled
  • เพิ่มไปยังLinearInterpolatorAnimationSet

1
ใช่คุณสามารถลบภาพเข้าและออก! บทช่วยสอนนี้ควรทำเคล็ดลับ sankarganesh-info-exchange.blogspot.com/2011/04/…
Adam Storm

บทช่วยสอนนั้นอธิบายวิธีการใช้ XML คุณรู้วิธีการบรรลุสิ่งเดียวกันโดยใช้ Java?
คนไถ

ฉันไม่ได้อยู่ข้างคอมพิวเตอร์เขียนโปรแกรมของฉันดังนั้นฉันจึงไม่สามารถทดสอบโค้ดนี้ได้ แต่คุณสามารถตั้งค่าแอตทริบิวต์ xml ใน java ได้ นี่คือรหัสต้นฉบับ: android: interpolator = "@ android: anim / acceler_interpolator" android: fromAlpha = "0.0" android: toAlpha = "1.0" android: duration = "300" /> \ n เพื่อให้คุณสามารถ MyTween.setDuration (300) MyTween.fromAlpha (0.0) MyTween (1.0)
Adam Storm

คำตอบ:


258

คิดออกปัญหาของฉันเอง วิธีการแก้ปัญหานั้นขึ้นอยู่กับผู้แก้ไข

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);


หากคุณกำลังใช้ 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
ถ้าคุณต้องการที่จะทำ 5 หรือ 6 การซีดจางเข้า / ออกด้วยความล่าช้าเล็กน้อยเช่น 100 ต่อแต่ละคุณสามารถใช้สิ่งนี้หรือไม่? ฉันลองแล้ว แต่มันไม่ได้เหลวจริงๆ จุดมุ่งหมายคือการจำลองตัวอย่างหลอดไฟที่ทำงานไม่ถูกต้องและกระพริบตา
Chayy

ลองและเรียกสิ่งนี้ setAnimation แบบวนซ้ำ
Jonathan

ฉันคิดว่าฉันหายไป bg img ล่าสุดและตกอยู่ในสถานะปัจจุบัน แต่คำตอบนี้เป็นแรงบันดาลใจให้ฉันว่าฉันเพียงแค่ต้องการจางหายไปใน bg img ปัจจุบันและจางหายไปในปัจจุบันเนื่องจาก AlphaAnimation .
macio.Jun

8
ฉันไม่คิดว่าคุณจะต้องมีภาพเคลื่อนไหวที่เป็นอิสระสองภาพ ... ฉันคิดว่าคุณสามารถมีภาพเคลื่อนไหวเดียวและตั้งค่าพารามิเตอร์: fadeInOut.setRepeatMode (Animation.REVERSE);
RoundSparrow hilltx

ประการที่สอง: ถ้าคุณต้องการที่จะทำซ้ำไม่จำเป็นต้องโทรในวงเหมือน @jonney กล่าว ใช้ fadeInOut.setRepeatCount (6) - เปลี่ยน 6 เป็นจำนวนที่คุณต้องการให้ทำซ้ำ ค่าใช้จ่ายน้อยกว่ามากในการปล่อยให้โค้ด C ++ ดั้งเดิมใน Android ทำสิ่งนี้ทั้งหมดแทนที่จะโทรในลูป Java
RoundSparrow hilltx

137

ฉันรู้ว่านี่ได้รับคำตอบแล้ว แต่ .....

<?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"
    />

วิธีที่รวดเร็วและง่ายดายในการจางหายไปอย่างรวดเร็วด้วยการทำซ้ำด้วยตนเอง สนุก

แก้ไข : ในกิจกรรมของคุณเพิ่มสิ่งนี้:

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

6
+1 เพราะด้วยคำตอบนี้ฉันสามารถเซ่นไหวได้, จางหายและจางหายไป (เพียงแค่ตั้งค่า repeatCount = "2") ฉันไม่สามารถต่อภาพเคลื่อนไหวได้ตามที่ยอมรับคำตอบ
ElYeante

1
หลังจากประกาศalphaทรัพยากรนี้ฉันจะใช้งานได้อย่างไร ขอบคุณ
zozelfelfo

1
zozelfelfo เป็นเพียง xml ของภาพเคลื่อนไหวดังนั้นให้โหลดเป็นรหัสแล้วเรียก startAnimation ในมุมมองที่คุณต้องการให้มีผล
Konrad Winkowski

@KonradWinkowski วิธีการ startAnimation ต้องการวัตถุ Animation เป็นอาร์กิวเมนต์! สิ่งที่ฉันควรผ่านไป
Ahmad Vatani

สำหรับผู้ที่มองหาคำตอบที่สมบูรณ์ยิ่งขึ้น: viewToAnimate.startAnimation(AnimationUtils.loadAnimation(context, R.anim.fade_in_out)โดยที่มีไฟล์ fade_in_out.xml ในโฟลเดอร์แอนิเมชั่นภายใต้ความละเอียด
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
Elegante สำหรับ Marshmallow!
LETs

26

นี่เป็นวิธีแก้ปัญหาของฉันโดยใช้ AnimatorSet ซึ่งน่าเชื่อถือกว่า 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();

ฉันต้องใช้ ObjectAnimator แทนแอนิเมชันเพื่อให้ได้วิธีแก้ปัญหาการทำงานเพราะด้วยเหตุผลบางอย่างเมื่อใดก็ตามที่ฉันเริ่มต้น AlphaAnimation มันจะวิ่งสองครั้ง
Andrew Orobator

ทางออกที่สวยงาม
Vlad

มันสายเกินไป แต่ฉันคิดว่านี่อาจจะช่วยได้บ้างกรุณาอนิเมชั่นที่ชัดเจนก่อนที่จะใช้อีกครั้งในมุมมองเดียวกัน ..
Bhavesh Moradiya

21

ทางเลือกอื่น:

ไม่จำเป็นต้องกำหนด 2 นิเมชั่นสำหรับfadeInและfadeOut fadeOutเป็นสิ่งที่ตรงกันข้ามของfadeIn

ดังนั้นคุณสามารถทำได้ด้วยAnimation.REVERSEเช่นนี้:

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);

จากนั้นในแอนนิเมชั่นและ :

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

ตามที่ฉันเชื่อในพลังของ XML (สำหรับเลย์เอาต์) สิ่งนี้เทียบเท่ากับคำตอบที่ยอมรับแต่เป็นทรัพยากรภาพเคลื่อนไหวเท่านั้น:

<?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>

สิ่งfillAfterนี้จะทำให้จางหายไปหลังจากที่ทำอนิเมชั่นเสร็จแล้ว การinterpolatorจับการแก้ไขของภาพเคลื่อนไหวที่คุณสามารถเดาได้ คุณยังสามารถใช้เครื่องมือแทรกประเภทอื่น ๆ ได้เช่น Linear หรือ Overshoot

ให้แน่ใจว่าได้เริ่มต้นการเคลื่อนไหวของคุณในมุมมองของคุณ:

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

@KGCybeX ไม่มีปัญหาดีใจที่ฉันสามารถช่วย :)
23419

1
ช่วยเหลือดีและสะอาดมาก ทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน
Fernando Barbosa

9

นี่คือสิ่งที่ฉันเคยจางหายไปในการเข้าชม / ออกหวังว่านี่จะช่วยให้ใครบางคน

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();
}

อย่างใดนี่เป็นคำตอบเดียวที่รวมถึงการตั้งค่าการมองเห็นดี
ลุค

8

AnimationSets ไม่ทำงานตามที่คาดไว้ ในที่สุดฉันก็ยอมแพ้และใช้ postDelayed () ของคลาส Handler เป็นลำดับภาพเคลื่อนไหว


8

หากคุณใช้ Animator สำหรับสร้างภาพเคลื่อนไหวคุณสามารถทำได้

anim (ไดเรกทอรี) -> 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"/>

ในภาษาจาวา

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

วิธีอื่น ๆ ในการทำให้แอนิเมชั่นจางหายไปด้วยจาวาโค้ดเท่านั้น

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

ในไดเรกทอรีภาพเคลื่อนไหว * ไม่ใช่ภาพเคลื่อนไหว
kosas

4

คุณสามารถใช้ animationListener ได้เช่นนี้:

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

0

ฉันชอบโซลูชันVitaly Zinchenkos จริงๆเพราะมันสั้น

นี่คือรุ่นที่เงียบยิ่งกว่าเดิมใน kotlin สำหรับการลอกง่าย

viewToAnimate?.alpha = 1f
viewToAnimate?.animate()
             ?.alpha(0f)
             ?.setDuration(1000)
             ?.setInterpolator(DecelerateInterpolator())
             ?.start()
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.