那些遇到过的问题

如何在iOS上的视图之间进行扩展/合同转换？

Jes*_*sen 37 animation transition uiview modalviewcontroller ios

我正在尝试在iOS中制作过渡动画,其中视图或视图控制器似乎会扩展以填充整个屏幕,然后在完成时缩回到其原来的位置.我不确定这种类型的过渡是否正式调用,但您可以在iPad的YouTube应用中看到一个示例.当您点击网格上的某个搜索结果缩略图时,它会从缩略图中展开,然后在您返回搜索时收缩回缩略图.

我对此有两个方面感兴趣:

  1. 在一个视图和另一个视图之间转换时,您将如何产生这种效果？换句话说,如果视图A占据屏幕的某个区域,您将如何将其转换为占据整个屏幕的视图B,反之亦然？

  2. 你会如何以这种方式过渡到模态视图？换句话说,如果UIViewController C当前正在显示并包含占据屏幕一部分的视图D,那么如何使它看起来像视图D变成UIViewController E,它在C上呈现模态？

编辑:我正在添加赏金,看看是否能让这个问题更加热爱.

编辑:我有一些源代码可以做到这一点,Anomie的想法就像一个魅力,有一些改进.我首先尝试动画模态控制器的视图(E),但它没有产生感觉像你正在放大屏幕的效果,因为它没有扩展(C)中缩略图视图周围的所有东西.因此,我尝试动画原始控制器的视图(C),但重绘它为一个生涩的动画,像背景纹理之类的东西没有正确缩放.所以我最后做的是拍摄原始视图控制器(C)的图像并在模态视图(E)内缩放.这种方法比我原来的方法复杂得多,但看起来确实不错!我认为iOS也必须如何进行内部转换.无论如何,这是我在UIViewController上作为类别编写的代码.

的UIViewController + Transitions.h:

#import <Foundation/Foundation.h>

@interface UIViewController (Transitions)

// make a transition that looks like a modal view 
//  is expanding from a subview
- (void)expandView:(UIView *)sourceView 
        toModalViewController:(UIViewController *)modalViewController;

// make a transition that looks like the current modal view 
//  is shrinking into a subview
- (void)dismissModalViewControllerToView:(UIView *)view;

@end
Run Code Online (Sandbox Code Playgroud)

的UIViewController + Transitions.m:

#import "UIViewController+Transitions.h"

@implementation UIViewController (Transitions)

// capture a screen-sized image of the receiver
- (UIImageView *)imageViewFromScreen {
  // make a bitmap copy of the screen
  UIGraphicsBeginImageContextWithOptions(
    [UIScreen mainScreen].bounds.size, YES, 
    [UIScreen mainScreen].scale);
  // get the root layer
  CALayer *layer = self.view.layer;
  while(layer.superlayer) {
    layer = layer.superlayer;
  }
  // render it into the bitmap
  [layer renderInContext:UIGraphicsGetCurrentContext()];
  // get the image
  UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
  // close the context
  UIGraphicsEndImageContext();
  // make a view for the image
  UIImageView *imageView = 
    [[[UIImageView alloc] initWithImage:image]
      autorelease];

  return(imageView);
}

// make a transform that causes the given subview to fill the screen
//  (when applied to an image of the screen)
- (CATransform3D)transformToFillScreenWithSubview:(UIView *)sourceView {
  // get the root view
  UIView *rootView = sourceView;
  while (rootView.superview) rootView = rootView.superview;
  // convert the source view's center and size into the coordinate
  //  system of the root view
  CGRect sourceRect = [sourceView convertRect:sourceView.bounds toView:rootView];
  CGPoint sourceCenter = CGPointMake(
    CGRectGetMidX(sourceRect), CGRectGetMidY(sourceRect));
  CGSize sourceSize = sourceRect.size;
  // get the size and position we're expanding it to
  CGRect screenBounds = [UIScreen mainScreen].bounds;
  CGPoint targetCenter = CGPointMake(
    CGRectGetMidX(screenBounds),
    CGRectGetMidY(screenBounds));
  CGSize targetSize = screenBounds.size;
  // scale so that the view fills the screen
  CATransform3D t = CATransform3DIdentity;
  CGFloat sourceAspect = sourceSize.width / sourceSize.height;
  CGFloat targetAspect = targetSize.width / targetSize.height;
  CGFloat scale = 1.0;
  if (sourceAspect > targetAspect)
    scale = targetSize.width / sourceSize.width;
  else
    scale = targetSize.height / sourceSize.height;
  t = CATransform3DScale(t, scale, scale, 1.0);
  // compensate for the status bar in the screen image
  CGFloat statusBarAdjustment =
    (([UIApplication sharedApplication].statusBarFrame.size.height / 2.0) 
      / scale);
  // transform to center the view
  t = CATransform3DTranslate(t, 
    (targetCenter.x - sourceCenter.x), 
    (targetCenter.y - sourceCenter.y) + statusBarAdjustment, 
    0.0);

  return(t);
}

