侧边菜单的框翻转 3D 动画答案

【问题标题】：box flip 3D animation for side menu侧边菜单的框翻转 3D 动画
【发布时间】：2016-11-29 17:06:27
【问题描述】：

我有滚动视图，在滚动视图中我有 2 个视图作为 MainView，另一个作为 SideMenuView。

我想制作如下动画。

知道需要做什么才能使其正常工作吗？

【问题讨论】：

也许你可以使用像这个动画这样的侧边菜单来代替你的。 github.com/Yalantis/Side-Menu.iOS
@MeetDoshi ：有很多替代品，但我想用这种结构做......

标签： ios objective-c animation menu uiscrollview

【解决方案1】：

下面的伪代码：

- (void)animateSideMenu{
homeView.frame = CGRectMake(sideMenuWidth, 0.0, (self.view.frame.size.width - sideMenuWidth), self.view.frame.size.height);
[UIView animateWithDuration:1.0 delay:0.0
                    options:UIViewAnimationOptionCurveLinear
                 animations:^{
                     sideMenu.frame = CGRectMake(0.0, 0.0, sideMenuWidth, sideMenuHeight);
                     [self flipAnimation];
} completion:^(BOOL finished) {

}];
}

- (void)flipAnimation{
CABasicAnimation *yRotate = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
yRotate.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 0, 1, 0)];
yRotate.toValue = @(M_PI * 1.5);
yRotate.duration = 0.5;
yRotate.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[sideMenu.layer addAnimation:yRotate forKey:@"yRotate"];
}

以下是开发此类动画的步骤：

设置屏幕大小的homeView（红色视图）的框架并在此视图中添加平移手势。
在负 x 轴上设置 sideMenu 视图的框架。
为平移手势识别器创建一个响应函数，在该函数中调用上述animateSideMenu函数。
相应地调整动画参数。

试试这个，如果有什么问题请告诉我。

【讨论】：

@fahim，这对你有帮助吗？？
现在检查...它没有动画
我必须制作 CABasicAnimation *yRotate = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"]; 但这只是旋转侧边菜单，这不是我想要的...
@FahimParkar，这只是一个伪代码，您可以尝试使用不同的参数来探索它的可能性。一旦您开始使用 CATransform3DMakeRotation 的参数，yRotate.fromValue 和 yRotate.toValue 就会打开更多可能性。

【解决方案2】：

我不会使用滚动视图，而是使用 UIPanGestureRecognizer，我会在其中检测您当前的“平移偏移”并计算动画的当前分数和这两个视图的位置（让我们简化它，以便菜单是 view1 和休息视图2）。然后我会简单地在 .Changed 状态下设置一个适当的转换。在 .Ended 状态下，我会查看菜单是否更接近打开或关闭，并创建一个相应设置 .toValue 的动画。您应该使用 CAAnimations 或更好的 - Facebook pop 动画，因为您可以暂停和删除它们，并且视图保持不动而不跳转到它们的初始位置（UIViewAnimate 经常出现这种情况）。

如果您在编写确切代码方面需要帮助，您可以在此处编写，我将编辑我的答案。

【讨论】：

如果你真的想使用滚动视图，你可以使用 scrollViewDidScroll 获得相同的值和分数。

【解决方案3】：

这个菜单有教程，虽然它是在 Swift 中的： https://www.raywenderlich.com/87268/3d-effect-taasky-swift

【讨论】：