Question

我正尝试实现一个简单的带有自带反应的圆圈点击游戏，以用于学习。

我想做的是在屏幕上以小半径渲染一些具有随机位置的圆，然后将其增大到一个值，减小它后最后从屏幕上删除该圆-就像在这个游戏中一样： http://mouseaccuracy.com/

import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Dimensions,
  View,
  ToastAndroid
} from "react-native";

const { width: WIDTH, height: HEIGHT } = Dimensions.get("window");

export default class BestGameEver extends Component {
  constructor() {
    super();
    this.state = {
      circles: []
    };
  }

  componentWillMount() {
    setInterval(this.spawner, 1000);
    setInterval(this.updateCircle, 16);
  }

  updateCircle = () => {
    this.state.circles.map((circle, i) => {
      if (
        circle.width < 50 &&
        circle.height < 50 &&
        circle.borderRadius < 50 &&
        circle.increase == true
      ) {
        circle.width = circle.width + 1;
        circle.height = circle.height + 1;
        circle.borderRadius = circle.borderRadius + 1;

        var array = this.state.circles;
        array.splice(i, 1);
        array.push(circle);
        this.setState({ circles: array });
      } else if (
        circle.width == 50 &&
        circle.height == 50 &&
        circle.borderRadius == 50
      ) {
        circle.increase = false;
      }
      if (circle.increase == false) {
        circle.width = circle.width - 1;
        circle.height = circle.height - 1;
        circle.borderRadius = circle.borderRadius - 1;

        var array = this.state.circles;
        array.splice(i, 1);
        array.push(circle);
        this.setState({ circles: array });
      }

      if (circle.width == 0 && circle.height == 0 && circle.borderRadius == 0) {
        ToastAndroid.show("removing", ToastAndroid.SHORT);
        var array = this.state.circles;
        array.splice(i, 1);
        this.setState({ circles: array });
      }
    });
  };
  spawner = () => {
    var randomX = Math.floor(Math.random() * (WIDTH - 0 + 1) + 0);
    var randomY = Math.floor(Math.random() * (HEIGHT - 0 + 1) + 0);

    var circle = {
      increase: true,
      x: randomX,
      y: randomY,
      width: 5,
      height: 5,
      borderRadius: 5
    };
    this.setState({ circles: [...this.state.circles, circle] });
  };
  renderCircles = () => {
    if (this.state.circles.length != 0) {
      return this.state.circles.map((circle, i) => {
        return (
          <View
            style={{
              position: "absolute",
              backgroundColor: "blue",
              width: circle.width,
              height: circle.height,
              borderRadius: circle.borderRadius,
              left: circle.x,
              top: circle.y
            }}
          />
        );
      });
    }
  };

  render() {
    return <View style={styles.container}>{this.renderCircles()}</View>;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FFF"
  }
});

目前，我可以每5秒钟在屏幕上生成一个圆圈，然后使用updateCircle函数将其大小增加到50。

一旦圆达到50，我该如何减小圆的大小？

谢谢

编辑：我现在更新了我的问题，我可以减少但由于某些原因它滞后了？

Answer 1

您可以添加一个新变量来跟踪它是处于递增模式还是递减模式。如果最初是递增模式，请运行当前逻辑。如果它处于递减模式，则添加新的代码块以将圆的大小减小到0或其他。

Answer 2

您应该查看Animated API。 Animated.Value()可以绑定到Animated.View中的样式属性。然后，您可以更改Animated.Value，样式更改将自动反映到视图中。

您将对圈子使用<Animated.View>个组件，然后对每个圈子使用单个Animated.Value()来设置其width，height和borderRadius的样式（您可能需要Animated.divide()作为边界半径）。然后，您可以使用Animated.timing()和Animated.sequence()来补间该圆圈的值，然后下移。所有这些都可以在创建每个圆后立即设置。

您将获得更好的性能，因为指令可以每圈发送一次到本地代码，而不是每帧动画每圈发送一次。

反应本机-增大圆圈大小然后减小

2 个答案: