侧面菜单的盒子翻转3D动画

Question

我有scrollview和内部scrollview我有2个视图作为MainView,另一个作为SideMenuView.

我想制作下面的动画.

知道需要做些什么来实现这个目标吗？

Answer 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"];
}

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

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

尝试一下，如果有任何问题请告诉我。