เฟดเข้าเฟดเอาท์นิเมชั่น

นี่คือโค้ดบางส่วนที่ฉันต่อสู้ดิ้นรนมาระยะหนึ่งแล้ว

หากคุณเริ่มการเฟดในแอนิเมชั่น ข้อความป้ายกำกับจะค่อยๆ ปรากฏขึ้น ถ้าฉันเริ่มแอนิเมชันการเฟดเอาท์ ข้อความป้ายกำกับก็จะค่อยๆ จางหายไป

เมื่อฉันเริ่มใช้วิธี startFade จะแสดงเฉพาะการจางหายไปเท่านั้น ฉันจะรอให้วิธี fadeIn เสร็จสิ้นด้วยสายตาก่อนเริ่มวิธี fadeOut ได้อย่างไร

-(IBAction)startFade:(id)sender{
    [self fadeIn];
    [self fadeOut];
}

-(IBAction)fadeIn:(id)sender{
    [self fadeIn];
}

-(IBAction)fadeOut:(id)sender{
[self fadeOut];
}

-(void) fadeIn{
    [_label setAlpha:0];
    [UILabel beginAnimations:NULL context:nil];
    [UILabel setAnimationDuration:2.0];
    [_label setAlpha:1];
    [UILabel commitAnimations];
}

-(void) fadeOut{
    [UILabel beginAnimations:NULL context:nil];
    [UILabel setAnimationDuration:2.0];
    [_label setAlpha:0];
    [UILabel commitAnimations];
}

ios cocoa-touch core-animation
person HiDuEi    schedule 02.01.2014    source แหล่งที่มา
comment
คุณได้ลองใช้แอนิเมชั่นแบบบล็อกแล้วหรือยัง?   -  person holex    schedule 03.01.2014

คำตอบ (12)


arrow_upward
123
arrow_downward

เมื่อคุณเรียกเมธอด fadeIn และ fadeOut กลับไปด้านหลังเหมือนกับที่คุณทำอยู่ โค้ดจะถูกรันทันที ดังนั้นคุณจะเห็นเพียงภาพเคลื่อนไหวจากเมธอดสุดท้ายที่ถูกเรียกเท่านั้น ภาพเคลื่อนไหวแบบบล็อก UIView มอบตัวจัดการความสมบูรณ์ ซึ่งดูเหมือนว่าจะเป็นสิ่งที่คุณกำลังมองหาอย่างแน่นอน ดังนั้นโค้ดของคุณอาจมีลักษณะดังนี้:

-(IBAction)startFade:(id)sender {

    [_label setAlpha:0.0f];        

    //fade in
    [UIView animateWithDuration:2.0f animations:^{

        [_label setAlpha:1.0f];

    } completion:^(BOOL finished) {

        //fade out
        [UIView animateWithDuration:2.0f animations:^{

            [_label setAlpha:0.0f];

        } completion:nil];

    }];
}

สวิฟท์:

@IBAction func startFade(_ sender: AnyObject) {

    label.alpha = 0.0

    // fade in
    UIView.animate(withDuration: 2.0, animations: { 
        label.alpha = 1.0
    }) { (finished) in
        // fade out
        UIView.animate(withDuration: 2.0, animations: {
            label.alpha = 0.0
        })
    }
}
person hgwhittle    schedule 02.01.2014
comment
...และครึ่งหลังของเอฟเฟกต์เฟดอยู่ที่ไหน? - person holex; 03.01.2014
comment
ฉันมักจะลืมทำอย่างนั้น ขอบคุณที่จับมัน - person hgwhittle; 03.01.2014

arrow_upward
34
arrow_downward

ที่เหมาะกับคุณ (_label คือป้ายกำกับของคุณ);

