如何执行看起来像矩形棱镜旋转的3D过渡动画?

时间:2013-06-27 14:58:00

标签: ios uiview cakeyframeanimation catransform3d

我正在尝试实现3D过渡动画,它看起来像第一个视图是矩形棱镜的前面,然后矩形棱镜向前旋转,直到它的顶部现在是它的前面。我尝试过使用3D变换,但无法让它工作。现在我有一个使用比例的效果,它看起来很相似,但它没有正确的透视效果:

// Add the new view to the view hierarchy
newView.frame = oldView.superview.bounds;
[oldView.superview addSubview:newView];

// Anchor to the top
newView.layer.anchorPoint = CGPointMake(0.5, 0);
newView.center = CGPointMake(newView.superview.bounds.size.width / 2, 0);

// Anchor to the bottom
oldView.layer.anchorPoint = CGPointMake(0.5, 1);
oldView.center = CGPointMake(newView.superview.bounds.size.width / 2, newView.superview.bounds.size.height);

// Animate the scale transform, not linearly in scale, but linearly in the area covered
NSInteger numberOfSteps = floorf(newView.superview.bounds.size.height);

CAKeyframeAnimation *newTransformAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.y"];
newTransformAnimation.duration = 0.4;
NSMutableArray *newValues = [NSMutableArray array];
for (NSInteger step = 0; step <= numberOfSteps; step++) {
    [newValues addObject:@((CGFloat)step / numberOfSteps)];
}
newTransformAnimation.values = newValues;
[newView.layer addAnimation:newTransformAnimation forKey:@"scale"];

CAKeyframeAnimation *oldTransformAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.y"];
oldTransformAnimation.duration = 0.4;
NSMutableArray *oldValues = [NSMutableArray array];
for (NSInteger step = 0; step <= numberOfSteps; step++) {
    [oldValues addObject:@((CGFloat)(numberOfSteps - step) / numberOfSteps)];
}
oldTransformAnimation.values = oldValues;
oldView.layer.transform = CATransform3DMakeScale(1, 0, 1);
[oldView.layer addAnimation:oldTransformAnimation forKey:@"scale"];

// Animate opacity
newView.alpha = 0.2;

[UIView
 animateWithDuration:0.4
 delay:0
 options:0
 animations:^{
     newView.alpha = 1;
     oldView.alpha = 0.2;
 }
 completion:^(BOOL finished) {
     // Finally remove the old view from the view hierarchy
     [oldView removeFromSuperview];
 }];

如果我理解正确,我应该能够更改newTransformAnimation和oldTransformAnimation,以便它们应用3D效果而不仅仅是Y维度中的比例。有什么想法吗?

更新我知道互联网上有很多样本项目可以做类似的事情。我一直在与他们中的一些人合作,我只是无法绕过它。如果有人理解这种事情并且可以解释它,那将非常感激。

0 个答案:

没有答案