Facebook应用程序风格的照片从UITableView/Feed缩放

Question

在Facebook应用程序中,当您使用Feed时,点按照片进行查看,会发生以下情况:

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

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

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

4. 此时你会注意到Fee​​d中的图片曾经是空的(现在是空的)(给你的印象是你'把图像放在前面).通过向上/向下拖动图像可以看到这一点,您可以在图像后面看到Feed/table视图.

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

6. 一旦图像移动到屏幕中心,画廊视图控制器元素就会显示(完成按钮,喜欢/评论按钮等)

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

8. 最后,如果您向上/向下拖动图像超过某个阈值,它将被解除并再次显示Feed.

这是我认为在概念上发生的事情,如果这是正确的方法我会想要一些确认(下面的这些子弹不会映射到上面的子弹):

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

2. 然后将该图像的移动设置为屏幕中心的动画.同时,减小表视图的alpha值,使其在imageView到达屏幕中心的同时达到0.

3. 一旦图像到达屏幕中心,按下模态视图控制器而不动画它,并将imageView添加为模态视图控制器视图的子视图(上面的效果#6)

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

问题:

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

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

这对我来说似乎是一个非常重要的实现,但我认为效果很棒,而且我也很好奇它是如何完成的.我是否过度思考它并且实际上有一种非常简单的方法可以做到这一点,或者我是否可以为编写FB应用程序的人提供道具？

Answer 1

我走在正确的轨道上吗？如果是这样，我如何将 imageView 从单元格带入前视图 - 并将其保持在同一位置？

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

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

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

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

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

希望这会有所帮助；）我认为关键在于 ConvertRect 方法。