如何在本机反应中一个一个地动画单个视图?

How to animate a Single View one by one in react native?

请看这张图片

我的圆圈动画有问题。 流程是: 当用户点击按钮 1 时,圆圈将从实际位置移动到位置 1,

当点击button2时,一个圆圈会从位置1移动到位置2,

当点击button2时,一个圆圈将动画回到真实位置。

我需要 1 秒。动画时的时间,我想在特定的 Y 位置设置圆圈位置。 表示 Y=400 上的第一个位置,Y=100 上的第二个位置。

提前致谢

您需要使用 react-native 中的 Animated 库。查看库以获取有关如何为对象设置动画的更多详细信息。

同时检查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'
  }
});