iOS：同时缩放和3D旋转animation

我制作了一个video，演示了我正在努力实现的animation： 在这里。

注意，video显示了从侧面看到的动作。 相机图标表示用户的POV。 它基本上是通过尺度变换完成的Z轴之间的平移的模拟，沿着X轴发生同时独立的两步3D旋转。

听起来很简单，对吗？ 错误。 这是理想的代码，不起作用：

[UIView animateWithDuration:0.4 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ view.transform = CGAffineTransformMakeScale(1.0, 1.0); } completion:^(BOOL finished) {}]; [UIView animateWithDuration:0.2 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ CATransform3D rotation = CATransform3DIdentity; rotation.m34 = 1.0 / - 1800; rotation = CATransform3DRotate(rotation, - 20 * M_PI / 180.0f, 1, 0, 0); view.layer.transform = rotation; } completion:^(BOOL finished) { [UIView animateWithDuration:0.2 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ view.layer.transform = CATransform3DIdentity; } completion:^(BOOL finished) {}]; }]; 

原来，如果你这样做，3D旋转将被完全忽略。 我尝试了其他一些方法，但都失败了。

一些要求：

• 量表应该最好是CGAffineTransform
• 应该如图所示，特别是在旋转方面

当然，如果解决scheme出现需要其中一些改变，我可以适应。

在此先感谢您的帮助。 如果您需要澄清，请询问。

Answer 1

没有第一个animation被取消，你不能animation相同的属性。 你应该下降到使用核心animation，或者做两个animation或一个关键帧animation。

两个转换animation

通过创build一个缩放animation（如果你愿意，你可以做z-翻译），一个旋转给他们非常具体的关键path，他们不会相互抵消。

 CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; scale.fromValue = @0.75; // Your from value (not obvious from the question) scale.toValue = @1.0; scale.duration = 0.4; scale.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; CAKeyframeAnimation *rotate = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.x"]; rotate.values = @[@0.0, @(- 20 * M_PI / 180.0f), @0.0]; rotate.duration = 0.4; rotate.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut], [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]]; [view.layer addAnimation:scale forKey:@"move forward by scaling"]; [view.layer addAnimation:rotate forKey:@"rotate back and forth"]; view.transform = CGAffineTransformIdentity; // Set end value (animation won't apply the value to the model) 

一个关键帧animation

由于您有三个非常好的关键帧，因此在三个关键帧之间进行animation处理的代码将易于阅读和理解。 如果你想改变缩放的时间和旋转的时间，你可能会失去一些控制。

 CATransform3D firstFrame = CATransform3DMakeScale(0.75, 0.75, 1.0); CATransform3D secondFrame = CATransform3DMakeScale(0.875, 0.875, 1.0); // halfway to 1.0 from 0.75 secondFrame = CATransform3DRotate(secondFrame, -20.0*M_PI/180.0, 1.0, 0.0, 0.0); CATransform3D lastFrame = CATransform3DIdentity; CAKeyframeAnimation *scaleAndRotate = [CAKeyframeAnimation animationWithKeyPath:@"transform"]; scaleAndRotate.values = @[[NSValue valueWithCATransform3D:firstFrame], [NSValue valueWithCATransform3D:secondFrame], [NSValue valueWithCATransform3D:lastFrame] ]; scaleAndRotate.duration = 1.0; scaleAndRotate.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut], [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]]; [view.layer addAnimation:scaleAndRotate forKey:@"entire animation"]; view.transform = CGAffineTransformIdentity; // Set end value (animation won't apply the value to the model) 

透视

在这两种情况下，我通过在animation视图的超级层上设置sublayerTransform来做透视（假设只有一个子视图在那里有一个变换）

 CATransform3D perspective = CATransform3DIdentity; perspective.m34 = 1.0 / - 1800.0; view.superview.layer.sublayerTransform = perspective; 

Answer 2

我find了一个方法，但更像是一个黑客。 请执行下列操作 –

1）创build一个透明背景的视图 – （这个视图将被翻译）2）创build一个子视图1） – （这个视图将旋转）。

现在使用创build两个变换，视图的缩放变换1）和视图的旋转变换2）并同时应用它们。