Comment appliquer une transformation de perspective à une UIView?

Je cherche à effectuer une transformation de perspective sur un UIView (comme vu dans coverflow)

Est-ce que quelqu'un sait si c'est possible?

J'ai cherché à utiliser CALayeret à parcourir tous les podcasts pragmatiques de Core Animation, mais je ne sais toujours pas comment créer ce type de transformation sur un iPhone.

Toute aide, pointeur ou exemple d'extrait de code serait vraiment apprécié!

Comme l'a dit Ben, vous devrez travailler avec le UIView'scalque, en utilisant un CATransform3Dpour effectuer le layer's rotation. L'astuce pour faire fonctionner la perspective, comme décrit ici , est d'accéder directement à l'une des matrices cellsdu CATransform3D(m34). Les mathématiques matricielles n'ont jamais été mon truc, donc je ne peux pas expliquer exactement pourquoi cela fonctionne, mais ça marche. Vous devrez définir cette valeur sur une fraction négative pour votre transformation initiale, puis appliquer vos transformations de rotation de calque à cela. Vous devriez également pouvoir effectuer les opérations suivantes:

Objectif c

UIView *myView = [[self subviews] objectAtIndex:0];
CALayer *layer = myView.layer;
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / -500;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 45.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
layer.transform = rotationAndPerspectiveTransform;

Swift 5.0

if let myView = self.subviews.first {
    let layer = myView.layer
    var rotationAndPerspectiveTransform = CATransform3DIdentity
    rotationAndPerspectiveTransform.m34 = 1.0 / -500
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 45.0 * .pi / 180.0, 0.0, 1.0, 0.0)
    layer.transform = rotationAndPerspectiveTransform
}

qui reconstruit la transformation de calque à partir de zéro pour chaque rotation.

Un exemple complet de ceci (avec code) peut être trouvé ici , où j'ai implémenté une rotation tactile et une mise à l'échelle sur quelques-uns CALayers, sur la base d'un exemple de Bill Dudney. La dernière version du programme, tout en bas de la page, implémente ce type d'opération de perspective. Le code doit être assez simple à lire.

Le sublayerTransformauquel vous faites référence dans votre réponse est une transformation qui est appliquée aux sous-couches de votre UIView's CALayer. Si vous n'avez pas de sous-couches, ne vous en faites pas. J'utilise le sublayerTransform dans mon exemple simplement parce qu'il y en a deux CALayerscontenus dans le même calque que je tourne.

Vous ne pouvez utiliser que les transformations Core Graphics (Quartz, 2D uniquement) directement appliquées à la propriété de transformation d'UIView. Pour obtenir les effets dans le coverflow, vous devrez utiliser CATransform3D, qui sont appliqués dans l'espace 3D, et peuvent donc vous donner la vue en perspective que vous souhaitez. Vous ne pouvez appliquer CATransform3D qu'aux calques, pas aux vues, vous devrez donc passer aux calques pour cela.

Découvrez l'exemple "CovertFlow" fourni avec Xcode. C'est uniquement pour mac (c'est-à-dire pas pour iPhone), mais beaucoup de concepts se transfèrent bien.

Pour compléter la réponse de Brad et fournir un exemple concret, j'emprunte à ma propre réponse dans un autre article sur un sujet similaire. Dans ma réponse, j'ai créé un simple terrain de jeu Swift que vous pouvez télécharger et jouer avec , où je montre comment créer des effets de perspective d'une UIView avec une hiérarchie simple de couches, et je montre des résultats différents entre l'utilisation transformetsublayerTransform . Vérifiez-le.

Voici quelques images du post:

Vous pouvez obtenir un effet carrousel précis à l'aide du SDK iCarousel.

Vous pouvez obtenir un effet de flux de couverture instantané sur iOS en utilisant la merveilleuse et gratuite bibliothèque iCarousel. Vous pouvez le télécharger sur https://github.com/nicklockwood/iCarousel et le déposer dans votre projet Xcode assez facilement en ajoutant un en-tête de pontage (il est écrit en Objective-C).

Si vous n'avez pas ajouté de code Objective-C à un projet Swift auparavant, procédez comme suit:

• Téléchargez iCarousel et dézippez-le
• Allez dans le dossier que vous avez décompressé, ouvrez son sous-dossier iCarousel, puis sélectionnez iCarousel.h et iCarousel.m et faites-les glisser dans la navigation de votre projet - c'est le volet gauche dans Xcode. Juste en dessous, Info.plist va bien.
• Cochez "Copier les éléments si nécessaire", puis cliquez sur Terminer.
• Xcode vous demandera le message "Voulez-vous configurer un en-tête de pontage Objective-C?" Cliquez sur "Créer un en-tête de pontage" Vous devriez voir un nouveau fichier dans votre projet, nommé YourProjectName-Bridging-Header.h.
• Ajoutez cette ligne au fichier: #import "iCarousel.h"
• Une fois que vous avez ajouté iCarousel à votre projet, vous pouvez commencer à l'utiliser.
• Assurez-vous de vous conformer aux protocoles iCarouselDelegate et iCarouselDataSource.

Exemple de code Swift 3:

    override func viewDidLoad() {
      super.viewDidLoad()
      let carousel = iCarousel(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
      carousel.dataSource = self
      carousel.type = .coverFlow
      view.addSubview(carousel) 
    }

   func numberOfItems(in carousel: iCarousel) -> Int {
        return 10
    }

    func carousel(_ carousel: iCarousel, viewForItemAt index: Int, reusing view: UIView?) -> UIView {
        let imageView: UIImageView

        if view != nil {
            imageView = view as! UIImageView
        } else {
            imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 128, height: 128))
        }

        imageView.image = UIImage(named: "example")

        return imageView
    }