- (void)expandView:(UIView *)sourceView 
        toModalViewController:(UIViewController *)modalViewController {

  // get an image of the screen
  UIImageView *imageView = [self imageViewFromScreen];

  // insert it into the modal view's hierarchy
  [self presentModalViewController:modalViewController animated:NO];
  UIView *rootView = modalViewController.view;
  while (rootView.superview) rootView = rootView.superview;
  [rootView addSubview:imageView];

  // make a transform that makes the source view fill the screen
  CATransform3D t = [self transformToFillScreenWithSubview:sourceView];

  // animate the transform
  [UIView animateWithDuration:0.4
    animations:^(void) {
      imageView.layer.transform = t;
    } completion:^(BOOL finished) {
      [imageView removeFromSuperview];
    }];
}

- (void)dismissModalViewControllerToView:(UIView *)view {

  // take a snapshot of the current screen
  UIImageView *imageView = [self imageViewFromScreen];

  // insert it into the root view
  UIView *rootView = self.view;
  while (rootView.superview) rootView = rootView.superview;
  [rootView addSubview:imageView];

  // make the subview initially fill the screen
  imageView.layer.transform = [self transformToFillScreenWithSubview:view];
  // remove the modal view
  [self dismissModalViewControllerAnimated:NO];

  // animate the screen shrinking back to normal
  [UIView animateWithDuration:0.4 
    animations:^(void) {
      imageView.layer.transform = CATransform3DIdentity;
    }
    completion:^(BOOL finished) {
      [imageView removeFromSuperview];
    }];
}

@end
Run Code Online (Sandbox Code Playgroud)

你可以在UIViewController子类中使用这样的东西:

#import "UIViewController+Transitions.h"

...

- (void)userDidTapThumbnail {

  DetailViewController *detail = 
    [[DetailViewController alloc]
      initWithNibName:nil bundle:nil];

  [self expandView:thumbnailView toModalViewController:detail];

  [detail release];
}

- (void)dismissModalViewControllerAnimated:(BOOL)animated {
  if (([self.modalViewController isKindOfClass:[DetailViewController class]]) &&
      (animated)) {

    [self dismissModalViewControllerToView:thumbnailView];

  }
  else {
    [super dismissModalViewControllerAnimated:animated];
  }
}
Run Code Online (Sandbox Code Playgroud)

编辑:嗯,事实证明,除了肖像之外,它并没有真正处理界面方向.所以我不得不切换到UIWindow中的转换动画,使用视图控制器来传递旋转.请参阅下面更复杂的版本:

的UIViewController + Transitions.m:

@interface ContainerViewController : UIViewController { }
@end

@implementation ContainerViewController
  - (BOOL)shouldAutorotateToInterfaceOrientation:
          (UIInterfaceOrientation)toInterfaceOrientation {
    return(YES);
  }
@end

...

// get the screen size, compensating for orientation
- (CGSize)screenSize {
  // get the size of the screen (swapping dimensions for other orientations)
  CGSize size = [UIScreen mainScreen].bounds.size;
  if (UIInterfaceOrientationIsLandscape(self.interfaceOrientation)) {
    CGFloat width = size.width;
    size.width = size.height;
    size.height = width;
  }
  return(size);
}

// capture a screen-sized image of the receiver
- (UIImageView *)imageViewFromScreen {

  // get the root layer
  CALayer *layer = self.view.layer;
  while(layer.superlayer) {
    layer = layer.superlayer;
  }
  // get the size of the bitmap
  CGSize size = [self screenSize];
  // make a bitmap to copy the screen into
  UIGraphicsBeginImageContextWithOptions(
    size, YES, 
    [UIScreen mainScreen].scale);
  CGContextRef context = UIGraphicsGetCurrentContext();
  // compensate for orientation
  if (self.interfaceOrientation == UIInterfaceOrientationLandscapeLeft) {
    CGContextTranslateCTM(context, size.width, 0);
    CGContextRotateCTM(context, M_PI_2);
  }
  else if (self.interfaceOrientation == UIInterfaceOrientationLandscapeRight) {
    CGContextTranslateCTM(context, 0, size.height);
    CGContextRotateCTM(context, - M_PI_2);
  }
  else if (self.interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) {
    CGContextTranslateCTM(context, size.width, size.height);
    CGContextRotateCTM(context, M_PI);
  }
  // render the layer into the bitmap
  [layer renderInContext:context];
  // get the image
  UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
  // close the context
  UIGraphicsEndImageContext();
  // make a view for the image
  UIImageView *imageView = 
    [[[UIImageView alloc] initWithImage:image]
      autorelease];
  // done
  return(imageView);
}

