7

在 Facebook 应用程序中,当您在动态消息上并点击照片以查看它时,会发生一些事情:

  1. 图像动画/移动到屏幕的中心,无论它在表格视图中的当前位置(中间,部分远离屏幕朝向底部,顶部,等等)

  2. 当图像移动到屏幕中心时,表格视图的其余部分会淡出(alpha = 0)

  3. 当您向上或向下拖动图像时,表格视图的 alpha 会按比例(我认为)恢复为图像从屏幕中心的偏移量

  4. 此时,您会注意到在 Feed 中,图像过去所在的位置现在是空的(给您的印象是您将图像“带到”前面)。您可以通过向上/向下拖动图像来查看这一点,并且您可以看到图像后面的 Feed/table 视图。

  5. 在 #2 之后,如果图像已经成比例(也就是说,Feed/table 视图上的图像预览是按比例缩放的,没有任何裁剪),那么它只会移动到中心。如果图像被完全裁剪(因为它太高,等等,无法正确放入 Feed 中),那么图像的其余部分会在它移动到屏幕中心的同时显示出来。

  6. 一旦图像移动到屏幕中央,画廊视图控制器元素就会出现(完成按钮、赞/评论按钮等)

  7. 在 #4 之后,如果您滑动到另一个图像(在全屏图像视图中向左/向右滑动到同一相册中的另一个图像),然后尝试在 #3 中向上/向下拖动,您会看到第一个图像回到了它在 Feed 中的位置。

  8. 最后,如果您将图像向上/向下拖动超过某个阈值,则会将其关闭并再次显示 Feed。

这就是我认为在概念上正在发生的事情,如果这是正确的方法,我想确认一下(下面的这些项目符号不映射到上面的项目符号):

  1. 当用户点击图像时,将该 imageView 添加为 table view 的容器视图的子视图,但将其添加到完全相同的位置,以便看不到 imageView 从单元格到主视图的移动。

  2. 然后将该图像移动到屏幕中心的动画。同时降低table view的alpha,使其在imageView到达屏幕中心的同时达到0。

  3. 一旦图像到达屏幕中心,推送模态视图控制器而不对其进行动画处理,并将 imageView 添加为模态视图控制器视图的子视图(上面的效果 #6)

  4. 图像的任何拖动都会降低模态视图控制器的 alpha 并增加 Feed 表视图的 alpha(上面的效果 #3),并且拖动到某个阈值以上会触发隐藏图库并再次显示 Feed 的动画(效果 #8以上)

问题:

  1. 我在正确的轨道上吗?如果是这样,我如何将单元格中的 imageView 带入前视图 - 并将其保持在相同的位置?

  2. 当您滑动到另一个图像时,原始图像将“恢复”到其在表格视图单元格中的原始位置。这实际上只是将一个 imageView 从一个视图移动到下一个视图吗?您如何将其发送回原始单元格 - 当用户点击图像时保留指向该单元格的指针,然后执行类似的操作customCell.imageViewContainerView addSubview:originalImageView?如果用户滑回原始图像,这是否需要反转?

这整件事对我来说似乎是一个不平凡的实现,但我认为效果很棒,而且我也很好奇它是如何完成的。我是不是想多了,实际上有一个非常简单的方法可以做到这一点,或者我是否应该向编写 FB 应用程序的人提供道具?

4

1 回答 1

2

我在正确的轨道上吗?如果是这样,我如何将单元格中的 imageView 带入前视图 - 并将其保持在相同的位置?

我认为您在概念步骤上是正确的。从单元格中获取 imageView 并将其添加到控制器视图中并不难。您可以使用以下方法

- (CGRect)convertRect:(CGRect)rect toView:(UIView *)view 

以获得图像视图的正确位置。

当您滑动到另一个图像时,原始图像将“恢复”到其在表格视图单元格中的原始位置。这实际上只是将一个 imageView 从一个视图移动到下一个视图吗?你怎么把它发送回原始单元格 - 当用户点击图像时保持指向该单元格的指针,然后执行 customCell.imageViewContainerView addSubview:originalImageView 之类的操作?如果用户滑回原始图像,这是否需要反转?

我认为这是由画廊和表格视图控制器之间的某种协议制成的。也许它只是隐藏/显示图像,画廊中的图像实际上是一个不同的对象。无论如何,如果你想使用相同的 imageview,你可以在两个控制器之间发送带有协议的对象。

希望这会有所帮助;)我认为关键在于 convertRect 方法。

于 2013-04-04T11:26:09.430 回答