Pas de transition

#1

Bonjour à tous

Je bûche sur les transitions d’UIKit ; et ce n’est pas parce que c’est Noël :wink:
Je reprends le code proposé par Maxime dans le chapitre 1.3 de la formation avancée

    UIView.transition(with: ui_demoView, duration: 0.75, options: [.transitionCrossDissolve], animations: {
        self.ui_demoView.isHidden = true
    }, completion: nil)

J’ai essayé plusieurs options de transitions et aucune ne fonctionne ; la vue disparait sans animation particulière

Je suis avec Xcode 10.1 sous High Sierra et j’ai testé avec le simulateur et un iPhone 7 sous iOS 12

Quelqu’un a-t-il une idée ?
Merci ar avance

#2

Hello @delth7,

As-tu essayé de remplacer :

self.ui_demoView.isHidden = true

par :

self.ui_demoView.alpha = 0

?

Il me semble que le fait d’utiliser un “isHidden” ne permet pas de transition en fadeOut, mais à vérifier.

Tiens moi au courant,
Bonne soirée,

Alexandre

1 Like
#3

Merci Alexandre pour ta réponse
Ce n’est pas lié au fondu, le comportement est le même quelque soit la transition
L’idée d’utiliser alpha est bonne et même s’il y a une amélioration parce que maintenant la transition est visible (par exemple l’utilisation de la transition transitionCurlUp montre bien un mouvement de page), le comportement n’est pas complètement l’attendu : l’alpha s’applique sur un “fantôme” de la vue initiale et non sur sa forme animée (le mouvement de page par exemple)

#4

Je ne suis pas sûr d’avoir bien compris ton dernier message et ce que tu attends de la transition; tu souhaiterais un “fondu” sur la transition en cours ? Par exemple, que la page se tourne en disparaissant en fondu ?

Désolé,

#5

Tu n’as pas à être désolé, c’est toi qui cherche à m’aider…

Je cherche à faire ce que Maxime fait dans son cours sur les transitions : tout simplement à avoir une disparition de la vue (d’où le isHidden à true) avec une transition de type page qui tourne du bas vers le haut (d’où le transitionCurlUp)
L’utilisation de transitionCrossDissolve n’était qu’un autre exemple de transition qui ne fonctionne pas sur ma config :frowning: alors que semble bien fonctionner sur la démo de Maxime

#6

Ah oui, en effet, je viens d’aller voir la vidéo du cours pour me représenter ce que tu souhaitais faire.
Je test chez moi et je reviens vers toi d’ici quelques minutes.

A tout de suite,

EDIT: Je vois ce que tu veux dire, il manque la transition chez moi aussi. Je cherche une solution et je te tiens au courant :slight_smile:

#7

J’ai l’impression (et il me semble que j’avais déjà entendu ça quelque part, mais je ne sais plus où), que tout ce qui est mis dans le block “animations”

UIView.transition(with: ui_demoView, duration: 0.75, options: [.transitionCurlUp], animations: {
    // ici
})

est fait instantanément dès le lancement de l’application, alors que ce qui est fait dans le block de completion est effectué une fois l’animation terminée.

Ceci dit, je ne vois pas comment arriver au même résultat que @mbritto dans son exemple.
Peut-être que lui saura nous éclairer sur le pourquoi ?

Bonne soirée,

Alexandre

#8

Niet ! Le bloc animations: {} contient une description de l’état de la vue à la fin de l’animation.

La transition se fait progressivement en partant de l’état actuel de la vue, vers l’état décrit dans le bloc animations:

Voici un exemple qui fonctionne (je viens de le tester) :

class ViewController: UIViewController {
    
    let vueTest = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Préparation de la Vue Test avec du code
        vueTest.center = self.view.center
        self.view.addSubview(vueTest)
        vueTest.backgroundColor = UIColor.cyan
        
        // Animations
        UIView.transition(with: vueTest,
                          duration: 2.0,
                          options: [],
                          animations: {
              self.vueTest.center = CGPoint(x: 100.0, y: 100.0)
              self.vueTest.alpha = 0.2
        }, completion: { _ in self.vueTest.backgroundColor = UIColor.red} )
        
    }

}

Je commence par créer une vue par code. Son état initial est :

  • hauteur et largeur de 200 points.
  • couleur cyan
  • position au centre de l’écran

Puis, j’utilise UIView.animations pour lui dire que j’aimerais changer deux paramètres de l’état :

  • nouvelle position (100,100)
  • fixer la transparence à 0.2

iOS exécute UNE FOIS le bloc animations: {} pour savoir quelles valeurs doivent changer entre le début et la fin de l’animation, et interpole les valeurs intermédiaires en fonction du temps demandé.

J’ai ajouté une complétion pour exécuter un autre changement d’état à la fin de l’animation (la vue devient ROUGE).


EDIT : Je viens de voir dans la doc, que l’usage des méthodes d’animations UIVIEW.quelquechode est déconseillé

Apple recommande maintenant d’utiliser un autre mécanisme d’animation, plus récent :

