Ultravisual aplikacja iOS podobna do animacji za pomocą UICollectionViewLayout bez nakładania się obrazów

Question

Stworzyłem ten sam komponent, który obecnie jest dostępny w aplikacji UltraVisual iOS do przeglądania rekordów w animacji takich jak efekty parallax. Poniżej znajduje się załączony obraz GIF, aby uzyskać więcej informacji. Chcę tę samą animację, co w podanym adresie URL filmu.

W tym celu znalazłem dwa adresy URL GitHub, które są prawie takie same, ale nie spełniają tej samej animacji, która była używana w aplikacji iOS na numer UltraVisual. Aby uzyskać więcej informacji, znajdź poniżej dwa adresy URL dla tego samego.

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

Problem:
Teraz jestem w obliczu problemu, w jaki sposób zmniejszyć obraz skupiony rozważa dolną część, która pozostaje statyczna. Pierwszy skupiony obraz powinien się skurczyć od góry (dolna część pozostaje statyczna) i jednocześnie następny obraz zostanie skupiony, biorąc pod uwagę drugi obraz, który pozostaje statyczny.

Aktualny Kod:

- (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]; 
} 

ja nie zmieniło istniejącego kodu (https://github.com/fdzsergio/SFFocusViewLayout/tree/2.0.0) SFFocusLayout biblioteki i tutaj jest kod, na którym dokonano zmian tak daleko. W tym celu wspomniałem o komentarzu w kodzie, w którym czuję, że rozwiązanie leży, ale nie mogę odnieść sukcesu, ponieważ mam problem z ostatnich 3 do 4 dni.

Proszę mi pomóc i dzięki z góry.

Answer 1

Jeśli chcesz osiągnąć animacji jak UltraVisual aplikacji.Zmodyfikowałem metodę prepareLayout w RPSlidingMenu.

Poniżej przedstawiamy zmiany muszą w prepareLayout metody w pliku RPSlidingMenuLayout.m

Konieczność zmiany dla pierwszej klatki komórek:

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); 
} 

Na drugą komórkę, ale nie dla ostatniej komórki:

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); 
} 

Nie trzeba zmieniać we wszystkich innych ramkach komórek ..

Możesz zobaczyć animację w załączonym gif.

nadzieję, że to pomoże ...

Answer 2

Oto co bym zrobił.

Utwórz UIScrollView i umieść w nim swój UIImage. Daj im wszystkie jednakowo duże rozmiary, z wyjątkiem tego, który ma być większy, oczywiście musi być większy. Powinieneś teraz móc ładnie przewijać.

Teraz musisz napisać jakiś kod.

Mieć odwołanie do każdego UIImage.

Powinieneś uzyskać origin.y obrazu górnego i sprawdzić jego pozycję podczas przewijania. Kiedy position.origin.y znajduje się powyżej UIView.frame.height, wiesz, że musisz go zmniejszyć. Następnie zmniejsz obraz dla każdego piksela przewijanego nad widokiem. Poniższy obrazek będzie rósł dla każdego piksela, który powyższy obraz jest powyżej widoku.

Można wdrożyć metody delegatów z UIScrollView znaleźć w linku poniżej. Do pozycji obrazów podczas przewijania.

Należy zachować ostrożność podczas konfigurowania interfejsu UiImages z ograniczeniami i nie używać funkcji Autolayout. Czasami trudno jest zmienić wartości ustawione na układ automatyczny.

UiScrollView Delegate methods