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