作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我试图在键盘出现时平滑地缩小 WebView ,但我在处理动画时遇到了问题。一旦创建了动画,webview 的内容就会缩小到它的新框架。在动画延迟之后,webview 本身会正确地动画到它的新大小。
下面的屏幕截图显示了它的外观。我已将 Web View 的 ScrollView 的背景设置为黄色,将 View Controller View 的背景设置为绿色。
如何让内容在 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>
最佳答案
如何通过 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 安装它。
关于ios - 如何为 uiwebview 的缩小设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27923648/
我是一名优秀的程序员,十分优秀!