在 Facebook 应用程序中,当您在动态消息上并点击照片以查看它时,会发生一些事情:
图像动画/移动到屏幕的中心,无论它在表格视图中的当前位置(中间,部分远离屏幕朝向底部,顶部,等等)
当图像移动到屏幕中心时,表格视图的其余部分会淡出(alpha = 0)
当您向上或向下拖动图像时,表格视图的 alpha 会按比例(我认为)恢复为图像从屏幕中心的偏移量
此时,您会注意到在 Feed 中,图像过去所在的位置现在是空的(给您的印象是您将图像“带到”前面)。您可以通过向上/向下拖动图像来查看这一点,并且您可以看到图像后面的 Feed/table 视图。
在 #2 之后,如果图像已经成比例(也就是说,Feed/table 视图上的图像预览是按比例缩放的,没有任何裁剪),那么它只会移动到中心。如果图像被完全裁剪(因为它太高,等等,无法正确放入 Feed 中),那么图像的其余部分会在它移动到屏幕中心的同时显示出来。
一旦图像移动到屏幕中央,画廊视图控制器元素就会出现(完成按钮、赞/评论按钮等)
在 #4 之后,如果您滑动到另一个图像(在全屏图像视图中向左/向右滑动到同一相册中的另一个图像),然后尝试在 #3 中向上/向下拖动,您会看到第一个图像回到了它在 Feed 中的位置。
最后,如果您将图像向上/向下拖动超过某个阈值,则会将其关闭并再次显示 Feed。
这就是我认为在概念上正在发生的事情,如果这是正确的方法,我想确认一下(下面的这些项目符号不映射到上面的项目符号):
当用户点击图像时,将该 imageView 添加为 table view 的容器视图的子视图,但将其添加到完全相同的位置,以便看不到 imageView 从单元格到主视图的移动。
然后将该图像移动到屏幕中心的动画。同时降低table view的alpha,使其在imageView到达屏幕中心的同时达到0。
一旦图像到达屏幕中心,推送模态视图控制器而不对其进行动画处理,并将 imageView 添加为模态视图控制器视图的子视图(上面的效果 #6)
图像的任何拖动都会降低模态视图控制器的 alpha 并增加 Feed 表视图的 alpha(上面的效果 #3),并且拖动到某个阈值以上会触发隐藏图库并再次显示 Feed 的动画(效果 #8以上)
问题:
我在正确的轨道上吗?如果是这样,我如何将单元格中的 imageView 带入前视图 - 并将其保持在相同的位置?
当您滑动到另一个图像时,原始图像将“恢复”到其在表格视图单元格中的原始位置。这实际上只是将一个 imageView 从一个视图移动到下一个视图吗?您如何将其发送回原始单元格 - 当用户点击图像时保留指向该单元格的指针,然后执行类似的操作
customCell.imageViewContainerView addSubview:originalImageView
?如果用户滑回原始图像,这是否需要反转?
这整件事对我来说似乎是一个不平凡的实现,但我认为效果很棒,而且我也很好奇它是如何完成的。我是不是想多了,实际上有一个非常简单的方法可以做到这一点,或者我是否应该向编写 FB 应用程序的人提供道具?