Javascript在旋转到一定程度后停止旋转动画

Question

我想让一个图像旋转到一定程度后，按下按钮。我遵循了一些网络教程来实现我的代码的基础。

我使用的arrow.png图像从互联网，我希望它旋转与一个动画+45 and，每次我按下一个按钮。例如，箭头在默认情况下指向右边，按下按钮后，我想让它顺时针旋转到右下角。从那个位置开始，再次按压应该使它旋转，针尖朝下等。

我的问题是，在按下按钮后，我的动画被卡住在一个循环中，我不知道如何使它与+45 0deg一起旋转，而不知道每次我这样做的时候都是0 0deg。

这是我的密码

class App extends Component {
  constructor() {
    super();
    this.RotateValueHolder = new Animated.Value(0);
  }

  StartImageRotateFunction() {
    this.RotateValueHolder.setValue(0);
    Animated.timing(this.RotateValueHolder, {
      toValue: 1,
      duration: 1000,
      easing: Easing.linear,
    }).start(() => this.StartImageRotateFunction());
  }

  state = {
    count: 0,
  };

  onPress = () => {
    this.setState({
      count: this.state.count + 1,
    });
    this.StartImageRotateFunction(0);
  };

  render() {
    const RotateData = this.RotateValueHolder.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '45deg'],
    });

    return (
      <View style={styles.container}>
        <Animated.Image
          source={{ uri: 'https://img.icons8.com/plasticine/2x/arrow.png' }}
          style={{
            width: 200,
            height: 200,
            transform: [{ rotate: RotateData }],
          }}
        />
        <TouchableOpacity style={styles.button} onPress={this.onPress}>
          <Text>Apasa aici</Text>
        </TouchableOpacity>
        <View style={styles.countContainer}>
          <Text>Ai apasat aici de {this.state.count} times</Text>
          <Text>{this.estedisperat()} </Text>
        </View>
      </View>
    );
  }

Answer 1

我在您的示例中看到了一些多余的片段，请参见注释掉它们的说明。

这是一个工作的示例

class App extends Component {
  constructor() {
    super();
    this.RotateValueHolder = new Animated.Value(0);

/*
  It seem that it could be defined only once, 
  recalculate the same transform on every render is not necessary  
*/
    this.RotateData = this.RotateValueHolder.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '45deg'],
    });
  }

  StartImageRotateFunction() {
   /*
Loop problem starts here, omit
This one set rotate value to 0 on very call 
    // this.RotateValueHolder.setValue(0);   
  */   
    Animated.timing(this.RotateValueHolder, {
      /*
      Next problem.
      instead times to times set target value to 1 you should use cuurent value from state 
      // toValue: 1,
      */
      toValue: this.state.count,
      duration: 1000,
      easing: Easing.linear,
    })
     /*
     call `.start()` is required, but when you pass callback into
     it will invoked just after animation ends,
     in your case it had start looping 
     // .start(() => this.StartImageRotateFunction());
     */
     .start();
  }

  state = {
    count: 0,
  };

  onPress = () => {
    this.setState({
      count: this.state.count + 1,
    }, () => this.StartImageRotateFunction());
    /*
     Last, bat not least, start animation after set new state
    // this.StartImageRotateFunction(0);
    */
  };

  render() {
    return (
      <View style={styles.container}>
        <Animated.Image
          source={{ uri: 'https://img.icons8.com/plasticine/2x/arrow.png' }}
          style={{
            width: 200,
            height: 200,
            transform: [{ rotate: this.RotateData /* `this`, due to moved in constructor */ }],
          }}
        />
        <TouchableOpacity style={styles.button} onPress={this.onPress}>
          <Text>Apasa aici</Text>
        </TouchableOpacity>
        <View style={styles.countContainer}>
          <Text>Ai apasat aici de {this.state.count} times</Text>
          <Text>{
/* just replace absent function with expected behavior */ 
`rotated ${(this.state.count * 45) % 360}`
}</Text>
        </View>
      </View>
    );
  }
}

Answer 2

从这里的示例中很难看出，因为您使用的Animated函数似乎没有被导入。每当你提出一个问题时，总是试着提供一个最小的工作例子。它极大地帮助人们试图给你一个答复。

另一件看起来可能有问题的事情是，您的transform: [{ rotate: RotateData }]线没有连接到任何其他状态，这意味着未来的按压将无法通知需要发生的旋转次数。我希望有一种类似于

const degrees = this.state.count * 45；表示箭头在每次单击后需要旋转的度数。

同时，当你提出问题时，试着把问题分成几个独立的部分。你提到了两件事：

• 你的动画被困在一个循环里
• 你不知道怎么旋转按钮

关于上面的第二个项目，请参见下面的示例

关于您的Animate函数，需要注意的一点是，它接受一个域和范围。为了确保旋转和单击“计数”始终保持在指定的范围内，可以使用%模运算符。请参阅我在这里创建的简化示例。

https://codesandbox.io/s/lucid-bas-bs7fw

import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  return (
    <>
      <button onClick={increment}>Increment</button>
      <div>{count * 45}</div>
    </>
  );
};

export default App;