So erstellen Sie einen einfachen Animationseffekt
Gibt es ein Codebeispiel, das veranschaulicht, wie eine 2D-Transformation (z. B. Drehen und Skalieren) mit einem JPG in einer reaktionsnativen Anwendung verwendet wird, möglicherweise mit dem Code im Lernprogramm als Ausgangspunkt?
Wenn möglich, wäre es hilfreich, Code für zwei Szenarien zu sehen:
1) automatically apply a transform when the app is launched
2) apply a transform after different types of user gestures
Irgendwann in der Zukunft wäre es interessant zu sehen, wie man 3D-Transformationen und Animationseffekte erzeugt.
3 Antworten
Update: Sie können das gesamte Beispiel in meiner Beispiel-App hier sehen: Ссылка
Animation ist jetzt Animationsexperimental, also müssen wir zvonas Lösung ändern.
Stellen Sie zunächst sicher, dass RCTAnimationExperimental eine verknüpfte Bibliothek ist
Wenn nicht, dann folge diesen Schritten:
- Navigiere zu
node_modules/react-native/Libraries/Animation/ - Drag and drop
RCTAnimationExperimental.xcodeprojauf Bibliotheken (sollte wie im Bild oben aussehen) - Klicken Sie auf Ihren Projektnamen (im obigen Beispiel ist mein Projektname Memory)
- Wechseln Sie zur Registerkarte Phasen erstellen
- Erweitern Sie
Libraries/RCTAnimationExperimental.xcodeproj/Products - Ziehen Sie
libRctAnimationExperimental.aaufLink Binary With Libraries
Ok, der schwierigste Teil ist jetzt vorbei. Gehen Sie zu Ihrer JavaScript-Datei. Animation ist nicht mehr Bestandteil des reaktiven nativen Pakets, daher müssen wir es explizit einfügen.
Alles klar, Champion, Sie sind bereit zu animieren. Stellen Sie sicher, dass Sie wissen, was Sie animieren. Die Ansicht, die Sie animieren werden, wird als node bezeichnet.
Und das ist es!
Zum Zeitpunkt des Schreibens sind die verfügbaren Eigenschaften: opacity , position , positionX , positionY , rotation , scaleXY
Momentan ist das ein etwas komplexerer Prozess und ich plane, einen Blogbeitrag darüber zu schreiben. Als kurze Vorspeise schreibe ich hier etwas.
Erstes Problem ist, dass RCTAnimation / RCTAnimationManager überhaupt nicht vorhanden ist, wenn Sie Ihr Projekt mit react-native init [ProjectName] erstellt haben ( Ссылка ).
Sie müssen es in XCode über ein Pluszeichen in der oberen linken Ecke hinzufügen: "Dateien zu [Projektname] hinzufügen". Dann navigierst du zu node_modules > Libraries > Animation > RCTAnimation.xcodeproj . Nachdem es importiert wurde, müssen Sie es in Ihrem Projekt unter Libraries ziehen.
Dann müssen Sie den Tab Build Phases öffnen. Dort haben Sie das Menü Link Binary With Libraries (x items) . Ziehen Sie von Products unter RCTAnimation.xcodeproj file namens libRCTAnimation.a auf das Menü.
Jetzt können Sie Ihr Projekt zur Unterstützung von Animationen erstellen. Ich bin mit XCode nicht so vertraut, also könnte es einen einfacheren Weg geben, dies zu erreichen, aber ich habe es so sortiert.
Zweites Problem ist, dass nicht alle verfügbaren (oder geplanten) Funktionen vorhanden sind. Zumindest bin ich durch den Dschungel der Versuche und Fehler gerannt, bevor ich etwas auf den Bildschirm bekam.
Versuchen Sie z.B. Dieser Code wird zunächst vollständig überprüft, dass Animationen funktionieren:
%Vor%Das sollte dich in Gang bringen. Wenn Sie weitere Hilfe benötigen, benachrichtigen Sie mich bitte.
Wenn es mir jemals gelingt, eine vollständigere Anleitung in Form eines Blogartikels zu schreiben, werde ich sie auf diese Antwort aktualisieren.
Sehen Sie sich die 2048-Demo-Anwendung für die Verwendung der RCTAnimation-Bibliothek an:
Es verwendet keine besonders komplexen Transformationen, aber animiert position , opacity und scaleXY verschiedener Elemente mit Code, der folgendermaßen aussieht:
Tags und Links react-native