React Native에서 사용자 정의 애니메이션 만들기

Question

나는 React-native를 처음 사용하지만 너무 멋지다! 이처럼 애니메이션을 만들려고합니다. 화면 가운데에 가운데 점이 있고 1 초가 지나면 점이 바깥쪽으로 (화면 테두리쪽으로) 늘어나서 선을 만듭니다. Animatable 및 Animated에서 그런 애니메이션을 찾고 있었지만 비슷한 것을 찾을 수 없었습니다. 누구든지 나를 도울 수 있습니까?

건배, 크리스

Answer 1

이 정확히 투기하는 것이 아니라, 가야 당신은 시작 : 답장을

import React, { Component } from 'react'; 
import { View, StyleSheet, Animated, Easing } from 'react-native'; 
import { Constants } from 'expo'; 

export default class App extends Component { 
    state = { 
    width: new Animated.Value(5), 
    } 

    componentWillMount() { 
    Animated.timing(
     this.state.width, 
     { 
     toValue: 500, 
     duration: 1000, 
     easing: Easing.linear, 
     }).start(); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <Animated.View style={{backgroundColor: 'red', width:  this.state.width, height: 5}}> 
     </Animated.View> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    paddingTop: Constants.statusBarHeight, 
    backgroundColor: '#ecf0f1', 
    }, 
});