リアクションネイティブ。スライドアニメーションを作成する

Question

私が理解できないアニメーションを作成しようとしています。ビューの中央に正方形（100x100）があるとします。私は、任意の長さのテキストを、その「背後」から右側のビューにスライドさせたいと思います。明らかに私はテキストが表示されないようにアニメーションのみをしたい。

誰かが私を助けることができたらうれしいです。したがって、この場合-100で、（あなたの正方形の幅）、およびAnimated.Viewにダイナミックなスタイルを設定 -

乾杯

Answer 1

は、基本的には、あなたにアニメーションのxの値を設定する必要があります。トリックは、Animation.springによって処理されるアニメーションを呼び出すだけです（しかし、Animation.timingまたはAnimated APIが提供するメソッドのいずれかを使用して）transform：[{translateX：myAnimatedValue}]を設定することができます。

CSS3の変換とはそれほど違いはありません。あなたはキャンバスを外した要素を持ち、徐々にそれをユーザーに見えるようにします。 これは役に立つと思います。

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>; 
    ); 
    } 
}