Categories: 3D Animationen

Interfaces mit Core Animation animieren: Teil 2.

Dies ist der zweite Teil unserer Serie zum Thema „Interfaces mit Core Animation animieren“, die ich über die Animation von iOS-Schnittstellen mit Core Animation schreibe.

Im vorherigen Beitrag hatten wir eine Planeten Orbit mit verschachtelten CALayer-Objekten erstellt.

Steigern Sie ihre Conversion Rate.

Wir helfen Ihnen durch 3D Animationen mehr Anfragen aus Ihrer Website zu generieren.

Diesmal werde ich zeigen, wie man ein UI mit Hilfe eines Bildes und einer Core Animation verkleiden kann.

Floating Cloud Sample.

Dieses Beispiel ist viel einfacher als das vorherige, zeigt aber, wie eine einfache Animation ein sonst langweiliges Interface verschönern kann. Angenommen, Sie haben einen Anmeldebildschirm oder eine andere Eingabeaufforderung, die ähnlich leblos ist. Wenn Sie dem Benutzer in der Hintergrundansicht etwas Ansprechendes bieten wollen, kann eine einfache Core-Animation sehr effektiv sein.

Steigern Sie ihre Conversion Rate.

Wir helfen Ihnen durch 3D Animationen mehr Anfragen aus Ihrer Website zu generieren.

Für diese Demo zeigen wir ein einfaches Bild einer Wolke, die über den Bildschirm schwebt. Jede andere Art von Bild oder Transformation kann angewendet werden, ebenso wie mehrere andere Animationen. Der Einfachheit halber werden wir nur eine einzige Sub-Layer-Animation zeigen.

Copy to Clipboard

Zuerst in diesem Beispiel laden wir ein Bild, erstellen eine neue Ebene und setzen vor allem die Inhaltseigenschaft der neuen Ebene auf das CGImage der Wolke. Die Größe und Positionierung der neuen Ebene erfolgt als nächstes, danach fügen wir sie der darunterliegenden Ebene unserer aktuellen Ansicht hinzu. Wenn Sie es einfach dabei belassen, würden Sie ein schönes Bild einer Wolke im Hintergrund ihrer Ansicht sehen.

Copy to Clipboard

Als nächstes legen wir fest, von welchem Start- und Eckpunkt die Wolke sich bewegen soll. Die Größe in diesem Beispiel ist relativ zur Größe des Wolkenbildes selbst, d.h. wenn Sie ein anderes Bild verwenden, muss sich der Code nicht ändern.

Danach erstellen wir unser CABasicAnimation Objekt, diesmal mit dem „Position“ keyPath, was anzeigt, dass diese Animation auf der Position der Ebene arbeitet.

Steigern Sie ihre Conversion Rate.

Wir helfen Ihnen durch 3D Animationen mehr Anfragen aus Ihrer Website zu generieren.

Der Rest des Codes hier ist dem vorherigen Beispiel sehr ähnlich, aber anstatt den fromValue- und toValue-Eigenschaften eine NSNummer zuzuweisen, erstellen wir ein NSValue-Objekt mit seinen speziellen Konstruktoren für die behandlung von CFPoint-Strukturen.

Wiederum geben wir eine lange Animationsdauer und eine unendliche Anzahl von Wiederholungen an und fügen dann die Animation zu unserer neuen Ebene hinzu. Hier sehen Sie das entsprechende Beispiel:

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Datenschutzerklärung.

Vielen Dank für ihren Besuch.

3DMaster