Reagieren-Native. Schiebeanimation erstellen

Question

Ich versuche eine Animation zu erstellen, die ich nicht herausfinden kann. Nehmen wir an, ich habe ein Quadrat (100x100) in der Mitte der Ansicht. Ich möchte jede Länge Text von der "Rückseite" von ihm auf der rechten Seite der Ansicht gleiten. Natürlich möchte ich, dass der Text nicht sichtbar ist, sondern nur Animation.

Ich würde mich freuen, wenn mir jemand helfen könnte.

Prost

Answer 1

Grundsätzlich benötigen Sie eine animierte x-Wert eingestellt - (Breite Ihres Platz), so dass in diesem Fall -100, und legen Sie einen dynamischen Stil zu einem Animated.View. Der Trick besteht darin, einfach eine Animation aufzurufen, die von Animation.spring bearbeitet wird (aber Sie könnten Animation.timing oder eine der Methoden verwenden, die von Animated API angeboten werden) und setting transform: [{translateX: myAnimatedValue}].

Es ist wirklich nicht so anders als CSS3 verwandelt. Sie haben ein Element außerhalb der Leinwand und machen es für den Benutzer nach und nach sichtbar. Ich hoffe, das könnte nützlich sein.

import React, { Component } from 'react'; 
import { 
    View, 
    Animated 
} from 'react-native'; 

// const styles = ... 

export default class SlidingExample extends Component { 

    state = { 
    visible: false, 
    x: new Animated.Value(-100), 
    }; 

    slide =() => { 
    Animated.spring(this.state.x, { 
     toValue: 0, 
    }).start(); 
    this.setState({ 
     visible: true, 
    }); 
    }; 

    render() { 
    // in practice you wanna toggle this.slide() after some props validation, I hope 
    this.slide(); 
    return (
     <View> 
     <Animated.View 
      style={[styles.slideView, { 
      transform: [ 
       { 
       translateX: this.state.x 
       } 
      ] 
      }]} 
     > 
      {/* your content, such as this.props.children */} 
     </Animated.View> 
     </View>; 
    ); 
    } 
}