// make a transform that causes the given subview to fill the screen
//  (when applied to an image of the screen)
- (CATransform3D)transformToFillScreenWithSubview:(UIView *)sourceView
                 includeStatusBar:(BOOL)includeStatusBar {
  // get the root view
  UIView *rootView = sourceView;
  while (rootView.superview) rootView = rootView.superview;
  // by default, zoom from the view's bounds
  CGRect sourceRect = sourceView.bounds;
  // convert the source view's center and size into the coordinate
  //  system of the root view
  sourceRect = [sourceView convertRect:sourceRect toView:rootView];
  CGPoint sourceCenter = CGPointMake(
    CGRectGetMidX(sourceRect), CGRectGetMidY(sourceRect));
  CGSize sourceSize = sourceRect.size;
  // get the size and position we're expanding it to
  CGSize targetSize = [self screenSize];
  CGPoint targetCenter = CGPointMake(
    targetSize.width / 2.0,
    targetSize.height / 2.0);

  // scale so that the view fills the screen
  CATransform3D t = CATransform3DIdentity;
  CGFloat sourceAspect = sourceSize.width / sourceSize.height;
  CGFloat targetAspect = targetSize.width / targetSize.height;
  CGFloat scale = 1.0;
  if (sourceAspect > targetAspect)
    scale = targetSize.width / sourceSize.width;
  else
    scale = targetSize.height / sourceSize.height;
  t = CATransform3DScale(t, scale, scale, 1.0);
  // compensate for the status bar in the screen image
  CGFloat statusBarAdjustment = includeStatusBar ?
    (([UIApplication sharedApplication].statusBarFrame.size.height / 2.0) 
      / scale) : 0.0;
  // transform to center the view
  t = CATransform3DTranslate(t, 
    (targetCenter.x - sourceCenter.x), 
    (targetCenter.y - sourceCenter.y) + statusBarAdjustment, 
    0.0);

  return(t);
}

