A few days ago, when I was bored, I downloaded the QMUI official Demo to show the animation of the home page. I felt very interesting, so I looked at the source code and found that the principle of this implementation is very simple. Interested students can download and have a look at the source code (Github.com/Tencent/QMU…), I do a simple analysis here, the effect of animation is like thisSystem in showing the figure has a short delay, delay time associated with equipment, the system shows we read Launscreen elements added in the current window above, is a process of look not to come out with such human eyes, when the display tabbar, to do a basic animation can achieve this effect, look at the code, first set Buy tabbar

- (void)didInitWindow { //tabbar self.window.rootViewController = [self generateWindowRootViewController]; [self.window makeKeyAndVisible]; // Animation [self startLaunchingAnimation]; }Copy the code

Read the elements on the Launchscreen and animate them again

- (void)startLaunchingAnimation { UIWindow *window = self.window; UIView *launchScreenView = [[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil].firstObject; launchScreenView.frame = window.bounds; [window addSubview:launchScreenView]; UIImageView *backgroundImageView = launchScreenView.subviews[0]; backgroundImageView.clipsToBounds = YES; UIImageView *logoImageView = launchScreenView.subviews[1]; UILabel *copyrightLabel = launchScreenView.subviews.lastObject; UIView *maskView = [[UIView alloc] initWithFrame:launchScreenView.bounds]; maskView.backgroundColor = UIColorWhite; [launchScreenView insertSubview:maskView belowSubview:backgroundImageView]; [launchScreenView layoutIfNeeded]; [launchScreenView.constraints enumerateObjectsUsingBlock:^(__kindof NSLayoutConstraint * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) { if ([obj.identifier isEqualToString:@"bottomAlign"]) { obj.active = NO; [NSLayoutConstraint constraintWithItem:backgroundImageView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:launchScreenView attribute:NSLayoutAttributeTop multiplier:1 constant:NavigationContentTop].active = YES; *stop =  YES; } }]; [UIView animateWithDuration: 15 delay: 0.9 options: QMUIViewAnimationOptionsCurveOut animations: ^ {[launchScreenView Logoimageview.alpha = 0.0; copyrightLabel.alpha = 0;} completion:nil]; logoImageView.alpha = 0; [UIView animateWithDuration: delay 1.2:0.9 options: UIViewAnimationOptionCurveEaseOut animations: ^ {maskView. Alpha = 0; backgroundImageView.alpha = 0; } completion:^(BOOL finished) { [launchScreenView removeFromSuperview]; }]; }Copy the code

A couple of points

1,QMUI changes the LaunchScreen to xiB for display reading, you can do that, but it’s the same for storyboards themselves, but the way they read is different. Storyboards read like this

    NSString *UILaunchStoryboardName = [[[NSBundle mainBundle] infoDictionary] valueForKey:@"UILaunchStoryboardName"];
    UIViewController *LaunchScreenSb = [[UIStoryboard storyboardWithName:UILaunchStoryboardName bundle:nil] instantiateInitialViewController];
Copy the code

Then change the launchScreenView from the above method to launchScreensb. view

2, notice this code

[launchScreenView.constraints enumerateObjectsUsingBlock:^(__kindof NSLayoutConstraint * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) { if ([obj.identifier isEqualToString:@"bottomAlign"]) { obj.active = NO; [NSLayoutConstraint constraintWithItem:backgroundImageView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:launchScreenView attribute:NSLayoutAttributeTop multiplier:1 constant:NavigationContentTop].active = YES; *stop =  YES; } }];Copy the code

For those of you who aren’t familiar with native constraints, it means we’re going to animate that view that we’ve added, and we’re going to pan it up, but if you don’t want to do that you can change it to something like this, and it’s going to have the same effect

[UIView animateWithDuration: 15 delay: 0.9 options: QMUIViewAnimationOptionsCurveOut animations: ^ {launchScreenView. Frame = CGRectMake(0, -SCREEN_HEIGHT + NavigationContentTop, SCREEN_WIDTH, SCREEN_HEIGHT); } completion:nil];Copy the code

And then the way to clean up the entire animation is as follows

- (void)startLaunchingAnimation { UIView *launchScreenView = [[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil].firstObject; launchScreenView.frame = self.window.bounds; [self.window addSubview:launchScreenView]; UIImageView *backgroundImageView = launchScreenView.subviews[0]; backgroundImageView.clipsToBounds = YES; UIImageView *logoImageView = launchScreenView.subviews[1]; UILabel *copyrightLabel = launchScreenView.subviews.lastObject; UIView *maskView = [[UIView alloc] initWithFrame:launchScreenView.bounds]; maskView.backgroundColor = UIColorWhite; [launchScreenView insertSubview:maskView belowSubview:backgroundImageView]; [UIView animateWithDuration: 15 delay: 0.9 options: QMUIViewAnimationOptionsCurveOut animations: ^ {launchScreenView. Frame = CGRectMake(0, -SCREEN_HEIGHT + NavigationContentTop, SCREEN_WIDTH, Logoimageview.alpha = 0.0;} completion:nil]; [UIView animateWithDuration: delay 1.2:0.9 options: UIViewAnimationOptionCurveEaseOut animations: ^ {maskView. Alpha = 0; backgroundImageView.alpha = 0; } completion:^(BOOL finished) { [launchScreenView removeFromSuperview]; }]; }Copy the code

All of the macro definitions are from internal QMUI definitions

Thanks for watching

I have not recorded the dribs and drabs of my development career before, and will continue to record the dribs and drabs of my development in the future