web-dev-qa-db-fra.com

Apparence UIView de bas en haut et vice versa (Core Animation)

Mon objectif est de comprendre et de mettre en œuvre la fonctionnalité via Core Animation.
Je pense que ce n'est pas si difficile, mais malheureusement je ne connais pas Swift/Obj C et il est difficile de comprendre des exemples natifs.


Implémentation visuelle

Alors qu'est-ce que je veux faire exactement (quelques étapes comme indiqué sur les images):
1. Source
2. enter image description here
3. enter image description here
4. enter image description here

Et les mêmes étapes pour masquer la vue (vice versa, de haut en bas) jusqu'à ce que:

enter image description here

Aussi, je veux rendre ce UIView plus générique, je veux dire cela UIView sur mon StoryBoard et mettre ainsi des contraintes sur AutoLayout (pour supporter différents écrans de périphérique).

Des idées? Merci!

9
XTL

Vous pouvez utiliser comme cette 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
            })
    }
}
12
Gowtham Sooryaraj

En supposant que la vue d'origine est quelque chose comme:

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

Spectacle:

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

Cacher:

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

enter image description here

9
SushiHangover

Voir mon cas de vue était en face, je fais directement des changements là-dedans, testez si cela fonctionne pour vous,

Afficher la logique

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

Masquer la logique

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

                 }];

Considérez cela comme une idée de base, changez selon vos besoins. Bonne chance.

2
Mukesh

J'ai également rencontré le problème comme https://i.stack.imgur.com/fuVhy.gif commenté https://stackoverflow.com/users/4793465/xtl pour la solution ci-dessus.

J'utilise la vue en bas de la vue Web pour afficher et masquer comme un navigateur mobile safari.

joint l'exemple de code ci-dessous UIView *viewV; UILabel *label;

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

et faire défiler la vue délégué

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

Cela a fonctionné pour moi.

0
Murugan M