Fade In Fade Out Animation

后端 未结 13 1142
生来不讨喜
生来不讨喜 2021-01-30 01:45

Here is some code I struggle with for a while.

If you start the fade in animation, the label text fades in. If I start the fade out animation the the label text fades ou

相关标签:
13条回答
  • 2021-01-30 01:55
    labelAnimate = (UILabel*) [self.view viewWithTag:101];
    btnTapMe = (UIButton*) [self.view viewWithTag:100];
    [btnTapMe addTarget:self action:@selector(startAnimating:) forControlEvents:UIControlEventTouchUpInside];
    
    //////////////
    
    -(void) startAnimating:(UIButton*)button {
        [labelAnimate setAlpha:0.0];
        [NSTimer scheduledTimerWithTimeInterval:1.8 target:self selector:@selector(continuousEaseInOut) userInfo:button repeats:YES];
    }
    
    -(void) continuousFadeInOut {
        [UIView animateWithDuration:2.0 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{
            [labelAnimate setAlpha:1.0];
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:2.0 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
                [labelAnimate setAlpha:0.0];
            } completion:nil];
        }];
    }
    
    0 讨论(0)
  • 2021-01-30 01:56

    I strongly suggest you use a generic implementation so you can reuse the code whenever you need the fade effect again.

    You should create an UIView extension:

    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
    

    So, you only have to import the new file to your class or inside your Prefix.pch and use it like this:

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

    Note that you could also use nil as the completion parameter when you have nothing else to do after completion.

    I also recommend you do not parameterize the duration to keep a pattern through you entire application.

    This implementation can be used in the future for UIButton, UILabel, UITextField... Well, any class derived from UIView.

    0 讨论(0)
  • 2021-01-30 02:00

    you can do something like this (check possible parameters values and similar methods here : 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)
                     }];
    }
    
    0 讨论(0)
  • 2021-01-30 02:00

    Swift 5 version of iPhoneDeveloper's answer:

    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)
        }
    }
    
    0 讨论(0)
  • 2021-01-30 02:03

    Generic answer : You can use this method to apply animation to any UIView object . First create an extension of UIView class . Create a separate swift file and write the code like this

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

    Here self refers to any UIView you refer to . You can use buttons, labels etc to call these 2 methods .

    Then in any other swift class you can call fadeIn() and fadeOut() like this :

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

    This gives the desired effect of animation to any UIObject .

    0 讨论(0)
  • 2021-01-30 02:03

    My task was to make a label fade out. And then fade in with changed text. The solution was:

        -(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];
    
        }];
    }
    
    0 讨论(0)
提交回复
热议问题