- (IBAction)startFade:(id)sender {
    [_label setAlpha:0.f];

    [UIView animateWithDuration:2.f delay:0.f options:UIViewAnimationOptionCurveEaseIn animations:^{
        [_label setAlpha:1.f];
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:2.f delay:0.f options:UIViewAnimationOptionCurveEaseInOut animations:^{
            [_label setAlpha:0.f];
        } completion:nil];
    }];
}
person holex    schedule 02.01.2014
comment
สามารถทำให้ง่ายขึ้นได้โดยการเพิ่ม UIViewAnimationOptionAutoReverse ให้กับตัวเลือกของภาพเคลื่อนไหวแรก เช่น UIViewAnimationOptionCurveEaseIn | UIViewAnimationOptionAutoReverse และเพิ่งเสร็จสิ้น: ไม่มี แทนที่จะเป็นแอนิเมชั่นอื่น - person Bjørn Egil; 22.05.2014
comment
@ BjørnEgil หากไม่มีเป้าหมายเกี่ยวกับการเปลี่ยนคุณลักษณะใด ๆ ของ UILabel ระหว่างครึ่งทางนั่นก็ใช้ได้เช่นกัน - person holex; 23.05.2014
comment
ใช่ แต่นั่นไม่ใช่ส่วนหนึ่งของคำถาม มันเป็นเพียงวิธีการจางหายไป - person Bjørn Egil; 23.05.2014
comment
@ BjørnEgil คำตอบพยายามที่จะเป็นแบบทั่วไปที่สุดเท่าที่จะเป็นไปได้สำหรับผู้ใช้หรือนักพัฒนารายอื่นซึ่งอาจพยายามนำแนวคิดนี้ไปใช้ซ้ำ - person holex; 23.05.2014

arrow_upward
6
arrow_downward

ลองสิ่งนี้..

// จางหายไป

 -(void)fadeOut:(UIView*)viewToDissolve withDuration:(NSTimeInterval)duration   andWait:(NSTimeInterval)wait
{
[UIView beginAnimations: @"Fade Out" context:nil];

// wait for time before begin
[UIView setAnimationDelay:wait];

// druation of animation
[UIView setAnimationDuration:duration];
viewToDissolve.alpha = 0.0;
[UIView commitAnimations];
}

// จางหายไป

-(void) fadeIn:(UIView*)viewToFadeIn withDuration:(NSTimeInterval)duration andWait:(NSTimeInterval)wait

{
[UIView beginAnimations: @"Fade In" context:nil];

// wait for time before begin
[UIView setAnimationDelay:wait];

    // druation of animation
[UIView setAnimationDuration:duration];
viewToFadeIn.alpha = 1;
[UIView commitAnimations];

}

// จางเข้าจากจางออก

-(void) fadeInFromFadeOut: (UIView*)viewToFadeIn withDuration:(NSTimeInterval)duration
{
    viewToFadeIn.hidden=NO;
    [self fadeOut:viewToFadeIn withDuration:1 andWait:0];
    [self fadeIn:viewToFadeIn withDuration:duration andWait:0];

}

// การทำงานของปุ่ม

-(void) buttonClicked :(id)sender
{
   NSLog(@"Button clicked");

// Each button is given a tag
int tag = ((UIButton*)sender).tag;
if (tag ==1)
{
    sprite.alpha  =1;
    [self fadeOut : sprite withDuration: 10 andWait : 1 ];
}
else if (tag ==2)
{
    sprite.alpha  =0;
    [self fadeIn : sprite withDuration: 3 andWait : 1 ];
}
else
{
    [self fadeInFromFadeOut:sprite withDuration:10];
}
}

ดูลิงก์นี้เพื่อดาวน์โหลดตัวอย่าง..

โปรดดูลิงก์นี้

ยินดีที่จะแบ่งปันกับคุณ .. :-)

person yazh    schedule 14.08.2014
comment
ของเด็ด;ทุกคน!! ตรวจสอบแนวคิดและแนวทางของคุณมากมาย ช่วยฉันได้มาก!! - person HiDuEi; 25.08.2014

arrow_upward
5
arrow_downward

คำตอบทั่วไป: คุณสามารถใช้วิธีนี้เพื่อใช้ภาพเคลื่อนไหวกับวัตถุ UIView ใดก็ได้ ขั้นแรกให้สร้างส่วนขยายของคลาส UIView สร้างไฟล์ Swift แยกต่างหากและเขียนโค้ดเช่นนี้

import Foundation
import UIKit

extension UIView {

