Die perfekte Überblendung

Ich finde es schwierig, dieses Problem in Worten zu beschreiben, weshalb ich ein Video (45 Sekunden) gemacht habe, um es zu veranschaulichen. Hier ist eine Vorschau der Fragen, bitte schauen Sie sie sich auf Vimeo an: http://vimeo.com/epologee/perfect-crossfade

Das Problem, eine makellose Überblendung oder Überblendung von zwei Bildern oder Formen zu erstellen, tauchte in den letzten zehn Jahren in einer Reihe von Bereichen immer wieder auf. Zuerst in der Videobearbeitung, dann in der Flash-Animation und jetzt in der iOS-Programmierung. Wenn Sie anfangen zu googeln, gibt es viele Problemumgehungen, aber diesmal möchte ich das wirklich ohne einen Hack lösen.

Die Zusammenfassung:
Wie lautet der Name der Technik oder Kurve, die beim Überblenden von zwei halbtransparenten, gleichfarbigen Bitmaps angewendet werden soll, wenn die resultierende Transparenz mit dem Original einer der beiden übereinstimmen soll?

Gibt es eine (mathematische) Funktion, um die notwendigen partiellen Transparenz- / Alpha-Werte während der Überblendung zu berechnen?

Gibt es Programmiersprachen , die diese Funktionen als Preset, ähnlich wie die haben ease in, ease outoder ease in outin Actionscript oder Kakao gefunden Funktionen?

Update: Zusätzlich zum Video habe ich ein Beispielprojekt erstellt (erfordert Xcode und iOS SDK) und es auf github gepostet. Es zeigt die gleiche Animation wie das Video, diesmal jedoch mit Quadraten: https://github.com/epologee/StackOverflow-Example-Code

Ich fürchte, das ist nicht möglich. So wird die Transparenz berechnet, wenn sich zwei Objekte überlagern: http://en.wikipedia.org/wiki/Alpha_compositing

Eines der Objekte muss eine Deckkraft von 1 haben, wenn der Überlagerungsbereich nicht durchsichtig sein soll.

Ich weiß nicht, wie der Name im Bereich der Videobearbeitung lauten könnte, aber ich würde die Kurve als S-Kurve oder Sigmoid-Kurve bezeichnen . Mit der Timing-Funktion kCAMediaTimingFunctionEaseInEaseOut von Core Animation sollte es sehr einfach sein, die gewünschte Überblendung in iOS zu erstellen . Animieren Sie einfach die alphaEigenschaft von zwei Ansichten in entgegengesetzten Richtungen (eine 0-> 1, eine 1-> 0) mit dieser Zeitfunktion:

[UIView beginAnimations:@"crossfade" context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
view1.alpha = 0.0;
view2.alpha = 1.0;
[UIView commitAnimations];

Hinweis: Sie sollten wirklich die blockbasierten Animationsmethoden anstelle der praktischen Methoden von UIView verwenden. Ich habe die oben beschriebenen Methoden von UIView verwendet, da sie sehr einfach zu verstehen und aus dem Speicher zu tippen sind. Die Verwendung von Blöcken ist jedoch nicht viel schwieriger.

Nachtrag: Wenn Ihnen UIViewAnimationEaseInOut nicht gefällt, können Sie Ihre eigene Timing-Funktion erstellen, wie in Timing, Timespaces und CAAnimation beschrieben . Das ist etwas fortgeschrittener als die oben abgebildete einfache Animation, bietet Ihnen jedoch alle gewünschten Steuerungsmöglichkeiten.

In der Computergrafik wird diese Art von Funktion als Smoothstep bezeichnet . Beim Überblenden wird der globale Alpha-Wert für die Komposition bestimmt.

Wenn die Eingabebilder einen Alphakanal haben, sollten Sie zuerst sicherstellen, dass das Alpha vorvervielfacht ist . Dann können Sie die Überblendungskomposition mit dem Smoothstep alphaauf jedem Kanal [ X = A*alpha + B*(1-alpha)] direkt ausführen und vernünftige Ergebnisse erwarten.

Sie können die exponentielle Abklingfunktion verwenden:

Alpha1(time) = 1 - exp(-time / (0.2 * transitionTime)); // fade in
Alpha2(time) = 1 - Alpha1(time); // fade out

Ihr Graph sieht eher so aus:

Alpha1(time) = sin(time * 0.5 * pi / transitionTime); // fade in
Alpha2(time) = cos(time * 0.5 * pi / transitionTime); // fade out