ios UIView 外观自下而上，反之亦然（核心动画）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42326892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
UIView appereance from bottom to top and vice versa(Core Animation)
提问by XTL
My goal is to understand and implement feature via Core Animation.
I think it's not so hard,but unfortunately i don't know swift/Obj C and it's hard to understand native examples.
我的目标是通过 Core Animation 理解和实现功能。
我认为这并不难，但不幸的是我不知道 swift/Obj C 并且很难理解原生示例。
Visual implementation
视觉实现
So what exactly i want to do(few steps as shown on images):
1. 
2. 
3. 
4. 
那么我到底想要做什么（如图所示的几个步骤）：
1.
2.
3.
4.
And the same steps to hide view(vice versa,from top to bottom) until this :
以及隐藏视图的相同步骤（反之亦然，从上到下）直到：
Also,i want to make this UIViewmore generic,i mean to put this UIViewon my StoryBoard and put so constraints on AutoLayout(to support different device screens).
另外，我想让这个UIView更通用，我的意思是把这个UIView放在我的 StoryBoard 上，并在 AutoLayout 上设置约束（以支持不同的设备屏幕）。
Any ideas? Thanks!
有任何想法吗？谢谢！
回答by Gowtham Sooryaraj
You can use like this Extension
你可以像这个扩展一样使用
extension UIView{
func animShow(){
UIView.animate(withDuration: 2, delay: 0, options: [.curveEaseIn],
animations: {
self.center.y -= self.bounds.height
self.layoutIfNeeded()
}, completion: nil)
self.isHidden = false
}
func animHide(){
UIView.animate(withDuration: 2, delay: 0, options: [.curveLinear],
animations: {
self.center.y += self.bounds.height
self.layoutIfNeeded()
}, completion: {(_ completed: Bool) -> Void in
self.isHidden = true
})
}
}
回答by SushiHangover
Assuming the original view is something like:
假设原始视图类似于：
var view = new UIView(new CGRect(View.Frame.Left, View.Frame.Height - 200, View.Frame.Right, 0));
view.BackgroundColor = UIColor.Clear;
Show:
展示：
UIView.Animate(2.0, 0.0,
UIViewAnimationOptions.CurveLinear,
() =>
{
view.BackgroundColor = UIColor.Blue;
var height = 100;
view.Frame = new CGRect(View.Frame.Left, view.Frame.Y - height , view.Superview.Frame.Right, height);
},
() =>
{
// anim done
}
);
Hide:
隐藏：
UIView.Animate(2.0, 0.0,
UIViewAnimationOptions.CurveLinear,
() =>
{
view.BackgroundColor = UIColor.Clear;
var height = 100;
view.Frame = new CGRect(View.Frame.Left, view.Frame.Y + height, view.Superview.Frame.Right, 0);
},
() =>
{
view.Hidden = true;
}
);
回答by Mukesh
See my view case was opposite i am directly doing changes in that , test if it is working for you,
看到我的观点案例相反，我正在直接进行更改，测试它是否适合您，
Show Logic
显示逻辑
//Add your view on storyBoard / programmatically bellow tab bar
[self.view bringSubviewToFront:self.miniMenuView];
CGRect rectformedicationTableViewcell;// = CGRectZero;
rectformedicationTableViewcell = CGRectMake(0.0f, self.view.frame.size.hight, self.view.frame.size.width, 150.0f);
self.miniMenuView.frame = rectformedicationTableViewcell;
if([self.miniMenuView superview]) {
self.miniMenuView.hidden = YES;
}
self.miniMenuView.hidden = NO;
[UIView animateWithDuration:0.3f
delay:0.0f
options:UIViewAnimationOptionBeginFromCurrentState
animations:^{
[self.miniMenuView setFrame:CGRectMake(0.0f, self.view.frame.size.hight - 150.0f, self.view.frame.size.width, 150.0f)];
}
completion:nil];
Hide Logic
隐藏逻辑
[self.view sendSubviewToBack:self.miniMenuView];
[UIView animateWithDuration:0.3f
delay:0.0f
options:UIViewAnimationOptionBeginFromCurrentState
animations:^{
[self.miniMenuView setFrame:CGRectMake(0.0f, self.view.frame.size.hight, self.view.frame.size.width, 150.0f)];
}
completion:^(BOOL completed){
if([self.miniMenuView superview]) {
self.miniMenuView.hidden = YES;
}
}];
Consider this as basic idea do changes as per your requirements Best luck.
将此视为基本想法，请根据您的要求进行更改 祝您好运。
回答by Murugan M
I have also faced the issue like https://i.stack.imgur.com/fuVhy.gifcommented https://stackoverflow.com/users/4793465/xtlfor the above solution.
我也遇到过类似https://i.stack.imgur.com/fuVhy.gif评论https://stackoverflow.com/users/4793465/xtl的问题，用于上述解决方案。
Am using the view at the bottom of web-view to show and hide like safari mobile browser.
我正在使用 web 视图底部的视图来显示和隐藏像 safari 移动浏览器一样。
attached the sample code below UIView *viewV;
UILabel *label;
附上下面的示例代码 UIView *viewV;
UILabel *label;
and viewdidload
并查看加载
-(void)viewDidLoad {
[super viewDidLoad];
WKWebViewConfiguration *theConfiguration = [[WKWebViewConfiguration alloc] init];
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:theConfiguration];
webView.navigationDelegate = self;
webView.UIDelegate = self;
webView.scrollView.delegate = self;
NSURL *nsurl=[NSURL URLWithString:@"https://www.google.com/"];
NSURLRequest *nsrequest=[NSURLRequest requestWithURL:nsurl];
[webView loadRequest:nsrequest];
[self.view addSubview:webView];
viewV = [[UIView alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height - 50, self.view.frame.size.width, 50)];
viewV.backgroundColor = [UIColor blueColor];
[webView addSubview:viewV];}
and scroll view delegate
和滚动视图委托
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGPoint velocity = [[scrollView panGestureRecognizer] velocityInView:scrollView.superview];
if (velocity.y == 0) {
return;
}
if (velocity.y < -1) {
// Scrolling left
NSLog(@"Top");
if (viewV.frame.origin.y != self.view.frame.size.height - 50) {// if already hidden, don't need to hide again
return;
}
[UIView animateWithDuration:0.2 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
viewV.backgroundColor = [UIColor clearColor];
viewV.frame = CGRectMake(0, viewV.frame.origin.y + 50, self.view.frame.size.width, 0);
} completion:^(BOOL finished) {
}];
} else if (velocity.y > 1) {
// Scrolling Right
NSLog(@"Bottom");
if (viewV.frame.origin.y != self.view.frame.size.height) { // if already shown, no need to do show again
return;
}
[UIView animateWithDuration:0.2 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
viewV.backgroundColor = [UIColor blueColor];
viewV.frame = CGRectMake(0, viewV.frame.origin.y - 50, self.view.frame.size.width, 50);
} completion:^(BOOL finished) {
}];
}}
This worked for me.
这对我有用。
