Cómo agregar animación al cambiar el modo oculto de un uiview?

Quiero añadir animación a la vista, mientras el cambio de su modo oculto yo.e

my_view.hidden=YES;

He añadido un botón en navigationbar. Cuando hacemos clic en la nueva vista está configurado para mostrar. Se dibuja en la parte superior de la mesa de navegación.

  • ¿Qué tipo de animación que desea, por ejemplo, se desvanecen, flip, etc.?

12 Kommentare

  1. 29

    Por desgracia, oculta no es una propiedad que es animada a través de UIView animaciones. Creo que la mejor opción puede ser usar una de las animaciones @Erik B sugerido, o empezar a salpicar con Núcleo de Animaciones que son mucho más potentes. Echar un vistazo a la documentación de UIView animaciones y el Núcleo de Animaciones.

    He conseguido algo parecido a lo que tu sugiriendo mediante el uso de UIView las animaciones de la diapositiva de la nueva vista desde abajo de otro punto de vista. Esto hizo aparecer como un cajón se deslice hacia fuera. Si quieres hacer algo como eso, usted necesita para interceptar el toque dentro del evento y el lugar de la animación de código no.

    - (IBAction)buttonClicked:(id)sender {
        [UIView animateWithDuration:0.5
                              delay:0.0 
                            options:UIViewAnimationCurveEaseOut
                         animations:^(void) {
                            self.myView.frame = /* set the frame here */
                         } 
                         completion:NULL];
    }
    • opción debe ser: UIViewAnimationOptionCurveEaseInOut
  2. 57

    Animar el punto de vista de la opacidad de 100% a 0%. La animación de la finalización de devolución de llamada de establecer el punto de vista oculto. También puede ser que desee para restablecer la opacidad al 100% durante la llamada, de manera que la vista se mostrará totalmente opaco cuando se mostrarlo.

    yourView.alpha = 0.0 //for zero opacity
    yourView.alpha = 1.0 //for 100% opacity
    • Esta debe ser la respuesta correcta!
    • De acuerdo. Esta es la respuesta correcta.
    • Por qué ocultar, a continuación, si necesitamos utilizar alfa antes de que? El uso de alfa tiene una penalización de rendimiento y no estamos evitando que este utilizando este enfoque.
  3. 31

    No hay animación para ocultar sin embargo, se puede obtener el mismo resultado con el código Swift a continuación:

    UIView.animate(withDuration: 0.2, delay: 0, options: [], animations: {            
        self.yourView.alpha = 0 //Here you will get the animation you want
    }, completion: { _ in  
        self.yourView.hidden = true //Here you hide it when animation done
    })
    • Impresionante, simple. Gracias!
    • Recibiendo el error como : nil no es compatible con las expectativas de tipo de argumento ‘UIViewAnimationOptions’. Estoy usando Xcode 7.3.1.
    • usted puede reemplazar options: nil con options: []
    • esto probablemente debería ser la respuesta seleccionada (tal vez en realidad no desde OP publicado en Obj-C días), esto es conciso y hace exactamente lo OP/mismo necesito
  4. 20

    Creo que la manera más apropiada de hacerlo es:

    [UIView transitionWithView:aView
                      duration:0.3
                       options:UIViewAnimationOptionTransitionCrossDissolve 
                    animations:^(void){
                                  aView.hidden = NO;
                               }
                    completion:nil];
    • Esta es la respuesta correcta, de jugar con la alfa no es necesario. He ordenado para que sea más legible.
  5. 20

    Actualizado a Swift 3:

    UIView.animate(withDuration: 0.2, delay: 0.2, options: .curveEaseOut,
          animations: {firstView.alpha = 0}, 
          completion: { _ in firstView.isHidden = true
            //Do anything else that depends on this animation ending
        })

    Y si usted desea animar algo después de la primera vista se ha ido, usted puede replicar el código dentro de la finalización del bloque con alpha = 1 y hidden = false.

  6. 18

    Aquí una categoría escribí para introducir un nuevo «ocultos» de la propiedad en UIView que admite correctamente animación:

    @implementation UIView (AnimateHidden)
    
    -(void)setHiddenAnimated:(BOOL)hide
    {
      [UIView animateWithDuration:0.5
                            delay:0.0
                          options: UIViewAnimationCurveEaseOut
                       animations:^
                                 {
                               [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
                               if (hide)
                                 self.alpha=0;
                               else
                               {
                                 self.hidden= NO;
                                 self.alpha=1;
                               }
                             }
          completion:^(BOOL b)
          {
            if (hide)
              self.hidden= YES;
          }
      ];
    }
    @end
    • Gracias, esto funcionó para mí! Pero he hecho algunas adiciones a hacer interoperable con el hidden propiedad: Básicamente, dejar siempre alpha a 1.0 en la final, a fin de establecer la adecuada partida alpha y hidden.
  7. 9

    Esto se corrigió N. J. de la versión:

    @implementation UIView (AnimateHidden)
    
    -(void)setHiddenAnimated:(BOOL)hide duration:(NSTimeInterval)duration {
        if(self.hidden == hide)
            return;
        if(hide)
            self.alpha = 1;
        else {
            self.alpha = 0;
            self.hidden = NO;
        }
        [UIView animateWithDuration:duration animations:^{
            if (hide)
                self.alpha = 0;
            else
                self.alpha = 1;
        } completion:^(BOOL finished) {
            if(finished)
                self.hidden = hide;
        }];
    }
    
    @end
  8. 6

    Aquí es swift versión para esto :

     UIView.animateWithDuration(0.5, delay: 0.2, options:
        UIViewAnimationOptions.CurveEaseOut, animations: {
                objView.alpha = 0
            }, completion: { finished in
                objView.hidden = true
      })

    Este realiza la animación con una duración de 5 segundos y después de un retraso de 2 segundos.

    Disponible AnimationOptions son :

    CurveEaseInOut, CurveEaseIn, CurveEaseOut, CurveLinear
  9. 3

    NJ y Stanislav respuestas aquí me ayudó a crear una nueva categoría para este, que creo que mejora en sus respuestas, por lo que pensé que iba a publicar lo que se me ocurrió en el caso de que ayuda a nadie.

    Nota de que sólo funciona en iOS4 o, más tarde, como es el uso de bloques.

    UIView+AnimateHidden.m

    #import "UIView+AnimateHidden.h"
    
    @implementation UIView (AnimateHidden)
    
    - (void)setHidden:(BOOL)hidden animated:(BOOL)animated
    {
        //If the hidden value is already set, do nothing
        if (hidden == self.hidden) {
            return;
        }
        //If no animation requested, do the normal setHidden method
        else if (animated == NO) {
            [self setHidden:hidden];
            return;
        }
        else {
            //Store the view's current alpha value
            CGFloat origAlpha = self.alpha;
    
            //If we're unhiding the view, make it invisible initially
            if (hidden == NO) {
                self.alpha = 0;
            }
    
            //Unhide the view so we can see the animation
            self.hidden = NO;
    
            //Do the animation
            [UIView animateWithDuration:0.5
                                  delay:0.0
                                options: UIViewAnimationOptionCurveEaseOut
                             animations:^{
                //Start animation block
                if (hidden == YES) {
                    self.alpha = 0;
                }
                else {
                    self.alpha = origAlpha;
                }
                //End animation block
            }
                            completion:^(BOOL b){
                //Start completion block
                //Finish up by hiding the view if necessary...
                self.hidden = hidden;
                //... and putting back the correct alpha value
                self.alpha = origAlpha;
                //End completion block
            }];
        }
    }
    
    @end
    • Ver Abhi la respuesta para la nueva API que hace que esto sea mucho más simple, no hay necesidad de tocar los valores alfa.
  10. 3

    Ya que algunas de estas respuestas son un poco desordenado pensé que podía publicar mi diseño minimalista de esta API. También he añadido la demora y su duración debido a que por qué no.

    En el aplicación tenemos.

    #import "UIView+AnimateHidden.h"
    
    @implementation UIView (AnimateHidden)
    
    - (void)setHiddenAnimated:(BOOL)hide
                        delay:(NSTimeInterval)delay
                     duration:(NSTimeInterval)duration {
        [UIView animateWithDuration:duration
                              delay:delay
                            options:UIViewAnimationOptionAllowAnimatedContent
                         animations:^{
                             if (hide) {
                                 self.alpha = 0;
                             } else {
                                 self.alpha = 0;
                                 self.hidden = NO; //We need this to see the animation 0 -> 1
                                 self.alpha = 1;
                             }
        } completion:^(BOOL finished) {
            self.hidden = hide;
        }];
    }
    
    @end

    En el encabezado el archivo que tenemos.

    #import <UIKit/UIKit.h>
    
    @interface UIView (AnimateHidden)
    
    - (void)setHiddenAnimated:(BOOL)hide
                        delay:(NSTimeInterval)delay
                     duration:(NSTimeInterval)duration;
    
    @end
  11. 0

    Otra versión si desea utilizar una animación más compleja tipos de animaciones o no admitidos por el UIView

    - (void)setHidden:(BOOL)hidden withAnimationDuration:(NSTimeInterval)duration
    {
        CATransition* transition = ({
            CATransition* its = [CATransition animation];
            its.duration = duration;
            its.timingFunction =
                [CAMediaTimingFunction
                 functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
            its.type = kCATransitionPush;
            its.subtype = (hidden ? @"fromBottom" : @"fromTop");
            its
        });
    
        UIView* containerView = self.superview;
        [containerView.layer removeAllAnimations];
        [containerView.layer addAnimation: transition forKey: kCATransition];
    
        self.hidden = hidden;
    
        if (!hidden) {
            [self.superview bringSubviewToFront: self];
        }
    }
  12. 0

    Aquí está el código que he usado para el modelo de una vista de «crecimiento» y de «reducción» en un «ver más…» y «mostrar menos …» haga clic con el botón. Modelado fuera la respuesta de Palyancodr

    Este enfoque me permite crear vistas en el guión gráfico de modo que las restricciones funcionar como se espera en los diferentes dispositivos iOS y no necesito el código personalizado de todas las limitaciones.

    @IBAction func showMoreOrLessAction(_ sender: Any) {
        //if small view showing
        if showMoreLargeView.isHidden {
            showMoreSmallView.isHidden = true
    
            //showMoreLargeView.isHidden = false
            UIView.animate(withDuration: 0.2, delay: 0, options: [], animations: {
                self.showMoreLargeView.alpha = 1 //Here you will get the animation you want
            }, completion: { _ in
                self.showMoreLargeView.isHidden = false //Here you hide it when animation done
            })
        }
        else { //large view showing
            //showMoreSmallView.isHidden = false
            UIView.animate(withDuration: 0.2, delay: 0, options: [], animations: {
                self.showMoreSmallView.alpha = 1 //Here you will get the animation you want
            }, completion: { _ in
                self.showMoreSmallView.isHidden = false //Here you hide it when animation done
            })
    
            showMoreLargeView.isHidden = true
        }
    }

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea