可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
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?
Thanks
EDIT: 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.
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.
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.
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
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.
回答1:
You can implement your own transition using a category on 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
This can easily be changed to use whatever animated transition you want; for your's, you might want to use a CA3DTransform. Hope this helps!
回答2:
To do a flip, grow, and translate animation you can use the following code:
- (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
}];
}];
}
Hope this helps!
回答3:
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"];
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.
回答4:
I would highly recommend taking a look at this post.
You shouldn't need to actually handle all this animation yourself.
If you use the UIView
class method transitionFromView:toView:duration:options:completion: and passing in UIViewAnimationOptionTransitionFlipFromLeft
or UIViewAnimationOptionTransitionFlipFromRight
-- whichever way you want the animation to flip.
I have implemented the same thing as shown in the MLB app using this method. Your from view
would be the cell in the grid and the to view
would be the thing that would on the "back" of the cell.
Hope this will reduce the overall code you'll need.
回答5:
I would use a UICollectionView with a custom UICollectionViewCell and animate in with its delegate call... Just an example for others to pick at.
#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];
}