如何在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]; 
     }]; 
    } 
...