- (void)expandView:(UIView *)sourceView 
        toModalViewController:(UIViewController *)modalViewController {

  // get an image of the screen
  UIImageView *imageView = [self imageViewFromScreen];
  // show the modal view
  [self presentModalViewController:modalViewController animated:NO];
  // make a window to display the transition on top of everything else
  UIWindow *window = 
    [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  window.hidden = NO;
  window.backgroundColor = [UIColor blackColor];
  // make a view controller to display the image in
  ContainerViewController *vc = [[ContainerViewController alloc] init];
  vc.wantsFullScreenLayout = YES;
  // show the window
  [window setRootViewController:vc];
  [window makeKeyAndVisible];
  // add the image to the window
  [vc.view addSubview:imageView];

  // make a transform that makes the source view fill the screen
  CATransform3D t = [self 
    transformToFillScreenWithSubview:sourceView
    includeStatusBar:(! modalViewController.wantsFullScreenLayout)];

  // animate the transform
  [UIView animateWithDuration:0.4
    animations:^(void) {
      imageView.layer.transform = t;
    } completion:^(BOOL finished) {
      // we're going to crossfade, so change the background to clear
      window.backgroundColor = [UIColor clearColor];
      // do a little crossfade
      [UIView animateWithDuration:0.25 
        animations:^(void) {
          imageView.alpha = 0.0;
        }
        completion:^(BOOL finished) {
          window.hidden = YES;
          [window release];
          [vc release];
        }];
    }];
}

- (void)dismissModalViewControllerToView:(UIView *)view {

  // temporarily remove the modal dialog so we can get an accurate screenshot 
  //  with orientation applied
  UIViewController *modalViewController = [self.modalViewController retain];
  [self dismissModalViewControllerAnimated:NO];

  // capture the screen
  UIImageView *imageView = [self imageViewFromScreen];
  // put the modal view controller back
  [self presentModalViewController:modalViewController animated:NO];
  [modalViewController release];

  // make a window to display the transition on top of everything else
  UIWindow *window = 
    [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  window.hidden = NO;
  window.backgroundColor = [UIColor clearColor];
  // make a view controller to display the image in
  ContainerViewController *vc = [[ContainerViewController alloc] init];
  vc.wantsFullScreenLayout = YES;
  // show the window
  [window setRootViewController:vc];
  [window makeKeyAndVisible];
  // add the image to the window
  [vc.view addSubview:imageView];

  // make the subview initially fill the screen
  imageView.layer.transform = [self 
    transformToFillScreenWithSubview:view
    includeStatusBar:(! self.modalViewController.wantsFullScreenLayout)];

  // animate a little crossfade
  imageView.alpha = 0.0;
  [UIView animateWithDuration:0.15 
    animations:^(void) {
      imageView.alpha = 1.0;
    }
    completion:^(BOOL finished) {
      // remove the modal view
      [self dismissModalViewControllerAnimated:NO];
      // set the background so the real screen won't show through
      window.backgroundColor = [UIColor blackColor];
      // animate the screen shrinking back to normal
      [UIView animateWithDuration:0.4 
        animations:^(void) {
          imageView.layer.transform = CATransform3DIdentity;
        }
        completion:^(BOOL finished) {
          // hide the transition stuff
          window.hidden = YES;
          [window release];
          [vc release];
        }];
    }];

}
Run Code Online (Sandbox Code Playgroud)

呼!但现在它看起来就像Apple的版本没有使用任何受限制的API.此外,即使在模态视图位于前方时方向发生变化,它仍然有效.

Ano*_*mie 13

  1. 制作效果很简单.您可以获取全尺寸视图,初始化它transform并将center其放置在缩略图顶部,将其添加到相应的超视图,然后在动画块中重置transform并将center其置于最终位置.要关闭视图,只需执行相反操作:在动画块集中transform并将center其放置在缩略图顶部,然后在完成块中将其完全删除.

    请注意,尝试从一个点(即一个宽度为0,高度为0的矩形)进行缩放会使事情变得棘手.如果您想要这样做,请从宽度/高度为0.00001的矩形进行缩放.

  2. 一种方法是在#1中执行相同操作,然后presentModalViewController:animated:使用动画NO 调用以在动画完成时呈现实际的视图控制器(如果正确完成,将导致由于presentModalViewController:animated:调用而没有可见的差异).并且dismissModalViewControllerAnimated:在NO之后跟#1中的相同.

    或者你可以操纵模式视图控制器的直接的视图,#1,和接受parentViewController,interfaceOrientation以及一些其他的东西就不会正好在模态视图控制器工作,因为苹果不支持我们创造我们自己的容器视图控制器.

Can*_*Can 9

看完Youtube iPad动画后,我发现这只是一种幻觉.假设有一个SearchViewController用于搜索结果,一个DetailViewController用于视频本身,以及视频的附加信息.

DetailViewController有一个方法- (id)initWithFullscreen,可以使用视频的全屏空间启动视图控制器.

所以序列如下:

  1. SearchViewController显示其结果.
  2. 用户点击视频.
  3. DetailViewController是使用initWithFullscreen但未显示创建的
  4. "放大"动画开始.(请注意,我们仍然在SearchViewController上,这个动画只是一个简单的View动画)
  5. "放大"动画结束,呈现DetailViewController animated:NO(如Anomie所述).
  6. 现在呈现DetailViewController,并使用完整空间.

似乎youtube应用程序没有做任何更好的事情,赠送的是"放大"动画在放映完整视频之前缩放到黑色方块.

归档时间：

查看次数：

15306 次

最近记录：

14 年 前
相关归档
iOS 10错误:UICollectionView接收到具有不存在的索引路径的单元格的布局属性 63
SLServiceTypeFacebook setInitialText不起作用 46
如何使UITableView停止滚动 45
iOS - 核心数据和服务器数据库同步最佳实践 21
在UIImageView向上和向下(就像它的悬停)循环中动画UIImage 9
将动画从屏幕的顶部翻译到屏幕中间 5
当视图离开屏幕时，Android动画停止在recyclerview中起作用 5
如何创建 SwiftUI RoundedStar 形状？ 3
将子视图(UIButtons)添加到UIImageView的子类时出现问题 0
将 SVG 动画转换为 webm 或 mov 0
难疑归档
如何查看远程Git分支？ 6408
如何删除子模块？ 3366
是什么 !!(不是)JavaScript中的运算符？ 2906
一次捕获多个异常？ 2015
如何将package.json中的每个依赖项更新为最新版本？ 1871
将(移动)子目录分离到单独的Git存储库中 1712
在Visual Studio中使用Git 1452
如何在Bash中将字符串转换为小写？ 1158
查找包含具有指定名称的列的所有表 - MS SQL Server 1090
我必须在何处以及为何要使用"模板"和"typename"关键字？ 1061