React-Native。创建滑动动画

Question

我想创建一个我无法弄清楚的动画。假设我在视图的中心有一个正方形（100x100）。我希望将任何长度的文本从“后面”滑动到视图的右侧。显然，我希望文本不可见，但只有动画。

如果有人能帮助我，我会很高兴。

干杯

Answer 1

基本上你需要设置你的动画X值 - （你方的宽度），所以在这种情况下，-100，和动感的风格设置为Animated.View。技巧只是调用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>; 
    ); 
    } 
}