So erstellen Sie eine einfache animation-Effekt

Gibt es ein code-Beispiel zur Verfügung, das veranschaulicht, wie verwenden Sie einen 2D-Transformation (wie drehen und skalieren) mit einem JPG in ein reagieren-native Anwendung, vielleicht mit dem code im tutorial als Ausgangspunkt?

Wenn möglich, wäre es hilfreich zu sehen-code für zwei Szenarien:

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 zum erstellen von 3D-Transformationen und-Animationen.

InformationsquelleAutor Oswald Campesato | 2015-03-27
  1. 23

    Update: sehen Sie das gesamte Beispiel in meiner Beispiel-app hier: https://github.com/grgur/react-native-memory-game

    Animation ist jetzt AnimationExperimental also müssen wir ändern zvona Lösung.

    Erstens, stellen Sie sicher, dass RCTAnimationExperimental eine verlinkte Bibliothek
    So erstellen Sie eine einfache animation-Effekt

    Wenn nicht, dann gehen Sie folgendermaßen vor:

    1. Navigieren Sie zu node_modules/react-native/Libraries/Animation/
    2. Drag-and-drop RCTAnimationExperimental.xcodeproj für Bibliotheken (sollte so Aussehen wie das Bild oben)
    3. Klicken Sie auf Ihr Projekt-Namen ein (im obigen Beispiel mein Projekt-name Speicher)
    4. - Schalter, um die Build-Phasen tab
    5. Erweitern Libraries/RCTAnimationExperimental.xcodeproj/Products
    6. Ziehen libRctAnimationExperimental.a zu Link Binary With Libraries
      So erstellen Sie eine einfache animation-Effekt

    Ok, der schwierigste Teil ist nun vorbei. Den Kopf über Ihre JavaScript-Datei. Animation ist nicht mehr Teil des reagieren-native-Paket, so müssen wir noch explizit.

    JS:

    var React = require('react-native');
var AnimationExperimental = require('AnimationExperimental');

    Okay, champ, du bist bereit, zu animieren. Stellen Sie sicher, Sie wissen, was Sie zu animieren. Die anzeigen werden Sie zu animieren, wird bezeichnet als node.

    JS:

    AnimationExperimental.startAnimation({
  node: this.refs.image,
  duration: 400,
  easing: 'easeInQuad',
  property: 'opacity',
  toValue: 0.1,
});

    ... Und das ist es!

    Im moment des Schreibens, Eigenschaften verfügbar sind: opacity, position, positionX, positionY, rotation, scaleXY

    • Hinzufügen RCTAnimation lib, der Pfad sollte node_modules/reagieren-native/Libraries/**NativeAnimation**/ für RN 0.38
    InformationsquelleAutor Grgur
  2. 18

    Derzeit, dies ist ein etwas komplexer Prozess, und ich bin Planung zu schreiben, einen blog-Beitrag darüber. Jedoch, wie ein kurzer starter, Schreibe ich hier etwas.

    Erste problem ist, dass RCTAnimation /RCTAnimationManager überhaupt nicht vorhanden ist, wenn Sie erstellt haben, Ihr Projekt mit react-native init [ProjectName] (https://github.com/facebook/react-native/issues/226).

    Müssen Sie es in XCode aus einem plus-Zeichen in der linken oberen Ecke: "Dateien Hinzufügen" [Projektname]". Dann navigieren Sie zu node_modules > Libraries > Animation > RCTAnimation.xcodeproj. Nachdem es importiert, müssen Sie ziehen Sie es unter Libraries in Ihrem Projekt.

    Dann müssen Sie öffnen Sie die Registerkarte Build Phases. Dort haben Sie im Menü Link Binary With Libraries (x items). Ziehen Sie aus Products unter RCTAnimation.xcodeproj Datei namens libRCTAnimation.a zum Menü.

    Nun, Sie bauen Ihr Projekt zur Unterstützung von Animationen. Ich bin nicht so vertraut mit XCode, so könnte es ein noch einfacher Weg, dies zu erreichen, aber ich habe es sortiert wie dieses.

    Zweite Problem ist, dass nicht alle verfügbar sind (oder geplant) die Funktionalität ist da. Zumindest lief ich durch den Dschungel der Irrungen und Fehler, bevor ich alles auf dem Bildschirm.

    Versuchen, z.B. dieser code auf den ersten, um voll und ganz bewiesen haben, dass Animationen arbeiten:

    var {
  Animation,
  AppRegistry,
  StyleSheet,
  Text,
  View
} = React;

var styles = StyleSheet.create({
  test: {
    width: 400,
    height: 400,
    backgroundColor: 'blue',
    opacity: 0
  }
});

var AnimationTest = React.createClass({
  componentDidMount () {
    Animation.startAnimation(this.refs['this'], 400, 0, 'linear', {opacity: 1});
  },

  render () {
    return (
      <View ref='this' style={styles.test}>
        <Text>Just an animation test</Text>
      </View>
    )
  }
});

AppRegistry.registerComponent('AnimationTest', () => AnimationTest);

    Das sollte erhalten Sie gehen. Wenn Sie Hilfe benötigen, bitte informieren Sie mich.

    Wenn ich jemals gelingen schriftlich eine vollständige Anleitung in form von einem blog-Artikel werde ich aktualisieren, um diese Antwort.

    • Sehr schön. Es funktionierte wirklich gut für mich. Vielen Dank für die klare Erklärung.
    • Danke. Als Xcode Neuling habe ich den Fehler gemacht, das öffnen der falschen Build-Phasen-tab... Sie platzieren möchten libRCTAnimation.eine in Ihrer MainProject.xcodeproj
    • Nicht mehr funktionieren. Ersetzt mit AnimationExperimental mit einem etwas anderen API
    • Wie reagieren-native 0.38, RCTAnimation.xcodeproj Leben @ node_modules/reagieren-native/Bibliotheken/NativeAnimation/.
    InformationsquelleAutor zvona
  3. 4

    Check-out die 2048 demo-Anwendung zum Beispiel die Nutzung der RCTAnimation Bibliothek:

    https://github.com/facebook/react-native/tree/master/Examples/2048

    Es keine besonders komplexe Transformationen, aber nicht animieren position, opacity, und scaleXY verschiedenen Elementen mit code, der wie folgt aussieht:

    Animation.startAnimation(this.refs['this'], 300, 0, 'easeInOutQuad', {scaleXY: [1, 1]});
    • Vielen Dank für den Hinweis auf die Beispiele, die ich verpasst hatte, diese komplett!
    InformationsquelleAutor Spencer Ahrens
Schreibe einen Kommentar