UIView 从下到上，反之亦然（核心动画）

Question

我的目标是通过 Core Animation 理解和实现功能。
我认为这并不难，但不幸的是我不知道 swift/Obj C 并且很难理解原生示例。

---

可视化实现

那么我到底想要做什么（如图所示的几个步骤）：
1.
2.
3.
4.

以及隐藏视图的相同步骤（反之亦然，从上到下）直到：

另外，我想让这个 UIView 更通用，我的意思是把这个 UIView 放在我的 StoryBoard 上，并对 AutoLayout 施加约束（以支持不同的设备屏幕） .

有什么想法吗？谢谢！

Answer 1

你可以像这个扩展一样使用

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
            })
    }
}

Answer 2

假设原始视图类似于：

var view = new UIView(new CGRect(View.Frame.Left, View.Frame.Height - 200, View.Frame.Right, 0));
view.BackgroundColor = UIColor.Clear;

显示：

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
        }                                  
);

隐藏：

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;
        }
);

Answer 3

看到我的观点相反，我直接在做改变，测试它是否适合你，

显示逻辑

//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];

隐藏逻辑

[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;
                     }

                 }];

将此视为基本想法，根据您的要求进行更改祝你好运。

Answer 4

我也遇到过https://i.stack.imgur.com/fuVhy.gif评论https://stackoverflow.com/users/4793465/xtl上述解决方案的问题。

我正在使用 web-view 底部的视图来显示和隐藏，就像 safari 移动浏览器一样。

附上 UIView *viewV; UILabel *label;下面的示例代码

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

和滚动视图委托

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

这对我有用。