Applicazione iOS ultravisuale come animazione utilizzando UICollectionViewLayout senza sovrapposizione di immagini

Question

Ho creato lo stesso componente attualmente disponibile nell'applicazione UltraVisual iOS per la visualizzazione dei record in animazione come gli effetti parallax. Si prega di trovare la seguente immagine GIF allegata per maggiori informazioni. Voglio la stessa animazione di un dato URL video.

Per questo ho trovato i due URL GitHub che è quasi uguale ma non soddisfa la stessa animazione utilizzata nell'applicazione iOS UltraVisual. Per ulteriori informazioni, si prega di trovare il sotto due URL per lo stesso.

URL: https://github.com/fdzsergio/SFFocusViewLayout/tree/2.0.0
URL: https://github.com/RobotsAndPencils/RPSlidingMenu

Problema:
In questo momento mi sto affrontando il problema di come ridurre l'immagine focalizzata considerando la parte inferiore che rimangono statiche. La prima immagine focalizzata dovrebbe restringersi dall'alto (la parte inferiore rimane statica) e allo stesso tempo l'immagine successiva si focalizzerà considerando la parte superiore della seconda immagine che rimane statica.

Codice attuale:

- (void)prepareLayout { 

NSMutableArray *cache = [NSMutableArray array]; 

NSInteger numberOfItems = [self.collectionView numberOfItemsInSection:0]; 

// last rect will be used to calculate frames past the first one. We initialize it to a non junk 0 value 
CGRect frame = CGRectZero; 
CGFloat y = 0; 
CGFloat footerTop = 0; 

for (NSUInteger item = 0; item < numberOfItems; item++) { 
    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:item inSection:0]; 
    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath] 
    ; 
    // Important because each cell has to slide over the top of the previous one 
    attributes.zIndex = item; 

    // Initially set the height of the cell to the standard height 
    CGFloat height = self.standardHeight; 

    if (indexPath.item == self.currentFocusedItemIndex) { 
     // The featured cell 
     CGFloat yOffset = self.standardHeight * self.nextItemPercentageOffset; 
     y = self.collectionView.contentOffset.y - yOffset; 
     //y = yOffset - self.standardHeight * self.nextItemPercentageOffset; 

     height = self.focusedHeight; 

     //*********CURRENTLY WORKING ON THIS LINE TO ACHIEVE THE REQUIRED ANIMATION ****************** 
     //attributes.transform = CGAffineTransformTranslate(attributes.transform, 0, -self.collectionView.contentOffset.y+self.dragOffset); //Solution might be here… 

    } else if (indexPath.item == (self.currentFocusedItemIndex + 1) && indexPath.item != numberOfItems) { 

     // The cell directly below the featured cell, which grows as the user scrolls 
     CGFloat maxY = y + self.standardHeight; 
     height = self.standardHeight + MAX((self.focusedHeight - self.standardHeight) * self.nextItemPercentageOffset, 0); 
     y = maxY - height; 
     //attributes.transform = CGAffineTransformTranslate(attributes.transform, 0, -self.collectionView.contentOffset.y+self.dragOffset); 
    } else { 
     y = frame.origin.y + frame.size.height; 
     //attributes.transform = CGAffineTransformTranslate(attributes.transform, 0, -self.collectionView.contentOffset.y+self.dragOffset); 
    } 

    frame = CGRectMake(0, y, self.collectionView.frame.size.width, height); 
    attributes.frame = frame; 

    [cache addObject:attributes]; 
    y = CGRectGetMaxY(frame); 

    if (item == numberOfItems-1) { 
     footerTop = CGRectGetMaxY(frame); 
    } 
}; 

for (NSUInteger item = 0; item < numberOfItems; item++) { 
    if (item == 0) { 
     footerTop = footerTop + self.focusedHeight; 
    } else { 
     footerTop = footerTop + self.standardHeight; 
    } 
} 

CGSize footerSize = [self footerReferenceSizeInSection:0]; 
if (footerSize.height > 0) { 
    UICollectionViewLayoutAttributes *footerAttributes = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionFooter withIndexPath:[NSIndexPath indexPathForItem:0 inSection:0]]; 
    footerAttributes.zIndex = 0; 
    footerAttributes.frame = CGRectMake(0, footerTop, footerSize.width, footerSize.height); 
    self.footerAttributes[0] = footerAttributes; 
} 
self.cachedLayoutAttributes = [cache copy]; 
} 

avevo cambiato il codice esistente di (https://github.com/fdzsergio/SFFocusViewLayout/tree/2.0.0) SFFocusLayout biblioteca e qui è il codice su cui ho fatto le modifiche finora. Per questo ho accennato al commento nel codice in cui sento la soluzione bugie ma incapace di avere successo mentre sto lottando da 3 a 4 giorni.

Per favore aiutatemi e grazie in anticipo.

Answer 1

Se si vuole raggiungere l'animazione come UltraVisual app.Ho modificato il metodo prepareLayout in RPSlidingMenu.

Qui di seguito sono le modifiche devono in prepareLayout metodo nel file di RPSlidingMenuLayout.m

necessità di cambiare per il primo fotogramma delle cellule:

if (indexPath.row == topFeatureIndex) 
{ 
    // our top feature cell 
    CGFloat yOffset = normalHeight * topCellsInterpolation; 
    yValue = self.collectionView.contentOffset.y - yOffset; 
    CGFloat amountToGrow = MAX(featureHeight * topCellsInterpolation, 0); 
    attributes.frame = CGRectMake(0.0f, self.collectionView.contentOffset.y -amountToGrow , screenWidth, featureHeight); 
} 

Per Seconda cella, ma non per ultima cella:

else if (indexPath.row == (topFeatureIndex + 1) && indexPath.row != numItems) 
{ 
     yValue = lastRect.origin.y + lastRect.size.height; 
     CGFloat amountToGrow = MAX((featureHeight - normalHeight) *topCellsInterpolation, 0); 
     CGFloat bottomYValue = yValue + normalHeight + amountToGrow; 
     NSInteger newHeight = normalHeight + amountToGrow; 
     attributes.frame = CGRectMake(0.0f, 0.0f , screenWidth, screenWidth); 
} 

Nessuna necessità di cambiare per tutti gli altri fotogrammi della cella ..

È possibile visualizzare l'animazione nelle gif allegate.

Spero che vi aiuterà a ...

Answer 2

Ecco cosa farei.

Crea un UIScrollView e metti il ​​tuo UIImage al suo interno. Date loro tutte le stesse dimensioni, tranne quella superiore, che deve essere ovviamente più grande. Ora dovresti essere in grado di scorrere bene.

Ora è necessario scrivere del codice.

Avere un riferimento a ciascuna UIImmagine.

Si dovrebbe ottenere l'origine dell'immagine superiore e controllare la posizione mentre si scorre. Quando position.origin.y è sopra UIView.frame.height sai che devi ridurlo. Quindi quindi riduci l'immagine per ogni pixel che scorri sopra la vista. L'immagine sotto crescerà per ogni pixel dell'immagine sopra sopra la vista.

È possibile implementare i metodi delegati da UIScrollView trovati nel collegamento sottostante. Per la posizione delle immagini mentre scorri.

Fai attenzione a come imposta UiImages con i vincoli e prova a non utilizzare l'Autolayout. Può essere difficile cambiare i valori impostati a volte con il layout automatico.

UiScrollView Delegate methods