Как анимировать Single View один за другим в реагировать родной?

Question

Пожалуйста, посмотрите это изображение

У меня проблема с анимацией круга. Поток это: Когда пользователь нажмет кнопку 1, кружок будет анимирован из реальной позиции в позицию 1,

При нажатии кнопки 2 круг переместится из положения 1 в положение 2,

и

При нажатии кнопки 2 кружок оживит реальную позицию.

Мне нужно 1 сек. время, пока анимируется, и я хочу установить положение круга в конкретной позиции Y. означает первую позицию по Y = 400, вторую позицию по Y = 100.

Заранее спасибо

Answer 1

Вам нужно использовать библиотеку Animated отact-native. Проверьте библиотеку для более подробной информации о том, как анимировать объекты.

Тем временем проверьте рабочий пример в Snack.io

Вот код.

import React, { Component } from "react";
import { View, Text, StyleSheet, Animated, TouchableOpacity } from "react-native";

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      posY: new Animated.Value(400)
    };
  }

  moveBall = (yPos) => {
    Animated.timing(this.state.posY, {
      toValue: yPos,
      duration: 1000
    }).start()
  };

  renderRectangle = () => {
    const animatedStyle = { top: this.state.posY };
    return (
      <Animated.View style={[styles.rectangle, animatedStyle]}>
      </Animated.View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={{ flex: 0.9, alignItems: 'center' }}>
          {this.renderRectangle()}
        </View>
        <View style={styles.buttonsContainer}>
          <TouchableOpacity 
            style={styles.buttonStyle} 
            onPress={() => this.moveBall(250)}
          >
            <Text>Button 1</Text>
          </TouchableOpacity>
          <TouchableOpacity 
            style={styles.buttonStyle} 
            onPress={() => this.moveBall(100)}
          >
            <Text>Button 2</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.buttonStyle}
            onPress={() => this.moveBall(400)}
          >
            <Text>Button 3</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  rectangle: {
    backgroundColor: "#2c3e50",
    width: 50,
    height: 50,
    borderRadius: 50,
    position: 'absolute'
  },
  buttonsContainer: {
    flex: 0.1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingLeft: 20,
    paddingRight: 20
  },
  buttonStyle: {
    padding: 5,
    height: 30,
    backgroundColor: 'limegreen'
  }
});