如何在iOS中爲ECSlidingViewController構建3D變換？

Question

我想根據https://github.com/ECSlidingViewController/ECSlidingViewController建立一些特殊的動畫。

縮放動畫就像下面的圖片。

只想旋轉通過PI/4的主視圖控制器就像下面的圖像。

我曾試圖EndState變換像下面的代碼，但它不工作。

- (void)topViewAnchorRightEndState:(UIView *)topView anchoredFrame:(CGRect)anchoredFrame { 

CATransform3D toViewRotationPerspectiveTrans = CATransform3DIdentity; 
toViewRotationPerspectiveTrans.m34 = -0.003; 
toViewRotationPerspectiveTrans = CATransform3DRotate(toViewRotationPerspectiveTrans, M_PI_4, 0.0f, -1.0f, 0.0f); 

topView.layer.transform = toViewRotationPerspectiveTrans; 
topView.layer.position = CGPointMake(anchoredFrame.origin.x + ((topView.layer.bounds.size.width * MEZoomAnimationScaleFactor)/2), topView.layer.position.y); 
} 

任何幫助，指針或示例代碼片斷將非常感激！

Answer 1

我設法做到了。從ECSlidingViewController定縮放動畫代碼，不通過註釋MEZoomAnimationScaleFactor在

- (CGRect)topViewAnchoredRightFrame:(ECSlidingViewController *)slidingViewController{ 
    CGRect frame = slidingViewController.view.bounds; 

    frame.origin.x = slidingViewController.anchorRightRevealAmount; 
    frame.size.width = frame.size.width/* * MEZoomAnimationScaleFactor*/; 
    frame.size.height = frame.size.height/* * MEZoomAnimationScaleFactor*/; 
    frame.origin.y = (slidingViewController.view.bounds.size.height - frame.size.height)/2; 

    return frame; 
} 

應用縮放因子。

然後在- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext方法的頂部添加

[topView.layer setAnchorPoint:CGPointMake(0, 0.5)]; 
[topView.layer setZPosition:100]; 

最後做所有的改造方法必須是：

- (void)topViewAnchorRightEndState:(UIView *)topView anchoredFrame:(CGRect)anchoredFrame { 
    CATransform3D transform = CATransform3DIdentity; 
    transform.m34 = -0.003; 
    transform = CATransform3DScale(transform, ARDXZoomAnimationScaleFactor, ARDXZoomAnimationScaleFactor, 1); 
    transform = CATransform3DRotate(transform, -M_PI_4, 0.0, 1.0, 0.0); 
    topView.layer.transform = transform; 
    topView.frame = anchoredFrame; 
    topView.layer.position = CGPointMake(anchoredFrame.origin.x, anchoredFrame.size.height/2+anchoredFrame.origin.y); 
} 

享受你的動畫:)

Answer 2

在ryancrunchi的回答頂，您還需要修改topViewStartingState以將x位置重置爲0而不是容器框架的中間位置。這消除了幹在動畫的起始位置的偏移：

變化

- (void)topViewStartingState:(UIView *)topView containerFrame:(CGRect)containerFrame { 
    topView.layer.transform = CATransform3DIdentity; 
    topView.layer.position = CGPointMake(containerFrame.size.width/2, containerFrame.size.height/2); 
} 

到

- (void)topViewStartingState:(UIView *)topView containerFrame:(CGRect)containerFrame { 
    topView.layer.transform = CATransform3DIdentity; 
    topView.layer.position = CGPointMake(0, containerFrame.size.height/2); 
} 

還存在，在年底會導致生澀左側菜單的動畫錯誤開幕動畫。從動畫的完成一部分，所以它運行在動畫過程中以下行復制：

[self topViewAnchorRightEndState:topView anchoredFrame:[transitionContext finalFrameForViewController:topViewController]]; 

動畫功能會是這個樣子：

... 
if (self.operation == ECSlidingViewControllerOperationAnchorRight) { 
     [containerView insertSubview:underLeftViewController.view belowSubview:topView]; 
     [topView.layer setAnchorPoint:CGPointMake(0, 0.5)]; 

     [topView.layer setZPosition:100]; 

     [self topViewStartingState:topView containerFrame:containerView.bounds]; 
     [self underLeftViewStartingState:underLeftViewController.view containerFrame:containerView.bounds]; 

     NSTimeInterval duration = [self transitionDuration:transitionContext]; 
     [UIView animateWithDuration:duration animations:^{ 
      [self underLeftViewEndState:underLeftViewController.view]; 
      underLeftViewController.view.frame = [transitionContext finalFrameForViewController:underLeftViewController]; 
      [self topViewAnchorRightEndState:topView anchoredFrame:[transitionContext finalFrameForViewController:topViewController]]; 
     } completion:^(BOOL finished) { 
      if ([transitionContext transitionWasCancelled]) { 
       underLeftViewController.view.frame = [transitionContext finalFrameForViewController:underLeftViewController]; 
       underLeftViewController.view.alpha = 1; 
       [self topViewStartingState:topView containerFrame:containerView.bounds]; 
      } 

      [transitionContext completeTransition:finished]; 
     }]; 
    } 
...