Animer une collectionview swift

Question

Bonjour J'essaie d'animer un CollectionView. Il faut changer la position x et sa largeur.

UIView.animate(withDuration: 1, delay: 0, options: .beginFromCurrentState, animations: { 
    collectionView.frame = CGRect(x: 500, y: 0, width: 1000, height: 700) 
}) 

Mais le problème est que l'image dans la cellule ne se redimensionne pas, et je pense que la cellule aussi. Avez-vous une solution pour cela?

Answer 1

La taille de UICollectionViewCell est indépendante de l'image du fichier UICollectionView parrent.

vous pouvez peut-être en fait "zoom" sur la couche

var transformation = CGAffineTransform.identity 
    let translate = CGAffineTransform(translationX: 2, y: 2) 
    let scale = CGAffineTransform(scaleX: 2, y: 2) 
    transformation = scale.concatenating(translate) 
    UIView.animate(withDuration: 0.15, animations: { 
     self.collectionView.transform = transformation 
    }) 

Peut-être invalidateLayout appel peut vous aider. Également utilisez-vous customflowlayout

Answer 2

1. Créez une disposition de flux personnalisé simple.

2. Affectez cette classe de disposition de flux à votre vue de collection dans le storyboard.

   class CustomFlowLayout: UICollectionViewFlowLayout { 
       override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool { 
        return true 
       } 
   } 
   

   Et il est préférable d'animer les contraintes que l'image. Pour ce faire:

3. Faire la sortie de la largeur et les contraintes principales.
4. Modifier leur constante dans le bloc d'animation UIView. N'oubliez pas d'appeler self.layoutIfNeeded() à la fin du bloc d'animations.

Answer 3

Dans le contrôleur de vue, si vous utilisez story-board, connectez UICollectionviewFlowLayout (collectionViewFlowLayout dans mon exemple) en utilisant IBOutlet, vue contrainte de largeur de collection (collectionViewWidth dans mon exemple) IBOutlet et UICollectionView comme IBOutlet (collectionView dans mon exemple) . Vous pouvez modifier le cadre de la vue de la collecte et les cellules simultanément avec les éléments suivants:

DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 5, execute: { 
    self.width = 400 
    self.height = 400 
    self.collectionView.performBatchUpdates({ 
    self.collectionViewFlowLayout.invalidateLayout() 
    self.collectionView.setCollectionViewLayout(self.collectionViewFlowLayout, animated: true) 
    }, completion: { _ in }) 
}) 

DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 5, execute: { 
    self.collectionViewWidth.constant = 50 
    UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseOut, 
          animations: self.view.layoutIfNeeded, completion: nil) 
}) 

Vous devez déclarer width et height var comme propriétés de classe avec une valeur initiale de 100 par exemple. Ceci est ensuite changé dans le code ci-dessus. Cela est rendu possible grâce à la mise en œuvre ci-dessous. Notez que vous devez adopter le protocole UICollectionViewDelegateFlowLayout.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 
    return CGSize(width: width, height: height) 
    } 

Answer 4

Le problème que j'ai maintenant est un mauvais effet pendant la transition.

La cellule sont mis comme ça:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
{ 
    return CGSize(width: collectionView.frame.width, height: collectionView.frame.height) 
} 

et le code pour le changement de la CollectionView principale contrainte:

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) 
{ 
    UIView.animate(withDuration: 1, delay: 0, options: .beginFromCurrentState, animations: { 
      collectionView.collectionViewLayout.invalidateLayout() 
      self.allViewCVLeadingConstraint.constant = 1000 
      self.layoutIfNeeded() 
     }, completion: nil) 
}