如何在本机中为一个单一视图制作动画？

Question

请看看这张图片

我的圈子动画有问题。 流程为： 当用户单击按钮1时，圆将从真实位置动画到位置1，

单击按钮2时，圆圈将从位置1移动到位置2，

和

单击button2时，一个圆圈将重新显示在实际位置上。

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

预先感谢

Answer 1

您需要使用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'
  }
});