https://developer.apple.com/documentation/uikit/uiviewpropertyanimator

Il faudra que je jette un regard dessus, quand j’aurais le temps …

#9

N’ayant acheté que les premières vidéos de Maxime, je n’ai pas accès à la formation avancée. Mais franchement, je ne comprend pas comment ton exemple peut fonctionner.

Comme je l’expliqué à Alexandre, la transition est progressive, passant d’un état A à un état B par petites étapes. Mais il n’y a aucune progressivité avec l’attribut .isHidden. C’est du tout ou rien… A la première étape de l’animation (1/60iéme de seconde après son lancement), la vue devient invisible, ce qui gâche complètement l’effet.

Alexandre a raison de te proposer de remplacer le .isHidden par une modification progressive de la transparence. Si tu veux vraiment effacer la vue de l’écran à la fin de l’animation, place le .isHidden dans la complétion.

#10

Merci @Draken pour ces informations.

Il me semble que j’avais lu ça quelque part, mais je ne sais plus où. Mon cerveau me joue peut-être des tours :joy:

Ceci étant dit, Maxime exécute bien ce code dans une de ses vidéos, et ça fonctionne.
En essayant de jouer sur l’alpha dans le bloc animation et ensuite de placer le isHidden dans la completion, l’effet n’est pas le même. En fait, ce que @delth7 essaye d’avoir, c’est simplement une page qui se tourne (curlUp) pour faire disparaître la vue, sans spécialement avoir de transition en fadeOut.

Bonne journée à tous les deux,

Alexandre

#11

La seule solution que j’ai trouvé pour l’instant, est de mettre la view sur alpha 0 avant de commencer la transition.

    self.ui_view.alpha = 0
    UIView.transition(with: ui_view, duration: 0.75, options: .transitionCurlUp, animations: {
    }) { (true) in
        self.ui_view.isHidden = true
    }
#12

J’ai testé ton code, cela ne fonctionne pas chez moi …

#13

Bizarre, j’ai modifier pour en faire une fonctionne et ça fonction toujours chez moi.

Voici la fonction :

func transi(viewSelected:UIView) {
    viewSelected.alpha = 0
    UIView.transition(with: viewSelected, duration: 0.75, options: .transitionCurlUp, animations: {
    }) { (true) in
        viewSelected.isHidden = true
    }
}

et voici le résultat :

#14

C’est pas banal, ça … Tu utilises des contraintes pour positionner la vue ? Ou c’est juste du code ?

EDIT : Effectivement, cela fonctionne avec un nouveau projet où la vue est crée et alignée avec des contraintes Storyboard, au lieu de quelque lignes de code !

#15

La vue et le bouton est fait a partir du storyboard.
Le seule code que j’ai, est celui que je t’ai donné et bien sur l’outlet qui a été créé pour la vue et l’action pour le bouton.

C’est vrai que, je ne me suis pas embêté, c’est sur un programme minimalisme pour tester et voir d’ou pouvais venir le problème.

#16

En fait, le problème venait de mon premier programme de test ultra-minimaliste. J’avais tout mis dans le viewDidLoad, sans utiliser de bouton. Pour une raison qui m’échappe l’animation de la page qui se tourne ne fonctionne pas à partir du viewDidLoad, alors que d’autres animations comme la modification de la transparence ou le changement de position marchent parfaitement. C’est bon si on l’appelle à partir d’une méthode d’action.

C’est curieux comme comportement …

#17

C’est un comportement normal car, l’animation est déjà faite quand tu la vois avec le viewDidLoad. il faut que tu utilise la fonction viewDidAppear pour voir l’animation.

#18

Effectivement ça ressemble à un bug sur iOS 12. Je viens de vérifier la doc est rien n’a été changé par Apple donc le code de mon cours devrait toujours fonctionner. Il semble que les transitions fonctionnent toujours pour l’apparition des vues mais pas pour leur disparition.
Je te recommande d’utiliser au maximum les UIPropertyAnimator à la place des anciennes comme je le dis dans cette vidéo : https://www.purplegiraffe.fr/courses/404767/lectures/6191215
Ils sont destinés à remplacer les anciennes API mais ne sont disponibles qu’à partir de iOS 10. A l’époque où j’avais enregistré les vidéos les anciennes API faisaient encore sens, à l’heure actuelle autant basculer sur les dernières API qui sont plus sympas à utiliser en plus.

#19

Merci à tous pour vos contributions
Les explications de chacun m’ont rassuré sur le fait que j’avais bien compris le principe :wink:
La transition fonctionne dans le contexte d’un autre exercice proposé par Maxime, SecretNumber, sans que je puisse l’expliquer
Maxime nous dira quand il aura recompilé le code de cet exemple (dans le chapitre 1.3 de son cours avancé) pour iOS12

#20

J’ai déjà recompilé et j’ai testé : j’ai le même problème que vous. Pourtant la doc n’indique aucun changement donc je pense que c’est un bug de iOS 12.
Dans tous les cas je pense que Apple va bientôt déprécier ces transitions au profit de ceci :