2013-03-29 35 views
7

在Facebook的應用程序,當你的飼料,你點擊一張照片進行查看,一些事情發生了:Facebook應用程序樣式的照片從UITableView中放大/訂閱

  1. 圖像動畫/移動到屏幕中心,無論它在桌面視圖中的當前位置(中間,部分離開屏幕朝向底部,頂部,等等)

  2. 隨着圖像移動到屏幕中心,表格視圖的其餘部分淡出(alpha = 0)

  3. 向上或向下拖動圖像時,表格視圖的alpha值會按比例(我認爲)從屏幕中心恢復到圖像的偏移量

  4. 此時您會注意到,在飼料,圖像曾經是的地方,現在是空的(給你的印象,你'帶來'的形象提前)。通過向上/向下拖動圖像可以看到這一點,並且您可以在圖像後面看到Feed/table view。

  5. 在#2之後,如果圖像已經成比例(即,Feed/table view上的圖像預覽是按比例縮放的,沒有任何裁剪),那麼它只是移動到中心。如果圖像根本沒有剪裁(因爲它太高等,無法正確放入Feed中),則圖像的其餘部分會在移動到屏幕中心的同時顯示出來。

  6. 一旦圖像移動到屏幕的中心,畫廊視圖控制器元件顯示(完成按鈕,像/註釋按鈕等)

  7. 繼#4,如果你滑動到另一圖像(在全屏圖像視圖中左/右滑動到同一專輯中的另一張圖像),然後在#3中嘗試向上/向下拖動,您會看到第一張圖像回到Feed中的位置。

  8. 最後,如果您向上/向下拖動圖像超過某個閾值,它將被解散,並且Feed會再次顯示。

這是我認爲在概念上發生的事情,我想一定確認,如果這是正確的做法(以下這些子彈沒有映射到子彈以上):

  1. 當用戶點擊圖像時,將該圖像視圖添加爲表格視圖容器視圖的子視圖,但將其添加到完全相同的位置,以便不會看到圖像視圖從單元格移動到主視圖中。

  2. 然後將該圖像的移動動畫到屏幕中心。同時,減少表視圖的alpha值,使其在imageView到達屏幕中心的同時達到0。

  3. 一旦圖像到達屏幕的中心,推模態的視圖控制器沒有動畫它,並添加ImageView的作爲模態視圖控制器的視圖的子視圖(效果#6的上方)

  4. 任何拖動的圖像會減少模態視圖控制器的alpha值並增加Feed視圖視圖(上面的效果#3)的alpha值,並拖動到特定閾值以上會觸發隱藏該圖庫並再次顯示Feed的動畫(上面的效果#8)

問題:

  1. 我在正確的軌道上嗎?如果是這樣,我如何將cellView從單元格移入前視圖 - 並將其保持在相同的位置?

  2. 當您滑動到另一個圖像時,原始圖像被「恢復」到表格視圖單元格中的原始位置。這實際上只是將一個imageView從一個視圖移動到另一個視圖?如何將它發送回原始單元格 - 當用戶點擊圖像時保留指向該單元格的指針,然後執行類似customCell.imageViewContainerView addSubview:originalImageView的操作?如果用戶滑回原始圖像,這需要顛倒過來?

這整個事情對我來說似乎是一個不平凡的實現,但我覺得效果真棒,我也爲它是如何做該死的好奇。我是否在推翻它,並且實際上有一個非常簡單的方法來做到這一點,或者我是否正確地爲任何編寫FB應用程序的人提供道具?

回答

2

我在正確的軌道上嗎?如果是這樣,我如何將cellView從單元格移入前視圖 - 並將其保持在相同的位置?

我認爲你是正確的概念步驟。從單元中獲取imageView並將其添加到控制器視圖並不困難。您可以使用如下方法:

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

以獲取imageview的正確位置。

當您滑動到另一個圖像時,原始圖像被「恢復」到表格視圖單元格中的原始位置。這實際上只是將一個imageView從一個視圖移動到另一個視圖?如何將它發送回原始單元格 - 當用戶點擊圖像時保留指向該單元格的指針,然後執行類似customCell.imageViewContainerView的addSubview:originalImageView?如果用戶滑回原始圖像,這需要顛倒過來?

我認爲這是由畫廊和表視圖控制器之間的某種協議。也許它只是隱藏/顯示圖像,而圖庫中的圖像實際上是一個不同的對象。 無論如何,如果你想使用相同的圖像視圖,你可以通過兩個控制器之間的協議發送對象。

希望這會有所幫助;)我認爲這個關鍵是在convertRect方法中。

相關問題