J'ai du mal à décrire ce problème avec des mots, c'est pourquoi j'ai fait une vidéo (45 secondes) pour l'illustrer. Voici un aperçu des questions, veuillez les consulter sur Vimeo: http://vimeo.com/epologee/perfect-crossfade
La question de la création d'un fondu enchaîné sans faille ou de la dissolution de deux images ou formes m'a été répétée dans un certain nombre de domaines au cours de la dernière décennie. D'abord en montage vidéo, puis en animation Flash et maintenant en programmation iOS. Lorsque vous commencez à le googler, il existe de nombreuses solutions de contournement, mais je veux vraiment résoudre ce problème sans pirater cette fois.
Le résumé:
Quel est le nom de la technique ou de la courbe à appliquer au fondu enchaîné de deux images bitmap semi-transparentes de même couleur, si vous souhaitez que la transparence résultante corresponde à l'original de l'une ou l'autre?
Existe-t-il une fonction (mathématique) pour calculer les valeurs nécessaires de transparence partielle / alpha pendant le fondu?
Existe-t-il des langages de programmation qui ont ces fonctions en tant que préréglage, similaires aux ease in
, ease out
ou ease in out
fonctions trouvées dans ActionScript ou Cocoa?
Mise à jour: En plus de la vidéo, j'ai fait un exemple de projet (nécessite Xcode et iOS SDK) et l'ai posté sur github. Il montre la même animation que la vidéo mais cette fois avec des carrés: https://github.com/epologee/StackOverflow-Example-Code
Réponses:
J'ai bien peur que ce ne soit pas possible. C'est ainsi que la transparence est calculée lorsque deux objets se superposent: http://en.wikipedia.org/wiki/Alpha_compositing
L'un des objets doit avoir une opacité de 1 si vous ne souhaitez pas que la zone de superposition soit visible à travers.
la source
Je ne sais pas quel pourrait être le nom dans le domaine du montage vidéo, mais j'appellerais la courbe une courbe en S ou une courbe sigmoïde . Il devrait être très simple de produire le fondu enchaîné que vous recherchez dans iOS en utilisant la fonction de synchronisation kCAMediaTimingFunctionEaseInEaseOut de Core Animation . Animez simplement la
alpha
propriété de deux vues dans des directions opposées (une 0-> 1, une 1-> 0) en utilisant cette fonction de synchronisation:Remarque: vous devez vraiment utiliser les méthodes d'animation basées sur les blocs au lieu des méthodes de commodité d'UIView. J'ai utilisé les méthodes d'UIView ci-dessus parce que c'est très facile à comprendre et facile à taper de la mémoire. Cependant, l'utilisation de blocs n'est pas beaucoup plus difficile.
Addendum: si vous n'aimez pas UIViewAnimationEaseInOut, vous pouvez créer votre propre fonction de synchronisation comme décrit dans Timing, Timespaces et CAAnimation . C'est un peu plus avancé que la simple animation illustrée ci-dessus, mais cela vous donne tout le contrôle que vous souhaitez.
la source
kCAMediaTimingFunctionEaseInEaseOut
. Auriez-vous pu direUIViewAnimationCurveEaseInOut
? Le problème avec cette courbe est cependant le même (creux au milieu), car à tout moment, les deux valeurs alpha dans un simple ajout seront égales1.0
, où comme dans ma courbe ajustée manuellement, elle doit dépasser1.0
pour obtenir les résultats souhaités .initialTransparency
valeur, cela ne sert à rien. Vous ne savez pas quoi essayer ensuite?En infographie, ce type de fonction est appelé smoothstep . Lorsqu'il est utilisé pour un fondu enchaîné, il détermine la valeur alpha globale de la composition.
Si les images d'entrée ont un canal alpha, vous devez d'abord vous assurer que l'alpha est prémultiplié . Ensuite, vous pouvez faire la composition du fondu enchaîné directement, en utilisant le smoothstep
alpha
sur chaque canal [X = A*alpha + B*(1-alpha)
], et vous attendre à des résultats raisonnables.la source
Vous pouvez utiliser la fonction de décroissance exponentielle:
Votre graphique ressemble plus à:
la source
1 - Alpha1(time)
équation ne prendra pas en charge le creux, car deux images mélangées à 0,5 alpha ne donneront pas lieu à une image composée avec 1,0 alpha. Les courbes personnalisées que j'ai dessinées ne sont pas reflétées verticalement.