    func fadeIn() {
        //Swift 2
        UIView.animateWithDuration(1.0, delay: 0.0, options: UIViewAnimationOptions.CurveEaseIn, animations: {
            self.alpha = 1.0
        }, completion: nil)

        //Swift 3, 4, 5
        UIView.animate(withDuration: 1.0, delay: 0.0, options: UIView.AnimationOptions.curveEaseIn, animations: {
            self.alpha = 1.0
        }, completion: nil)
    }


    func fadeOut() {
        //Swift 2
        UIView.animateWithDuration(1.0, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: {
            self.alpha = 0.0
        }, completion: nil)

        //Swift 3, 4, 5
        UIView.animate(withDuration: 1.0, delay: 0.0, options: UIView.AnimationOptions.curveEaseOut, animations: {
            self.alpha = 0.0
        }, completion: nil)
    }


}

ที่นี่ self หมายถึง UIView ใด ๆ ที่คุณอ้างถึง คุณสามารถใช้ปุ่ม ป้ายกำกับ ฯลฯ เพื่อเรียก 2 วิธีนี้

จากนั้นในคลาสที่รวดเร็วอื่น ๆ คุณสามารถเรียก fadeIn() และ fadeOut() ได้ดังนี้:

self.yourUIObject.fadeIn()
self.yourUIObject.fadeOut()

สิ่งนี้จะให้เอฟเฟกต์ภาพเคลื่อนไหวที่ต้องการแก่ UIObject ใด ๆ

person iPhoneDeveloper    schedule 13.06.2016

arrow_upward
2
arrow_downward

