如何动画缩小 uiwebview？答案

【问题标题】：How can I animate shrinking of a uiwebview?如何动画缩小 uiwebview？
【发布时间】：2015-03-11 11:56:53
【问题描述】：

我正在尝试在键盘出现时平滑地缩小 web 视图，但我在动画方面遇到了问题。一旦动画被创建，webview 的内容就会收缩到它的新框架。在动画延迟之后，webview 本身会正确地动画到它的新大小。

下面的屏幕截图显示了它的外观。我已将 Web 视图的滚动视图的背景设置为黄色，并将视图控制器视图的背景设置为绿色。

如何使用 webView 使内容动画流畅？这是我的动画代码。

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

感谢您的帮助

这是我正在使用的 cordova 示例应用的精简版。

* {
    -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>

【问题讨论】：

最好只为scrollView.contentInset属性设置动画，而不是整个帧...我不明白你为什么需要delay（可以是0.0），您可以使用键盘动画的持续时间作为动画的持续时间，当前为0.25（但您可以从键盘出现时发布的通知中读取当前值）。
@holex 我只是使用那些较大的值，因此问题更加明显。我刚刚尝试使用 contentInset 属性。在 7.1 上也有类似的问题。内容立即缩小，留下空白的空白区域，然后滚动视图的 contentInset 随动画一起缩小。在 8.1 上它根本没有动画。
@connor 有一些解决方案。你在使用自动布局吗？故事板还是一切都是程序化的？
@Firo 我相信它是以编程方式完成的。我在cordova中工作，所以我自己没有实现视图控制器。

标签： ios cocoa-touch uiwebview core-animation

【解决方案1】：

如何通过 javascript 调整 document.body.style.height 的大小？

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

编辑：更新了代码，现在所有的 html 都用 <div style="position:relative;"> 包裹，所以绝对定位的元素也被动画化了。

编辑 2： 好的，操作 DOM 结构不是一个好主意——如果您试图调整 webView 的大小，当用户在 webView 中输入焦点并且键盘出现时，输入会失去焦点并且键盘会立即隐藏.所以现在我只需在代码中添加document.body.style.position = 'relative' 并调整正文大小。

我还创建了category on UIWebView，你可以通过cocoapods安装它。

【讨论】：

感谢您的回答。你能分享更多你的代码吗？我正在通过按下按钮调用您的函数，但仍然看到跳跃行为
@connor 添加了一些示例代码。如果此功能对您不起作用，则您尝试调整大小的 html 可能存在问题。也许您需要调整另一个节点的大小，而不是正文。您可以将页面的 html+css 粘贴到某个地方吗？
是的，我就是这么想的。除了在按下按钮时调用你的方法之外，我在 objc 中没有做任何其他事情。
我添加了一些 html/css
好的，更新了代码，现在它应该可以与您的 html 一起使用了。问题出在您的.app div 中的position: absolute; 中。它的位置仅在窗口大小更改时重新计算，并且与 body.height （我正在制作动画）无关。现在我用<div style="position:relative;"> 包装所有html 并为其高度设置动画。所以所有绝对定位元素的位置也是动画的。

【解决方案2】：

这是一个示例代码。

#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

希望对你有帮助。

【讨论】：

嗨史蒂夫。 webViewBottomConstraint 是什么？谢谢

【解决方案3】：

我相信答案可以在 Apple 文档中：

清单 5-1 处理键盘通知

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

基本订阅键盘外观自己做动画。

【讨论】：

问题出在动画上。 webview 的大小可以通过键盘正确设置动画，但其内容会立即跳转到新大小。我可以在有或没有键盘通知的情况下重现。
HO 我明白了！那么我相信你不会喜欢这个答案......根据我的 webviews 经验，你无法从 iOS 网站获得那么多控制权。 html 会对键盘做出反应，如果你想解决这个问题，你必须使用 js（我看到你可能正在使用 js 库来显示东西）来改变元素的位置。我自己做了，但我无权访问代码:(。修复是通过 js 桥。
这不是我的键盘。我做了一个基本的测试用例（在屏幕截图中显示），它会在按钮点击时触发动画。