反應本機-增大圓圈大小然后減小

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()將該圓的值補間，然后下補。 所有這些都可以在創建每個圓后立即設置。

您將獲得更好的性能，因為指令可以每圈發送一次到本地代碼，而不是每幀動畫每圈發送一次。