翻转,增长和翻译animation
看看这个 MLB蝙蝠应用程序的video 。 基本上,我只想呈现一个带有UIModalPresentationFormSheet
风格的UIModalPresentationFormSheet
并从另一个视图增长,然后翻转。 就像在MLB应用程序的记分牌上点击游戏一样。 任何人都知道我可以做到这一点?
谢谢
编辑:我的主要观点是几乎相同的设置作为MLB应用程序。 我正在使用AQGridView
并希望点击网格视图中的单元格时发生animation。
编辑2:我也打开了沟渠UIViewController
概念,只是使用普通的UIView
,然后手动复制UIModalPresentationFormSheet
的样式,如果更容易。
编辑3:好吧,忘记使用UIViewController
来做到这一点,因为我没有得到任何答复,我会认为这是不可能的。 我的新问题是如何使用UIView
的在发布的video中复制animation? 所以基本上,最初的观点需要同时增长,移动和翻转。
编辑4:我想我有实际的animation想通了,现在我唯一的问题是计算坐标饲料CATransform3DTranslate
。 我的观点需要在video中非常像animation。 它需要重新开始另一个视图,并在屏幕中心生成animation。 下面是我正在试图计算在中心popup的视图的坐标:
CGPoint detailInitialPoint = [gridView convertPoint:view.frame.origin toView:detailView.frame.origin]; CGPoint detailFinalPoint = detailView.frame.origin;
gridView
是我的主视图的容器视图,包含较小的网格项目。 view
是我们正在animation的特定网格项目。 而detailView
是在屏幕中间出现的视图。
您可以使用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
这可以很容易地改变使用任何animation过渡你想要的; 对于你的,你可能想要使用CA3DTransform。 希望这可以帮助!
要翻转,增长和翻译animation,可以使用以下代码:
- (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 }]; }]; }
希望这可以帮助!
好的,我明白了。 以下是我所做的:
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
是我animation的AQGridViewCell
的实例。 而vc.view
是我显示的细节UIViewController
/ UIView
。
我强烈build议看看这个post。
你不需要亲自处理所有这些animation。
如果使用UIView
类方法transitionFromView:toView:duration:options:completion:并传入UIViewAnimationOptionTransitionFlipFromLeft
或UIViewAnimationOptionTransitionFlipFromRight
– 无论您希望animation翻转的方式。
我使用这种方法实现了与MLB应用程序中显示的相同的function。 你from view
将是网格中的单元格, to view
将是单元格背面的东西。
希望这会减less你需要的整体代码。
我将使用一个UICollectionView与自定义的UICollectionViewCell和animation与它的委托调用…只是一个例子让别人挑选。
#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]; }