It was a coincidence that I came into contact with this software. It was when I made an appointment with my friends to see a movie. I downloaded almost all the App for movie tickets, but when I saw this software, IT made me feel fresh and new. What can I say? The animation effect is what I look forward to. It’s much cooler than other apps.

Then I saw the effect of someone copying this animation on a website, which made my heart swell. I made up my mind to learn how it works.


After some research, I have understood some principles. The push redefines an animation effect to achieve the Guevara effect.


Here is the animation code for push

- (void)cAibDePushAnimation{ UIView*contentView = [self.transitionContext containerView]; [contentView addSubview:[self.bgView]]; UIViewController*toVC = [self.transitionContext viewControllerForKey:UITransitionContextToViewControllerKey]; UIImageView*imageView = [[UIImageView alloc]initWithFrame:self.imageRect]; self.imageView= imageView; imageView.image=self.image; imageView.layer.shadowColor= [UIColor darkGrayColor].CGColor; ImageView. Layer. ShadowOffset = CGSizeMake (0, 0); imageView.layer.shadowOpacity=5; imageView.layer.shadowRadius=5; [contentView addSubview:imageView]; [UIView animateWithDuration: 0.3 animations: ^ {imageView. Transform = CGAffineTransformScale (imageView. The transform, 1.2, 1.2); {} completion: ^ (BOOL finished) [UIView animateWithDuration: 0.5 animations: ^ {imageView. Frame = self. FinalRect;  self.finalRect= imageView.frame; }completion:^(BOOL finished) { imageView.layer.shadowRadius=5;  imageView.layer.shadowOpacity=5; imageView.layer.borderColor= [UIColor whiteColor].CGColor;  imageView.layer.borderWidth=3; Dispatch_after (dispatch_time (DISPATCH_TIME_NOW, (int64_t) (0.1 * NSEC_PER_SEC)), dispatch_get_main_queue (), ^{ imageView.layer.shadowRadius=0; [contentView addSubview:toVC.view]; [selfsetUpCircle];

                [contentView bringSubviewToFront:imageView];

            });

        }];

    }];

}

Copy the code

There’s a method called setUpCircle that draws a circle using bezier curves.

- (void)setUpCircle{
   CGPoint point = CGPointMake(20, 150);
   UIBezierPath *origionPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(point.x+self.imageRect.size.width/2, point.y+self.imageRect.size.height/2, 0, 0)];
   
   CGFloat X = [UIScreen mainScreen].bounds.size.width - point.x;
   CGFloat Y = [UIScreen mainScreen].bounds.size.height - point.y;
   CGFloat radius = sqrt(X*X + Y*Y);

   UIBezierPath *finalPath = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(CGRectMake(point.x+self.imageRect.size.width/2, point.y+self.imageRect.size.height/2, 0, 0), -radius, -radius)];
   
   UIViewController *toVC = [self.transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
   
   CAShapeLayer *layer = [CAShapeLayer layer];
   layer.path = finalPath.CGPath;
   toVC.view.layer.mask = layer;
   
   CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"]; animation.delegate = self; animation.fromValue = (__bridge id _Nullable)(origionPath.CGPath); animation.toValue = (__bridge id _Nullable)(finalPath.CGPath); Animation. Duration = 0.3; [layer addAnimation:animationforKey:@"path"];

}
Copy the code

Then write your own UINavigationController class and import the class that you wrote the animation. Sign the agent (UINavigationControllerDelegate). Customize a method to implement your push effect

- (void)pushViewController:(UIViewController *)viewController;
Copy the code

Finally, implement the following proxy method

- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC  toViewController:(UIViewController *)toVC;Copy the code

So far you can basically complete the effects of the related animation. But one problem I found in the process was that the push of any subsequent controller became animated. However, this is not the effect I want.

So I thought about it a little bit later, and I added isAnimation to the push method. When the outside is set to YES, it will have an animation effect


portal

Github:github.com/cAibDe/GWLZ…

demo

discuss

Recently, a friend of mine asked me a small problem, saying that there was a BUG in the movie poster when the second interface was sliding. I made some improvements here. Recently, a friend of mine asked me a small problem, saying that there was a BUG in the movie poster when the second interface was sliding. I made some improvements here. CaibdeAnimation – (void)cAibDePushAnimation{} This code is the [contentView bringSubviewToFront: imageView];

Inside the OS

Recently a lot of people from a book ran out, I also followed out. We will continue to update…….