¿Cómo puedo animar el encogimiento de una vista de rayos uv?

Estoy intentando encoger una vista web sin problemas cuando aparece el keyboard, pero estoy teniendo problemas con la animation. Tan pronto como se crea la animation, el contenido de la vista web se networkinguce a su nuevo marco. Después del retraso de la animation, la vista web se anima correctamente a su nuevo tamaño.

Las capturas de pantalla a continuación muestran cómo se ve. He establecido el background de la vista de desplazamiento de la vista web en amarillo y el background de la vista del controller se ve verde.

1234

¿Cómo puedo animar el contenido sin problemas con el webView? Este es el código que tengo para la animation.

-(void)shrinkWebView { __weak CDVPlugin* weakSelf = self; CGRect frame = weakSelf.webView.frame; frame.size.height -= 400; [UIView animateWithDuration:2.0 delay:3.0 options:0 animations:^{ weakSelf.webView.frame = frame; } completion:nil]; } 

Gracias por la ayuda

Aquí está la versión networkingucida de la aplicación de muestra Cordova con la que estoy trabajando.

 * { -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */ } body { -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */ -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */ background-color:#E4E4E4; background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); background-image:-webkit-gradient( linear, left top, left bottom, color-stop(0, #A7A7A7), color-stop(0.51, #E4E4E4) ); background-attachment:fixed; font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif; font-size:12px; height:100%; margin:0px; padding:0px; text-transform:uppercase; width:100%; } /* Portrait layout (default) */ .app { background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */ position:absolute; /* position in the center of the screen */ left:50%; top:50%; height:50px; /* text area height */ width:225px; /* text area width */ text-align:center; padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */ margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */ /* offset horizontal: half of text area width */ } /* Landscape layout (with min-width) */ @media screen and (min-aspect-ratio: 1/1) and (min-width:400px) { .app { background-position:left center; padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */ margin:-90px 0px 0px -198px; /* offset vertical: half of image height */ /* offset horizontal: half of image width and text area width */ } } h1 { font-size:24px; font-weight:normal; margin:0px; overflow:visible; padding:0px; text-align:center; } .event { border-radius:4px; -webkit-border-radius:4px; color:#FFFFFF; font-size:12px; margin:0px 30px; padding:2px 0px; } .event.listening { background-color:#333333; display:block; } .event.received { background-color:#4B946A; display:none; } @keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.4; } to { opacity: 1.0; } } @-webkit-keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.4; } to { opacity: 1.0; } } .blink { animation:fade 3000ms infinite; -webkit-animation:fade 3000ms infinite; } 
 <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Hello World</title> </head> <body> <div class="app"> <button onclick="Keyboard.hideFormAccessoryBar(false)">Shrink</button> <input type="text" /> <h1>Apache Cordova</h1> <div id="deviceready" class="blink"> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html> 

¿Qué hay de cambiar el tamaño de document.body.style.height a través de javascript?

 - (void)resizeWebView:(UIWebView *)webView toHeight:(CGFloat)height duration:(CGFloat)duration { // We will wrap all webView contents with div and animate it's size // so webView content will resize independently of webView's frame. NSString *javascriptString = [NSString stringWithFormat:@"" "function animate(elem, style, unit, from, to, time) {\n" " var start = new Date().getTime(),\n" " timer = setInterval(function() {\n" " var step = Math.min(1,(new Date().getTime()-start)/time);\n" " elem.style[style] = (from+step*(to-from))+unit;\n" " if( step == 1) clearInterval(timer);\n" " }, 25);\n" " elem.style[style] = from+unit;\n" "}\n" "document.body.style.position = 'relative';\n" "animate(document.body, 'height', 'px', document.body.offsetHeight, %f, %f)", height, duration*1000]; [webView stringByEvaluatingJavaScriptFromString:javascriptString]; BOOL isGrowing = height > webView.frame.size.height; // If webView is growing, change it's frame imediately, so it's content not clipped during animation if (isGrowing) { CGRect frame = webView.frame; frame.size.height = height; webView.frame = frame; } __weak typeof(webView) weakWebView = webView; dispatch_after(dispatch_time(DISPATCH_TIME_NOW, duration * NSEC_PER_SEC), dispatch_get_main_queue(), ^{ __strong typeof(weakWebView) webView = weakWebView; // If webview was shrinking, change it's frame after animation is complete if (!isGrowing) { CGRect frame = webView.frame; frame.size.height = height; webView.frame = frame; } // Remove remove body position constraints [webView stringByEvaluatingJavaScriptFromString:@"" "document.body.style.position = document.body.style.height = null;" ]; }); } - (void)toggleButtonTapped:(id)sender { [self resizeWebView:self.webView toHeight:300 duration:0.4]; } 

Ejemplo

Editar: Código actualizado, ahora todos los html están envueltos con <div style="position:relative;"> , por lo que los elementos absolutamente posicionados también están animados.

Edición 2: Ok, la estructura de DOM de manipulación no era una buena idea: si intentabas cambiar el tamaño de webView cuando el usuario enfoca la input dentro de webView y el keyboard aparece, la input estaba perdiendo el foco y el keyboard se ocultaba inmediatamente. Así que ahora solo agrego document.body.style.position = 'relative' para codificar y cambiar el tamaño del cuerpo.

También creé una categoría en UIWebView , puedes instalarla a través de cocoapods.

Aquí hay un código de ejemplo.

 #import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UIWebView *webView; @property (weak, nonatomic) IBOutlet NSLayoutConstraint *webViewBottomConstraint; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.google.com"]]]; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyBoardShow:) name:UIKeyboardWillShowNotification object:nil]; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyBoardShow:) name:UIKeyboardWillChangeFrameNotification object:nil]; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyBoardHide:) name:UIKeyboardWillHideNotification object:nil]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } #pragma mark - Keyboard Notification -(void)keyBoardShow:(NSNotification*)noti { CGRect keyboardBounds; [[noti.userInfo valueForKey:UIKeyboardFrameEndUserInfoKey] getValue: &keyboardBounds]; NSNumber *duration = [noti.userInfo objectForKey:UIKeyboardAnimationDurationUserInfoKey]; // Need to translate the bounds to account for rotation. keyboardBounds = [self.view convertRect:keyboardBounds toView:nil]; [UIView animateWithDuration:duration.floatValue animations:^{ [self.webViewBottomConstraint setConstant:keyboardBounds.size.height]; [self.view layoutIfNeeded]; }]; } -(void)keyBoardHide:(NSNotification*)noti { CGRect keyboardBounds; [[noti.userInfo valueForKey:UIKeyboardFrameEndUserInfoKey] getValue: &keyboardBounds]; NSNumber *duration = [noti.userInfo objectForKey:UIKeyboardAnimationDurationUserInfoKey]; [UIView animateWithDuration:duration.floatValue animations:^{ [self.webViewBottomConstraint setConstant:0]; [self.view layoutIfNeeded]; }]; } @end 

Espero que te pueda ayudar.

Creo que la respuesta puede estar en la documentation de Apple:

Listado 5-1 Manejo de notifications de keyboard

https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html#//apple_ref/doc/uid/TP40009542-CH5-SW1

Básicamente, suscríbete a la apariencia del keyboard para hacer la animation tú mismo.