UICollectionVIEW: Animiere Zellen beim Scrollen in

Question

Ich möchte Elemente in meinem UICollectionView animieren, um anzuzeigen, wie der Benutzer durch die Liste scrollt (ich verwende eine Unterklasse von UICollectionViewFlowLayout).

ich die Position im Layout Manager angeben, was würde Ich mag Lage sein, auch ein erstes transformieren und haben, dass zum richtigen Zeitpunkt in einer Animation angewandt (wenn die Zelle zuerst auf dem Bildschirm erscheint) zu tun ist, zu spezifizieren. Um den Effekt zu sehen, den ich meine, sieh dir die Google Plus App auf iOS an. Idealerweise eine andere Transformation, abhängig vom Ort der Zelle.

Ich kann nicht finden, einen Weg zu finden, wenn eine Zelle angezeigt wird (kein Äquivalent von willDisplayCell, wie es auf UITableView ist) oder irgendwelche Hinweise auf, wo dafür zu gehen.

Irgendwelche Vorschläge?

Sie können nur über die Animation in Google Plus in diesem Screenshot entziffern:

Auch auf dem iPad einen Blick auf iPhoto nehmen. Ich weiß nicht, ob sie eine UIcollectionView verwenden (wahrscheinlich nicht, wie es bei iOS5 funktioniert), aber das ist die Art, wenn ich nach einem Effekt suche, die Fotos scheinen von rechts hereinzufliegen.

Answer 1

Sie können diesen Effekt unabhängig von einem benutzerdefinierten Layout erzielen.

soll, wird aus der Warteschlange entfernt innen collectionView:cellForItemAtIndexPath:

Wenn eine Zelle Der Code Animation geht, wird seine frame zu setzen, was in Ihrem Layout angegeben ist. Sie können es in einer temporären Variablen als letzte frame für die Zelle speichern. Sie können dann cell.frame auf eine Ausgangsposition außerhalb des Bildschirms einstellen und dann zur gewünschten Endposition animieren. Etwas entlang der Linien von:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { 

    UICollectionView *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath]; 

    CGRect finalCellFrame = cell.frame; 
    //check the scrolling direction to verify from which side of the screen the cell should come. 
    CGPoint translation = [collectionView.panGestureRecognizer translationInView:collectionView.superview]; 
    if (translation.x > 0) { 
     cell.frame = CGRectMake(finalCellFrame.origin.x - 1000, - 500.0f, 0, 0); 
    } else { 
     cell.frame = CGRectMake(finalCellFrame.origin.x + 1000, - 500.0f, 0, 0); 
    } 

    [UIView animateWithDuration:0.5f animations:^(void){ 
     cell.frame = finalCellFrame; 
    }]; 

    return cell; 
} 

Der obige Code wird animieren Zellen auf einer horizontalen UICollectionView, vom oberen Rand des Bildschirms kommt, und von beiden Seiten, abhängig von der Bewegungsrichtung. Sie können auch die aktuelle indexPath überprüfen, damit Zellen von verschiedenen Positionen in komplizierteren Layouts animiert werden, andere Eigenschaften zusammen mit dem Rahmen animieren oder eine Transformation anwenden.

Answer 2

Sie müssen initialLayoutAttributesForAppearingItemAtIndexPath: in Ihrem Sammlungsansichtslayout überschreiben. Hier können Sie ein beliebiges Attribut für das Element des Layoutattributs (einschließlich der Transformation) festlegen, das nach dem Erscheinen der Zelle zu den tatsächlichen Attributen animiert wird.

Wenn das Standard-Layoutattribut-Objekt Ihnen nicht genügend Optionen bietet, können Sie es unterklassifizieren, zusätzliche Attribute hinzufügen und applyLayoutAttributes: in Ihrer Zelle überschreiben, um die zusätzlichen Eigenschaften aufzunehmen.

Dies funktioniert nur, wenn Sie der Sammlungsansicht Zellen hinzufügen.

Um Transformationen auf Zellen anzuwenden, während Sie in der Sammlungsansicht nach unten scrollen, würde ich sie entweder direkt auf die Zelle anwenden (unter cellForItem ...) oder in den Layoutattributen, vielleicht eine Eigenschaft namens initialTransform. Wenn Sie die Layoutattribute auf die Zelle anwenden, überprüfen Sie die initialTransform, wenden Sie sie an, legen Sie sie dann auf identity fest und lösen Sie eine Animation aus, um zur Identitätstransformation zu gelangen. Sie wird also nur angewendet, wenn die Zelle zum ersten Mal gescrollt wurde Bildschirm. Ich habe so etwas nicht implementiert, es ist nur eine Vermutung, wie ich es machen würde.

Answer 3

Wie Marc in einem Kommentar erwähnt, dass er am Ende eine Bildlaufansicht verwendet, möchte ich zeigen, wie man es mit einer Standardtabellenansicht macht. Es ist nicht der gleiche Effekt wie in Google +, aber könnte leicht angepasst werden.

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    static CGFloat duration = .5; 
    static NSUInteger xOffset = 50; 
    static NSUInteger yOffset = 200; 
    if(scrollDirection == STAScrollDirectionDown && lastAnimatedIndex < indexPath.row) 
    { 
     cell.frame = CGRectMake(cell.frame.origin.x - xOffset, cell.frame.origin.y+yOffset, cell.frame.size.width, cell.frame.size.height); 
     [UIView animateWithDuration:duration 
         animations:^{ 
      cell.frame = CGRectMake(cell.frame.origin.x + xOffset, cell.frame.origin.y - yOffset, cell.frame.size.width, cell.frame.size.height); 
     } completion:^(BOOL finished) { 
      lastAnimatedIndex = indexPath.row; 
     }]; 
    } 
} 

Kurz vor der Zelle angezeigt wird, wir einen Offset (und gegebenenfalls eine Rotation) zu jeder Zelle zugeordnet werden, und, als wir animieren es zurück auf die vorherigen Einstellungen.

---

ein wenig spannendes Beispiel:

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    CATransform3D rotation = CATransform3DMakeRotation((90.0*M_PI)/180, .0, 0.5, 0.5); 
    cell.contentView.alpha = 0.8; 
    cell.contentView.layer.transform = rotation; 
    cell.contentView.layer.anchorPoint = CGPointMake(0, 0.5); 

    [UIView animateWithDuration:.5 
        animations:^{ 
         cell.contentView.layer.transform = CATransform3DIdentity; 
         cell.contentView.alpha = 1; 
         cell.contentView.layer.shadowOffset = CGSizeMake(0, 0); 
        } completion:^(BOOL finished) { 
        }]; 
}