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

我想在按下按钮后使图像旋转到一定程度。我遵循了一些internet教程来实现我的代码基础

我使用的是来自互联网的arrow.png图像，我希望每次按下按钮时，它都会以+45度的动画旋转。 例如，默认情况下箭头指向右侧，按下按钮后，我希望使其顺时针旋转到右下角。从该位置，再次按压应使其旋转，尖端朝下等

我的问题是，按下按钮后，我的动画被卡在一个循环中，我不知道如何使它以+45度旋转，而不是每次都从0度旋转

这是我的密码

类应用程序扩展组件{
构造函数（）{
超级（）；
this.RotateValueHolder=新的动画.Value（0）；
}
StartImageRotateFunction（）{
此.RotateValueHolder.setValue（0）；
已设置动画。计时（此。旋转值保持器{
toValue:1，
持续时间：1000，
放松：放松，线性，
}).start（（）=>this.StartImageRotateFunction（））；
}
状态={
计数：0，
};
onPress=（）=>{
这是我的国家({
计数：this.state.count+1，
});
此.startImageRotateTefunction（0）；
};
render（）{
const RotateData=this.RotateValueHolder.interpolate({
输入范围：[0，1]，
输出范围：['0deg'，'45deg']，
});
返回(
阿帕萨艾奇酒店
Ai apasat aici de{this.state.count}次
{this.esterat（）}
);
}

很难从您的示例中分辨出来，因为您正在使用的

动画

功能似乎没有被导入。每当您提出问题时，请始终尝试提供最小的工作示例。这对尝试回答您的人有很大帮助

另一件看起来可能有问题的事情是，您的

转换：[{rotate:RotateData}]

行没有附加到任何其他状态，这意味着未来的压力机将无法通知需要发生的旋转次数。我希望有类似的行

const degrees=this.state.count*45

；表示每次单击后箭头需要旋转的度数

此外，在提出问题时，试着将问题分成独立的部分。你提到了两件事：

• 您的动画陷入循环中
• 你不知道如何旋转按钮

至于上面的第二个项目符号，请参见此示例

关于

Animate

函数，需要注意的是它需要一个域和范围。为了确保旋转和单击计数始终保持在指定范围内，可以使用

%

模运算符。请参见我在此处创建的简化示例

import React，{useState}来自“React”；
常量应用=（）=>{
const[count，setCount]=useState（0）；
常量增量=（）=>setCount（count+1）；
返回(
增量
{count*45}
);
};
导出默认应用程序；

很难从您的示例中分辨出来，因为您正在使用的

动画

功能似乎没有被导入。每当您提出问题时，请始终尝试提供最小的工作示例。这对尝试回答您的人有很大帮助

另一件看起来可能有问题的事情是，您的

转换：[{rotate:RotateData}]

行没有附加到任何其他状态，这意味着未来的压力机将无法通知需要发生的旋转次数。我希望有类似的行

const degrees=this.state.count*45

；表示每次单击后箭头需要旋转的度数

此外，在提出问题时，试着将问题分成独立的部分。你提到了两件事：

• 您的动画陷入循环中
• 你不知道如何旋转按钮

至于上面的第二个项目符号，请参见此示例

关于

Animate

函数，需要注意的是它需要一个域和范围。为了确保旋转和单击计数始终保持在指定范围内，可以使用

%

模运算符。请参见我在此处创建的简化示例

import React，{useState}来自“React”；
常量应用=（）=>{
const[count，setCount]=useState（0）；
常量增量=（）=>setCount（count+1）；
返回(
增量
{count*45}
);
};
导出默认应用程序；

我在您的示例中看到一些多余的片段，请参见注释中注释掉的解释

这是一张工作票

类应用程序扩展组件{
构造函数（）{
超级（）；
this.RotateValueHolder=新的动画.Value（0）；
/*
似乎只能定义一次，
不需要在每个渲染上重新计算相同的变换
*/
this.RotateData=this.RotateValueHolder.interpolate({
输入范围：[0，1]，
输出范围：['0deg'，'45deg']，
});
}
StartImageRotateFunction（）{
/*
循环问题从这里开始，省略
这个函数在每次调用时都将旋转值设置为0
//此.RotateValueHolder.setValue（0）；
*/   
已设置动画。计时（此。旋转值保持器{
/*
下一个问题。
相反，时间到时间将目标值设置为1，您应该使用cuurent value from state
//toValue:1，
*/
toValue:this.state.count，
持续时间：1000，
放松：放松，线性，
})
/*
调用“.start（）”是必需的，但当您将回调传递到
它将在动画结束后立即调用，
在你的情况下，它已经开始循环
//.start（（）=>this.StartImageRotateFunction（））；
*/
.start（）；
}
状态
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;

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>
    );
  }
}