查看MLB At Bat应用程序的this video。基本上,我只想呈现一个modalViewController
UIModalPresentationFormSheet
样式,并从另一个视图增长然后翻转。就像你在MLB应用程序的记分牌上点击一个游戏一样。有谁知道我怎么能做到这一点?
由于
编辑:我的主视图与MLB应用程序几乎相同。我正在使用AQGridView
并希望在点击网格视图中的单元格时发生动画。
编辑2:我也愿意放弃UIViewController
概念,只使用普通UIView
,然后手动复制UIModalPresentationFormSheet
的样式,如果这更容易。
编辑3:好的,忘记使用UIViewController
来执行此操作,因为我没有得到任何回复,我认为这是不可能的。我的新问题是如何仅使用UIView
来复制发布视频中的动画?所以基本上,初始视图需要同时增长,移动和翻转。
编辑4:我想我已经找到了实际的动画,现在我唯一的问题是计算要输入CATransform3DTranslate
的坐标。我的观点需要与视频中的动画非常相似。它需要从另一个视图开始并动画到屏幕的中心。以下是我如何计算中心弹出视图的坐标:
CGPoint detailInitialPoint = [gridView convertPoint:view.frame.origin toView:detailView.frame.origin];
CGPoint detailFinalPoint = detailView.frame.origin;
gridView
是我的主视图的容器视图,其中包含较小的网格项。 view
是我们动画的特定网格项。 detailView
是屏幕中间出现的视图。
答案 0 :(得分:6)
您可以使用UIViewControler上的类别实现自己的转换。
<强>的UIViewController + ShowModalFromView.h 强>
#import <Foundation/Foundation.h>
#import <QuartzCore/QuartzCore.h>
@interface UIViewController (ShowModalFromView)
- (void)presentModalViewController:(UIViewController *)modalViewController fromView:(UIView *)view;
@end
<强>的UIViewController + ShowModalFromView.m 强>
#import "UIViewController+ShowModalFromView.h"
@implementation UIViewController (ShowModalFromView)
- (void)presentModalViewController:(UIViewController *)modalViewController fromView:(UIView *)view {
modalViewController.modalPresentationStyle = UIModalPresentationFormSheet;
// Add the modal viewController but don't animate it. We will handle the animation manually
[self presentModalViewController:modalViewController animated:NO];
// Remove the shadow. It causes weird artifacts while animating the view.
CGColorRef originalShadowColor = modalViewController.view.superview.layer.shadowColor;
modalViewController.view.superview.layer.shadowColor = [[UIColor clearColor] CGColor];
// Save the original size of the viewController's view
CGRect originalFrame = modalViewController.view.superview.frame;
// Set the frame to the one of the view we want to animate from
modalViewController.view.superview.frame = view.frame;
// Begin animation
[UIView animateWithDuration:1.0f
animations:^{
// Set the original frame back
modalViewController.view.superview.frame = originalFrame;
}
completion:^(BOOL finished) {
// Set the original shadow color back after the animation has finished
modalViewController.view.superview.layer.shadowColor = originalShadowColor;
}];
}
@end
这可以轻松更改为使用您想要的任何动画过渡;对于你的,你可能想要使用CA3DTransform。希望这有帮助!
答案 1 :(得分:1)
要进行翻转,增长和翻译动画,您可以使用以下代码:
- (void)animate {
int newX, newY; //New position
int newW, newH; //New size
[UIView animateWithDuration:someDuration delay:someDelay animations:^{
yourView.transform = CATransform3DMakeRotation(M_PI_2,1.0,0.0,0.0); //flip halfway
yourView.frame = CGRectMake(newX/2, newY/2, newW/2, newH/2);
} completion:^{
while ([yourView.subviews count] > 0)
[[yourView.subviews lastObject] removeFromSuperview]; // remove all subviews
// Add your new views here
[UIView animateWithDuration:someDuration delay:someDelay animations:^{
yourView.transform = CATransform3DMakeRotation(M_PI,1.0,0.0,0.0); //finish the flip
yourView.frame = CGRectMake(newX, newY, newW, newH);
} completion:^{
// Flip completion code here
}];
}];
}
希望这有帮助!
答案 2 :(得分:1)
好的,我明白了。这是我做的:
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
。
答案 3 :(得分:0)
我强烈建议您查看this帖子。
您不需要自己实际处理所有这些动画。
如果您使用UIView
类方法transitionFromView:toView:duration:options:completion:并传入UIViewAnimationOptionTransitionFlipFromLeft
或UIViewAnimationOptionTransitionFlipFromRight
- 无论您希望动画如何翻转。
我使用此方法实现了与MLB应用程序中显示的相同的功能。您的from view
将成为网格中的单元格,而to view
将成为单元格“背面”的内容。
希望这会减少您需要的整体代码。
答案 4 :(得分:0)
我会使用带有自定义UICollectionViewCell的UICollectionView并使用其委托调用进行动画处理...只是其他人可以选择的示例。
#pragma mark - UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:
(NSIndexPath *)indexPath
{
[UIView beginAnimations:@"showImage" context:Nil];
CGRect cellFrame = cell.frame;
CGRect imgFram = cell.imageView.frame;
[UIView setAnimationDuration:0.8];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:cell
cache:YES];
cellFrame.size = CGSizeMake(200, 200);
cellFrame.origin.y = 10;
cellFrame.origin.x = 45;
cell.frame = cellFrame;
imgFram.size = CGSizeMake(200, 200);
cell.imageView.frame = imgFram;
[collectionView bringSubviewToFront:cell];
[UIView commitAnimations];
}