Как сделать кривую, как анимация в реагировать родной? - PullRequest
Новая
       5

Как сделать кривую, как анимация в реагировать родной?

1 голос
/ 30 марта 2020

Я знаю, что название не очень конкретное c, мне очень жаль, на самом деле я не мог придумать лучшего названия, чем оно.

Теперь перейдем к моему дизайну, ниже желаемый результат. Я хочу сделать это с помощью изогнутой анимации (как на изображении). Но проблема в том, что она идет как прямая диагональная линия, а не изогнутая.

_startCoin функция вызывается всякий раз, когда я нажимаю кнопку, а затем происходит анимация

attachedimage

А вот и мой код 

const screenHeight = Math.round(Dimensions.get('window').height);
const screenWidth = Math.round(Dimensions.get('window').width);

export default class demoScreen extends Component {

state = {
    ready: false,
    CoinAdd: new Animated.Value(0),
};

_startCoin = () => {
    return Animated.parallel([
      Animated.timing(this.state.CoinAdd, {
        toValue: 1,
        duration: 1500,
        useNativeDriver: true
      })
    ]).start();
 };

render() {
    let { CoinAdd } = this.state;
    return (
      <View style={styles.container}>

      <TouchableOpacity style={styles.btn2} onPress={() => this._startCoin()}>
      <Text style={styles.textBtn}>Start Coin</Text>
    </TouchableOpacity>

    <Animated.View style={{
               transform: [
               {
                 translateY: CoinAdd.interpolate({
                 inputRange: [0, 1],
                 outputRange: [0, -((screenHeight/2)-50)]
                })
               },
               {
                 translateX: CoinAdd.interpolate({
                 inputRange: [0, 1],
                 outputRange: [0, -((screenWidth/2))]
               })
               }
               ],
               borderRadius: 12,
               justifyContent: "center",
               alignItems: 'center',
               zIndex: 2
              }}
            >
<Image style={{position: "absolute",  height: 30, width: 30, right: 0}} source={require('../../assets/coin.png')} />

</Animated.View>

);
}
}

Буду признателен за любую помощь. Спасибо

...