我正在尝试在本机反应中使用PanResponder以便在其中心旋转一个盒子。到目前为止，这是我的代码：
class Spinner extends React.Component {
pan = new Animated.ValueXY();
panResponder = PanResponder.create({
onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: () => {
this.pan.setOffset({
x: this.pan.x._value,
y: this.pan.y._value
});
},
onPanResponderMove: Animated.event([
null,
{ dx: this.pan.x, dy: this.pan.y }
]),
onPanResponderRelease: () => {
this.pan.flattenOffset();
}
});
render() {
const RotateValue = "10deg"
return (
<View style={styles.container}>
<Animated.View
style={{
width:100,
height:300,
transform:[{ rotate: RotateValue }]
}}
{...this.panResponder.panHandlers}
>
<View style={styles.box} />
</Animated.View>
</View>
)
}
}
'''
在此const RotateValue中，我尝试使用this.pan.x和this.pan.y隐蔽到一个度数值。我输入“ 10deg”以证明它将旋转10度。但是我迷失了如何完成我打算要做的事情。
任何帮助将不胜感激。非常感谢。
我认为您正在寻找的是所谓的插值法。您可以在此处找到更多信息：https : //animationbook.codedaily.io/interpolate/# :~: text=%20interpolate%20function%20allows%20animated、interpolate%20from%20other%20interpolate%20values.&text=What% 20this％20is％20doing％20is，我们％20are％20插值％20the％20不透明。
const RotateValue = this.pan.x.interpolate({
inputRange: [0, 360],
outputRange: ['0deg', '360deg'],
extrapolate: 'clamp'
});
我知道这不是最准确或最佳的答案，但希望您能以某种方式找到帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句