คุณสามารถทำสิ่งนี้ได้ (ตรวจสอบค่าพารามิเตอร์ที่เป็นไปได้และวิธีการที่คล้ายกันที่นี่: https://developer.apple.com/library/ios/documentation/uikit/reference/uiview_class/uiview/uiview.html

[UIView animateWithDuration:duration
                      delay:delay
                    options:option 
                 animations:^{
                     //fade in here (changing alpha of UILabel component)
                 } 
                 completion:^(BOOL finished){
                    if(finished){
                      //start a fade out here when previous animation is finished (changing alpha of UILabel component)
                 }];
}
person Julian    schedule 02.01.2014

arrow_upward
2
arrow_downward

ตามคำตอบของ @holex แต่ทำให้ง่ายขึ้นเล็กน้อย (ตามความคิดเห็น):

- (IBAction)startFade:(id)sender {
   [_label setAlpha:0.f];

   [UIView animateWithDuration:2.f 
                         delay:0.f 
                       options:UIViewAnimationOptionCurveEaseIn
                             | UIViewAnimationOptionAutoreverse 
                    animations:^{
                                  [_label setAlpha:1.f];
                                } 
                    completion:nil];
}
person Bjørn Egil    schedule 22.05.2014

arrow_upward
2
arrow_downward

Swift 4 หากคุณต้องการเพียงพัลส์เดียวเมื่อคลิกปุ่ม ให้ใช้สิ่งนั้น:

@IBAction func didPressButton(_ sender: UIButton) {
        self.someView.alpha = 0
        UIView.animate(withDuration: 0.4,
                       delay: 0,
                       options: [.curveEaseInOut, .autoreverse],
                       animations: {
                        self.someView.alpha = 1
        },
                       completion: { _ in
                        self.someView.alpha = 0
        })
    }
person Nik Kov    schedule 22.07.2018

arrow_upward
1
arrow_downward

วิธีที่ง่ายที่สุดคือใช้:

[UIView animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion]

และเพิ่มการเรียก fadeOut ไปที่บล็อก completion เอกสารอาจช่วยตอบทุกคำถามที่คุณมี

หากคุณไม่สามารถใช้เวอร์ชันบล็อกได้ด้วยเหตุผลบางประการ คุณจะต้องตั้งค่าผู้รับมอบสิทธิ์ ([UIView setAnimationDelegate:(id)delegate]) และตัวเลือกด้วย ([UIView setAnimationDidStopSelector:]) ที่ผู้รับมอบสิทธิ์จะตอบกลับ

อีกครั้ง โปรดดูที่ เอกสารประกอบสำหรับรายละเอียดเพิ่มเติม

person jemmons    schedule 02.01.2014

arrow_upward
1
arrow_downward

งานของฉันคือทำให้ป้ายกำกับจางหายไป แล้วค่อยๆ จางหายไปพร้อมกับข้อความที่เปลี่ยนไป วิธีแก้ไขคือ:

    -(void)performAnimationOnHistoryButtonLabelUpdatingTextTo:(NSString *)text
{
    [UIView animateWithDuration:0.4f animations:^{
        [self.historyButtonLabel setAlpha:0.0f];

    } completion:^(BOOL finished) {
        self.historyButtonLabel.text = text;

        [UIView animateWithDuration:0.4f animations:^{
            [self.historyButtonLabel setAlpha:1.0f];
        } completion:nil];

    }];
}
person Naloiko Eugene    schedule 27.03.2014

arrow_upward
1
arrow_downward

ฉันขอแนะนำอย่างยิ่งให้คุณใช้การใช้งานทั่วไปเพื่อให้คุณสามารถนำโค้ดกลับมาใช้ใหม่ได้ทุกเมื่อที่คุณต้องการเอฟเฟกต์จางหายไปอีกครั้ง

คุณควรสร้างส่วนขยาย UIView:

UIView+Animations.h

#import <Foundation/Foundation.h>

@interface UIView (Animations)

- (void)fadeInWithCompletion:(void (^ __nullable)(BOOL finished))completion;
- (void)fadeOutWithCompletion:(void (^ __nullable)(BOOL finished))completion;;

@end

UIView+Animations.m

#import "UIView+Animations.h"

@implementation UIView (Animations)

- (void)fadeInWithCompletion:(void (^ __nullable)(BOOL finished))completion {
    [UIView animateWithDuration:2 animations:^{
        [self setAlpha:1];
    } completion:completion];
}

- (void)fadeOutWithCompletion:(void (^ __nullable)(BOOL finished))completion {
    [UIView animateWithDuration:2 animations:^{
        [self setAlpha:0];
    } completion:completion];
}

@end

ดังนั้น คุณเพียงแค่ต้องนำเข้าไฟล์ใหม่ไปยังชั้นเรียนของคุณหรือภายใน Prefix.pch ของคุณ และใช้งานในลักษณะนี้:

[_label fadeOutWithCompletion:^(BOOL finished) {
   [_label fadeInWithCompletion:nil];
}];

โปรดทราบว่าคุณสามารถใช้ nil เป็นพารามิเตอร์การทำให้เสร็จสมบูรณ์ได้ เมื่อคุณไม่มีอะไรทำหลังจากเสร็จสิ้นแล้ว

ฉันขอแนะนำไม่ให้คุณกำหนดพารามิเตอร์ระยะเวลาเพื่อรักษารูปแบบตลอดทั้งแอปพลิเคชันของคุณ

การใช้งานนี้สามารถนำไปใช้ในอนาคตสำหรับ UIButton, UILabel, UITextField... คลาสใดก็ได้ที่มาจาก UIView

person joao.arruda    schedule 05.07.2016

arrow_upward
1
arrow_downward

ภาพเคลื่อนไหวแบบเฟดเข้าและเฟดออกสามารถรวมกันได้โดยใช้ UIView.animate(withDuration: animations:)

UIView.animate(withDuration: animationDuration, animations: {
            myView.alpha = 0.75
            myView.alpha = 1.0
        })
person ArunGJ    schedule 06.01.2018

arrow_upward
1
arrow_downward

คำตอบของ iPhoneDeveloper เวอร์ชัน Swift 5:

extension UIView {
    
    func fadeIn() {
        UIView.animate(withDuration: 1.0, delay: 0.0, options: UIView.AnimationOptions.curveEaseIn, animations: {
            self.alpha = 1.0
        }, completion: nil)
    }
    
    func fadeOut() {
        UIView.animate(withDuration: 1.0, delay: 0.0, options: UIView.AnimationOptions.curveEaseOut, animations: {
            self.alpha = 0.0
        }, completion: nil)
    }
}
person jglasse    schedule 04.08.2019