CABasicAnimation CALayer 转换的可见性(重叠)问题
我的对象上有两个 UIImageView,我试图将它们设置为像书本一样翻页的动画。我使用了一些内置动画一段时间(UIViewAnimationTransitionFlipFromLeft/Right
),并决定我可以做得更好。我在这里找到了我想要的一半动画的一个很好的例子: http:// /fiftysixtysoftware.com/blog/2009/uiview-pageopen-sample-project/
我能够从那里推断出让我的动画工作......但我遇到的问题是我的动画图像(右图)始终显示在左图下方。
这是 init 中的代码:
// set up some rects for use later
landscapeLeftRect = CGRectMake(0, 12, 512, 725);
landscapeRightRect = CGRectMake(512, 12, 512, 725);
// all our images
imageLeft = [[UIImageView alloc] initWithFrame:portraitRect];
imageRight = [[UIImageView alloc] initWithFrame:landscapeRightRect];
...并执行实际动画(请注意,这是动画的后半部分,与我的 imageLeft 视图“重叠”的一半):
// set the image to be nextLeft
//[imageRight setImage:image.nextLeft];
[self.view sendSubviewToBack:imageLeft];
[self.view bringSubviewToFront:imageRight];
//[imageRight.layer setZPosition:1.0f];
[imageRight setFrame:landscapeLeftRect];
// remove any previous animations
[imageRight.layer removeAllAnimations];
// set up the anchorPoint and center
if (imageRight.layer.anchorPoint.x != 1.0f) {
imageRight.layer.anchorPoint = CGPointMake(1.0f, 0.5f);
imageRight.center = CGPointMake(imageRight.center.x + imageRight.bounds.size.width/2.0f, imageRight.center.y);
}
// create an animation to hold the first half of the page turning forward
CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
transformAnimation.removedOnCompletion = YES;
transformAnimation.duration = 0.40f;
transformAnimation.delegate = self;
transformAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
// start the animation from the current state
CATransform3D endTransform = CATransform3DMakeRotation(3.141f/2.0f,
0.0f,
-1.0f,
0.0f);
// these values control the 3D projection outlook
endTransform.m34 = -0.001f;
endTransform.m14 = 0.0015f;
transformAnimation.fromValue = [NSValue valueWithCATransform3D:endTransform];
// we should end up at the beginning...
transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
[imageRight.layer addAnimation:transformAnimation forKey:nil];
我尝试过的事情:(您可以在上面的代码)
- bringSubviewToFront/sendSubviewToBack
- 在图层上设置 Z 索引
提前感谢您的任何建议或智慧。同样,问题在于我的 imageLeft 始终显示在动画之上。
I have two UIImageViews on my object, and I'm trying to animate them to page like a book. I used some of the built in animations for a while (UIViewAnimationTransitionFlipFromLeft/Right
), and decided I could do better. I found a nice example for half of the animation I wanted here: http://fiftysixtysoftware.com/blog/2009/uiview-pageopen-sample-project/
I was able to extrapolate from there to get my animation working... but the problem I'm having is that my animating image (the right image) always shows up beneath the left image.
Here's code in the init:
// set up some rects for use later
landscapeLeftRect = CGRectMake(0, 12, 512, 725);
landscapeRightRect = CGRectMake(512, 12, 512, 725);
// all our images
imageLeft = [[UIImageView alloc] initWithFrame:portraitRect];
imageRight = [[UIImageView alloc] initWithFrame:landscapeRightRect];
...and performing the actual animation (note that this is the second half of the animation, the half that "overlaps" with my imageLeft view):
// set the image to be nextLeft
//[imageRight setImage:image.nextLeft];
[self.view sendSubviewToBack:imageLeft];
[self.view bringSubviewToFront:imageRight];
//[imageRight.layer setZPosition:1.0f];
[imageRight setFrame:landscapeLeftRect];
// remove any previous animations
[imageRight.layer removeAllAnimations];
// set up the anchorPoint and center
if (imageRight.layer.anchorPoint.x != 1.0f) {
imageRight.layer.anchorPoint = CGPointMake(1.0f, 0.5f);
imageRight.center = CGPointMake(imageRight.center.x + imageRight.bounds.size.width/2.0f, imageRight.center.y);
}
// create an animation to hold the first half of the page turning forward
CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
transformAnimation.removedOnCompletion = YES;
transformAnimation.duration = 0.40f;
transformAnimation.delegate = self;
transformAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
// start the animation from the current state
CATransform3D endTransform = CATransform3DMakeRotation(3.141f/2.0f,
0.0f,
-1.0f,
0.0f);
// these values control the 3D projection outlook
endTransform.m34 = -0.001f;
endTransform.m14 = 0.0015f;
transformAnimation.fromValue = [NSValue valueWithCATransform3D:endTransform];
// we should end up at the beginning...
transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
[imageRight.layer addAnimation:transformAnimation forKey:nil];
Things I've tried: (you can see both in the code above)
- bringSubviewToFront/sendSubviewToBack
- setting a Z index on the layer
Thanks in advance for any advice or wisdom. Again, the problem is with my imageLeft always displaying on top of the animation.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
我遇到了同样的问题,只是发现可以通过设置视图的 zPosition 来修复它。
我用过这样的东西:
I faced the same problem and just found that you can fix it by setting the zPosition of the view.
I used something like this:
我发现一旦我将动画视图带到前面,一切就都正常了。我正在制作翻页动画,并且在以逆时针方式向后翻页显示页面叠加时遇到了麻烦。我的问题是我看不到动画,因为它位于它应该覆盖的页面后面。
I found that once I brought the animated view to the front, everything worked. I am working on a page turn animation and was having trouble when paging backwards showing the page overlay in a counterclockwise fashion. My trouble was that I just couldn't see the animation since it was behind the page it was supposed to overlay.
将页面视图添加到超级视图时,您确定正确地迭代了数组吗?当然,你会想先把最后一页放下,这样你的第一页就在上面……我不是在侮辱你的智慧——分层可能很棘手。
Are you sure that you are iterating through the array correctly when adding the page view to the superview? Naturally, you would want to put the last page down first so that your first page is on top... I'm not insulting your intelligence - layers can be tricky.
我遇到了这个精确的问题,我发现避免它的唯一方法是将背景的 zPosition 设置为一个大的负数。如果能确切地知道原因就好了……
I came across this precise problem and I found the only way to avoid it is by setting the zPosition of tyhe background to a big negative number. It would be nice to know exactly why…