我有几个视图，我想在 iOS 程序中滑动它们。现在，我使用模态样式在它们之间滑动，并带有交叉溶解动画。但是，我想要像您在主屏幕等上看到的那样滑动/滑动动画。我不知道如何编写这样的过渡，并且动画样式不是可用的模态过渡样式。谁能给我一个代码示例？它不需要是模态模型或任何东西，我只是发现最简单。
问问题
64652 次
3 回答
36
从 iOS 7 开始，如果您想为两个视图控制器之间的过渡设置动画，您将使用自定义过渡，如 WWDC 2013 视频Custom Transitions Using View Controllers中所述。例如，要自定义新视图控制器的显示，您可以：
目标视图控制器将为演示动画指定
self.modalPresentationStyleand ：transitioningDelegate- (instancetype)initWithCoder:(NSCoder *)coder { self = [super initWithCoder:coder]; if (self) { self.modalPresentationStyle = UIModalPresentationCustom; self.transitioningDelegate = self; } return self; }这个委托（在这个例子中，视图控制器本身）将符合
UIViewControllerTransitioningDelegate并实现：- (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source { return [[PresentAnimator alloc] init]; } // in iOS 8 and later, you'd also specify a presentation controller - (UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(UIViewController *)presenting sourceViewController:(UIViewController *)source { return [[PresentationController alloc] initWithPresentedViewController:presented presentingViewController:presenting]; }您将实现一个动画器来执行所需的动画：
@interface PresentAnimator : NSObject <UIViewControllerAnimatedTransitioning> @end @implementation PresentAnimator - (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext { return 0.5; } // do whatever animation you want below - (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext { UIViewController* toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey]; UIViewController* fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey]; [[transitionContext containerView] addSubview:toViewController.view]; CGFloat width = fromViewController.view.frame.size.width; CGRect originalFrame = fromViewController.view.frame; CGRect rightFrame = originalFrame; rightFrame.origin.x += width; CGRect leftFrame = originalFrame; leftFrame.origin.x -= width / 2.0; toViewController.view.frame = rightFrame; toViewController.view.layer.shadowColor = [[UIColor blackColor] CGColor]; toViewController.view.layer.shadowRadius = 10.0; toViewController.view.layer.shadowOpacity = 0.5; [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{ fromViewController.view.frame = leftFrame; toViewController.view.frame = originalFrame; toViewController.view.layer.shadowOpacity = 0.5; } completion:^(BOOL finished) { [transitionContext completeTransition:![transitionContext transitionWasCancelled]]; }]; } @end您还将实现一个表示控制器，负责为您清理视图层次结构。在这种情况下，由于我们完全覆盖了呈现视图，因此我们可以在转换完成后将其从层次结构中移除：
@interface PresentationController: UIPresentationController @end @implementation PresentationController - (BOOL)shouldRemovePresentersView { return true; } @end或者，如果您希望此手势具有交互性，您还可以：
创建一个交互控制器（通常是一个
UIPercentDrivenInteractiveTransition）；让你
UIViewControllerAnimatedTransitioning也实现interactionControllerForPresentation，这显然会返回前面提到的交互控制器；有一个手势（或你有什么）来更新
interactionController
这在前面提到的使用视图控制器的自定义转换中都有描述。
自定义导航控制器推送/弹出的示例，请参阅导航控制器自定义过渡动画
下面，请找到我的原始答案的副本，它早于自定义转换。
@sooper 的回答是正确的， CATransition 可以产生您正在寻找的效果。
但是，顺便说一句，如果你的背景不是白色的，则kCATransitionPush在CATransition过渡结束时会出现奇怪的淡入和淡出，这可能会分散注意力（尤其是在图像之间导航时，它会产生轻微的闪烁效果） . 如果你遇到这种情况，我发现这个简单的过渡非常优雅：你可以准备你的“下一个视图”到屏幕右侧，然后动画当前视图向左移动，同时你为下一个视图设置动画以移动到当前视图所在的位置。请注意，在我的示例中，我在单个视图控制器中对进出主视图的子视图进行动画处理，但您可能明白了：
float width = self.view.frame.size.width;
float height = self.view.frame.size.height;
// my nextView hasn't been added to the main view yet, so set the frame to be off-screen
[nextView setFrame:CGRectMake(width, 0.0, width, height)];
// then add it to the main view
[self.view addSubview:nextView];
// now animate moving the current view off to the left while the next view is moved into place
[UIView animateWithDuration:0.33f
delay:0.0f
options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction
animations:^{
[nextView setFrame:currView.frame];
[currView setFrame:CGRectMake(-width, 0.0, width, height)];
}
completion:^(BOOL finished){
// do whatever post processing you want (such as resetting what is "current" and what is "next")
}];
显然，您必须根据如何设置所有控件来调整它，但这会产生一个非常简单的过渡，没有褪色或类似的东西，只是一个很好的平滑过渡。
一个警告：首先，这个例子和CATransition例子都不像SpringBoard主屏幕动画（你谈到的），它是连续的（即如果你在滑动的一半，你可以停止并返回或任何）。这些转变一旦开始，就会发生。如果您需要实时交互，也可以这样做，但情况不同。
更新：
如果您想使用跟踪用户手指的连续手势，您可以使用UIPanGestureRecognizer而不是UISwipeGestureRecognizer，我认为animateWithDuration比CATransition这种情况更好。我修改了 myhandlePanGesture以更改frame坐标以与用户的手势相协调，然后我修改了上面的代码以在用户放手时完成动画。效果很好。我不认为你可以CATransition很容易地做到这一点。
例如，您可以在控制器的主视图上创建一个手势处理程序：
[self.view addGestureRecognizer:[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)]];
处理程序可能看起来像：
- (void)handlePan:(UIPanGestureRecognizer *)gesture
{
// transform the three views by the amount of the x translation
CGPoint translate = [gesture translationInView:gesture.view];
translate.y = 0.0; // I'm just doing horizontal scrolling
prevView.frame = [self frameForPreviousViewWithTranslate:translate];
currView.frame = [self frameForCurrentViewWithTranslate:translate];
nextView.frame = [self frameForNextViewWithTranslate:translate];
// if we're done with gesture, animate frames to new locations
if (gesture.state == UIGestureRecognizerStateCancelled ||
gesture.state == UIGestureRecognizerStateEnded ||
gesture.state == UIGestureRecognizerStateFailed)
{
// figure out if we've moved (or flicked) more than 50% the way across
CGPoint velocity = [gesture velocityInView:gesture.view];
if (translate.x > 0.0 && (translate.x + velocity.x * 0.25) > (gesture.view.bounds.size.width / 2.0) && prevView)
{
// moving right (and/or flicked right)
[UIView animateWithDuration:0.25
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
prevView.frame = [self frameForCurrentViewWithTranslate:CGPointZero];
currView.frame = [self frameForNextViewWithTranslate:CGPointZero];
}
completion:^(BOOL finished) {
// do whatever you want upon completion to reflect that everything has slid to the right
// this redefines "next" to be the old "current",
// "current" to be the old "previous", and recycles
// the old "next" to be the new "previous" (you'd presumably.
// want to update the content for the new "previous" to reflect whatever should be there
UIView *tempView = nextView;
nextView = currView;
currView = prevView;
prevView = tempView;
prevView.frame = [self frameForPreviousViewWithTranslate:CGPointZero];
}];
}
else if (translate.x < 0.0 && (translate.x + velocity.x * 0.25) < -(gesture.view.frame.size.width / 2.0) && nextView)
{
// moving left (and/or flicked left)
[UIView animateWithDuration:0.25
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
nextView.frame = [self frameForCurrentViewWithTranslate:CGPointZero];
currView.frame = [self frameForPreviousViewWithTranslate:CGPointZero];
}
completion:^(BOOL finished) {
// do whatever you want upon completion to reflect that everything has slid to the left
// this redefines "previous" to be the old "current",
// "current" to be the old "next", and recycles
// the old "previous" to be the new "next". (You'd presumably.
// want to update the content for the new "next" to reflect whatever should be there
UIView *tempView = prevView;
prevView = currView;
currView = nextView;
nextView = tempView;
nextView.frame = [self frameForNextViewWithTranslate:CGPointZero];
}];
}
else
{
// return to original location
[UIView animateWithDuration:0.25
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
prevView.frame = [self frameForPreviousViewWithTranslate:CGPointZero];
currView.frame = [self frameForCurrentViewWithTranslate:CGPointZero];
nextView.frame = [self frameForNextViewWithTranslate:CGPointZero];
}
completion:NULL];
}
}
}
frame这使用了您可能为所需的 UX 定义的这些简单方法：
- (CGRect)frameForPreviousViewWithTranslate:(CGPoint)translate
{
return CGRectMake(-self.view.bounds.size.width + translate.x, translate.y, self.view.bounds.size.width, self.view.bounds.size.height);
}
- (CGRect)frameForCurrentViewWithTranslate:(CGPoint)translate
{
return CGRectMake(translate.x, translate.y, self.view.bounds.size.width, self.view.bounds.size.height);
}
- (CGRect)frameForNextViewWithTranslate:(CGPoint)translate
{
return CGRectMake(self.view.bounds.size.width + translate.x, translate.y, self.view.bounds.size.width, self.view.bounds.size.height);
}
您的特定实现无疑会有所不同，但希望这能说明这个想法。
在说明了所有这些（补充和澄清这个旧答案）之后，我应该指出我不再使用这种技术了。如今，我通常使用 a UIScrollView（打开“分页”）或（在 iOS 6 中） a UIPageViewController。这使您无需编写此类手势处理程序（并享受滚动条、弹跳等额外功能）。在UIScrollView实现中，我只是响应scrollViewDidScroll事件以确保我正在延迟加载必要的子视图。
于 2012-05-02T04:27:00.910 回答
9
You could create a CATransition animation. Here's an example of how you can slide a second view (from left) into the screen whilst pushing the current view out:
UIView *theParentView = [self.view superview];
CATransition *animation = [CATransition animation];
[animation setDuration:0.3];
[animation setType:kCATransitionPush];
[animation setSubtype:kCATransitionFromLeft];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[theParentView addSubview:yourSecondViewController.view];
[self.view removeFromSuperview];
[[theParentView layer] addAnimation:animation forKey:@"showSecondViewController"];
于 2012-05-01T16:52:52.017 回答
8
如果您希望在切换页面时获得与跳板相同的页面滚动/滑动效果，那么为什么不直接使用UIScrollView?
CGFloat width = 320;
CGFloat height = 400;
NSInteger pages = 3;
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0,0,width,height)];
scrollView.contentSize = CGSizeMake(width*pages, height);
scrollView.pagingEnabled = YES;
然后用UIPageControl得到这些点。:)
于 2013-07-31T20:05:03.147 回答