如何在iPhone/iPad上实现Photo.app的倾斜交互效果？

核心原理拆解 #

这个倾斜效果并非单一CATransform3DMakeRotation能实现，它是旋转+缩放+锚点动态调整的组合动画，核心是模拟真实翻页的物理特性：

• 初始阶段：以图片单侧边缘为旋转轴，配合缩放让内容逐步充满视野
• 切换阶段：旋转轴从一侧平滑过渡到另一侧，完成视觉上的“翻页”衔接

具体实现步骤 #

1. 动态调整图层锚点 #

CATransform3DMakeRotation默认以图层中心为旋转轴，要实现侧边旋转需修改anchorPoint：

• 初始状态（比如从左侧翻）：设置layer.anchorPoint = CGPointMake(0, 0.5)，将旋转轴落在左边缘垂直中点
• 旋转到特定角度（如45°左右）时，平滑过渡anchorPoint到另一侧（如CGPointMake(1, 0.5)），同时同步调整图层位置以避免偏移（锚点改变会影响position计算）

2. 组合旋转与缩放动画 #

用CAAnimationGroup绑定旋转、缩放动画同步执行：

// 创建Y轴旋转动画
CABasicAnimation *rotationAnim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
rotationAnim.fromValue = @0;
rotationAnim.toValue = @(M_PI);

// 创建缩放动画
CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnim.fromValue = @1.0;
scaleAnim.toValue = @1.2;

// 组合动画配置
CAAnimationGroup *groupAnim = [CAAnimationGroup animation];
groupAnim.animations = @[rotationAnim, scaleAnim];
groupAnim.duration = 0.6;
groupAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[imageView.layer addAnimation:groupAnim forKey:@"flipAndScale"];

3. 处理锚点切换的平滑过渡 #

动画执行到中间阶段时，通过CATransaction禁用隐式动画，手动调整锚点与位置：

[CATransaction begin];
[CATransaction setDisableActions:YES];
// 切换锚点到右侧
imageView.layer.anchorPoint = CGPointMake(1, 0.5);
// 调整position补偿锚点偏移
imageView.layer.position = CGPointMake(imageView.frame.origin.x + imageView.frame.size.width, imageView.frame.origin.y + imageView.frame.size.height/2);
[CATransaction commit];

4. 模拟物理惯性（可选） #

若要贴近原生手感，可加入UIDynamicAnimator物理模拟，让旋转、缩放速度随手势变化，还原真实交互的惯性效果。

内容的提问来源于stack exchange，提问作者echo