翻转,成长和翻译动画 [英] Flip, Grow, and Translate Animation
问题描述
查看MLB At Bat应用程式的这部影片。基本上,我只想用 UIModalPresentationFormSheet
风格呈现一个 modalViewController
,并从另一个视图增长,然后翻转。就像当你在MLB应用程序的记分板上点击一个游戏。任何人都知道我该如何完成这项工作?
Look at this video of the MLB At Bat app. Basically, I just want to present a modalViewController
with the UIModalPresentationFormSheet
style and have it grow from another view then flip. Like when you tap on a game in the scoreboard on the MLB app. Anyone know how I can accomplish this?
感谢
编辑:作为MLB应用程序。我使用 AQGridView
,并希望在点击网格视图中的单元格时发生动画。
My main view is pretty much the same setup as the MLB app. I'm using AQGridView
and want the animation to occur when a cell in the grid view is tapped.
编辑2:我也可以打开 UIViewController
概念,只需使用一个简单的 UIView
,然后复制样式 $ UIModalPresentationFormSheet
手动。
EDIT 2: I'd also be open to ditching the UIViewController
concept and just using a plain UIView
, then replicate the style of UIModalPresentationFormSheet
manually if that's easier.
编辑3:好了,忘记使用 UIViewController
这样做,因为我没有得到任何回应,我会认为这是不可能的。我的新问题是如何使用 UIView
'在发布的视频中复制动画?所以基本上,初始视图需要同时增长,移动和翻转所有。
EDIT 3: Okay, forget using a UIViewController
to do this, since I haven't gotten any responses, I'll assume it isn't possible. My new question is just how do I replicate the animation in the posted video using just UIView
's? So basically, the initial view needs to grow, move, and flip all at the same time.
编辑4:我认为我有实际的动画想出来,现在我只有问题是计算坐标到 CATransform3DTranslate
。我的视图需要动画几乎完全像在视频中。它需要从另一个视图开始,并动画到屏幕的中心。下面是我如何计算在中心弹出的视图的坐标:
EDIT 4: I think I have the actual animation figured out, now my only problem is calculating coordinates to feed into CATransform3DTranslate
. My view needs to animate pretty much exactly like in the video. It needs to start over another view and animate to the center of the screen. Here's how I'm trying to calculate the coordinates for the view that pops up in the center:
CGPoint detailInitialPoint = [gridView convertPoint:view.frame.origin toView:detailView.frame.origin];
CGPoint detailFinalPoint = detailView.frame.origin;
gridView
视图,用于保存较小的网格项。 查看
是我们正在动画的特定网格项。 detailView
是在屏幕中间出现的视图。
gridView
is the container view of my main view that holds the smaller grid items. view
is the specific grid item that we are animating from. And detailView
is the view that comes up in the middle of the screen.
推荐答案
好吧,我想出来了。这是我做的:
OK, I figured it out. Here's what I did:
CGFloat duration = 0.8;
/*
//Detail View Animations
*/
CATransform3D initialDetailScale = CATransform3DMakeScale(view.frame.size.width/vc.view.frame.size.width, view.frame.size.height/vc.view.frame.size.height, 1.0);
CATransform3D initialDetailTransform = CATransform3DRotate(initialDetailScale, -M_PI, 0.0, -1.0, 0.0);
CATransform3D finalDetailScale = CATransform3DMakeScale(1.0, 1.0, 1.0);
CATransform3D finalDetailTransform = CATransform3DRotate(finalDetailScale, 0.0, 0.0, -1.0, 0.0);
NSMutableArray *detailAnimations = [NSMutableArray array];
CABasicAnimation *detailTransform = [CABasicAnimation animationWithKeyPath:@"transform"];
detailTransform.fromValue = [NSValue valueWithCATransform3D:initialDetailTransform];
detailTransform.toValue = [NSValue valueWithCATransform3D:finalDetailTransform];
detailTransform.duration = duration;
[detailAnimations addObject:detailTransform];
CABasicAnimation *detailFadeIn = [CABasicAnimation animationWithKeyPath:@"opacity"];
detailFadeIn.fromValue = [NSNumber numberWithFloat:1.0];
detailFadeIn.toValue = [NSNumber numberWithFloat:1.0];
detailFadeIn.duration = duration/2;
detailFadeIn.beginTime = duration/2;
[detailAnimations addObject:detailFadeIn];
CABasicAnimation *detailMove = [CABasicAnimation animationWithKeyPath:@"position"];
detailMove.fromValue = [NSValue valueWithCGPoint:vc.view.layer.position];
detailMove.toValue = [NSValue valueWithCGPoint:self.view.layer.position];
detailMove.duration = duration;
[detailAnimations addObject:detailMove];
CAAnimationGroup *detailGroup = [CAAnimationGroup animation];
[detailGroup setAnimations:detailAnimations];
[detailGroup setDuration:duration];
detailGroup.removedOnCompletion = NO;
detailGroup.fillMode = kCAFillModeForwards;
detailGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[vc.view.layer addAnimation:detailGroup forKey:@"anim"];
/*
//Grid Item View Animations
*/
CATransform3D initialGridScale = CATransform3DMakeScale(1.0, 1.0, 1.0);
CATransform3D initialGridTransform = CATransform3DRotate(initialGridScale, 0.0, 0.0, 1.0, 0.0);
CATransform3D finalGridScale = CATransform3DMakeScale(vc.view.frame.size.width/view.frame.size.width, vc.view.frame.size.height/view.frame.size.height, 1.0);
CATransform3D finalGridTransform = CATransform3DRotate(finalGridScale, M_PI, 0.0, 1.0, 0.0);
NSMutableArray *gridAnimations = [NSMutableArray array];
CABasicAnimation *gridTransform = [CABasicAnimation animationWithKeyPath:@"transform"];
gridTransform.fromValue = [NSValue valueWithCATransform3D:initialGridTransform];
gridTransform.toValue = [NSValue valueWithCATransform3D:finalGridTransform];
gridTransform.duration = duration;
[gridAnimations addObject:gridTransform];
CABasicAnimation *gridFadeOut = [CABasicAnimation animationWithKeyPath:@"opacity"];
gridFadeOut.fromValue = [NSNumber numberWithFloat:0.0];
gridFadeOut.toValue = [NSNumber numberWithFloat:0.0];
gridFadeOut.duration = duration/2;
gridFadeOut.beginTime = duration/2;
[gridAnimations addObject:gridFadeOut];
CABasicAnimation *gridMove = [CABasicAnimation animationWithKeyPath:@"position"];
gridMove.fromValue = [NSValue valueWithCGPoint:view.layer.position];
gridMove.toValue = [NSValue valueWithCGPoint:[self.view.layer convertPoint:self.view.layer.position toLayer:gridView.layer]];
gridMove.duration = duration;
[gridAnimations addObject:gridMove];
CAAnimationGroup *gridGroup = [CAAnimationGroup animation];
[gridGroup setAnimations:gridAnimations];
gridGroup.duration = duration;
gridGroup.fillMode = kCAFillModeForwards;
gridGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
gridGroup.removedOnCompletion = NO;
[view.layer addAnimation:gridGroup forKey:@"anim"];
我使用 AQGridView
。在我的代码示例 view
是我动画的 AQGridViewCell
的实例。和 vc.view
是我的细节 UIViewController
/ UIView
我正在显示。
I'm doing this with an item in an AQGridView
. In my code sample view
is the instance of AQGridViewCell
that I am animating. And vc.view
is my detail UIViewController
/UIView
that I'm displaying.
这篇关于翻转,成长和翻译动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!