#前言
我接触到这个软件是一个很巧合的机会,那是我和朋友约见去看电影,我把所有的电影票App几乎都下载了一遍,但是放我看到格瓦拉这个软件的时候,让我有耳目一新的感觉。怎么说呢,动画效果是让我向往的那种,比别的App炫酷多了。
后来我就在某网站上看到了别人有仿写这个动画的效果,这让我心潮澎湃。我就下定决心去学习一下,这到底是怎么实现的。
#正题
经过了一番研究,明白了一些原理。就是在push的时候重新定义了一个动画效果,从而达到了实现格瓦拉效果的目的。
下面就是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.3animations:^{ imageView.transform=CGAffineTransformScale(imageView.transform,1.2,1.2); }completion:^(BOOL finished) { [UIView animateWithDuration:0.5animations:^{ 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]; [self setUpCircle]; [contentView bringSubviewToFront:imageView]; }); }]; }]; }
在这之中用了一个setUpCircle这么一个方法,其中就是用贝塞尔曲线画了一个圆。
- (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:animation forKey:@"path"]; }
然后自己写一个UINavigationController的类,然后导入你写的这个动画的类。
签代理(UINavigationControllerDelegate)。
自定义一个方法,实现你的push效果
- (void)pushViewController:(UIViewController *)viewController;
最后去实现下面这个代理方法
- (id)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC;
到上面为止 就已经基本可以完成 相关动画的效果了。但是在过程中我发现了一个问题,那么就是后面的任何一个控制器的push 都变得带有了动画效果。然而这并不是我想要的效果。
所以我在之后想了一下,我就把push的方法中带入了一个参数isAnimation,当外面设置为YES的时候才会带有动画效果
传送门
github:github.com/cAibDe/GWLZ…
演示
讨论
最近有个朋友给我提了一个小问题,说是第二个界面滑动的时候,电影海报会有个BUG,这里我做了改进。 最近有个朋友给我提了一个小问题,说是第二个界面滑动的时候,电影海报会有个BUG,这里我做了改进。
我们可以再CaibdeAnimation这个类中的push代码模块中- (void)cAibDePushAnimation{}这个方法里面的一个代码注释掉就可以解决了,这个代码就是[contentView bringSubviewToFront:imageView];
内心OS
最近好多的人都从某书跑了出来,我也就跟了出来。以后会持续更新.......