格瓦拉的動畫效果

#前言 我接觸到這個軟件是一個很巧合的機會，那是我和朋友約見去看電影，我把全部的電影票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<UIViewControllerAnimatedTransitioning>)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

最近好多的人都從某書跑了出來，我也就跟了出來。之後會持續更新.......