将变量赋值给Animated.timing toValue
将变量赋值给Animated.timing toValue
提问于 2020-10-31 07:07:23
我想用Animated.timing来旋转一张图片，但是赋值一个包含数字的变量并不会产生任何动画效果。输入int，比如50，就行了。
toValue: degree什么也不做，toValue:50做我需要的。我在文本块中打印出它应该输出的度。
我把animated.timing放在render()中，这样我就可以直接访问degree，我试着把它放在componentDidMount()中，但这只会产生错误。
这段代码打印出x，y，z和xxx.xx格式的计算度，我在状态中设置了xyz，然后用它把它传递给compassHeading函数来计算度：
render() {
const movementX = this.state.x;
const movementY = this.state.y;
const movementZ = this.state.z;
const degree= compassHeading(movementX, movementY, movementZ).toFixed(2);
Animated.timing(
this.state.spinValue,
{
toValue: degree,
duration: 3000,
easing: Easing.linear,
useNativeDriver: true
}
)
.start();
return (
<View >
<Animated.Image
style={{
width: 350, height: 350,
transform: [{
rotate: this.state.spinValue.interpolate({
inputRange: [0, 360],
outputRange: ['0deg', '360deg']
}) }] }}
source={require('./compass.png')}
/>
<Text> {movementX}</Text>
<Text> {movementY}</Text>
<Text> {movementZ}</Text>
<Text> {degree}</Text>
</View>
);
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-31 20:14:18
你在每个渲染中开始一个新的动画，每个动画将渲染加载的时间来改变你的动画的this.state.spinValue，并且每次渲染你再次开始动画…
你需要在渲染函数之外启动Animated.timing，这取决于movementXYZ改变的频率。(假设它们每100ms改变一次)你可能需要等待动画结束，然后再开始另一个。当它是动画的时候，如果有任何新的移动，为下一个动画存储最新的值。(我不建议过于频繁地中断正在进行的动画，特别是使用nativeDriver....so时，我让它先完成一个。)
它看起来像这样：
onMovementChange(){
const degree= compassHeading(movementX, movementY, movementZ).toFixed(2);
if(!this.state.isAnimating){
this.setState({isAnimating:true,nextDegree:degree});
Animated.timing(
this.state.spinValue,
{
toValue: degree,
duration: 3000,
easing: Easing.linear,
useNativeDriver: true
}
).start(()=>{
if(this.state.nextDegree!=degree){
onMovementChange()
}
this.setState({isAnimating:false})
});
}else{
if(this.state.nextDegree!=degree){
this.setState({nextDegree:degree});
}
}
}
render() {
const movementX = this.state.x;
const movementY = this.state.y;
const movementZ = this.state.z;
return (
<View >
<Animated.Image
style={{
width: 350, height: 350,
transform: [{
rotate: this.state.spinValue.interpolate({
inputRange: [0, 360],
outputRange: ['0deg', '360deg']
}) }] }}
source={require('./compass.png')}
/>
<Text> {movementX}</Text>
<Text> {movementY}</Text>
<Text> {movementZ}</Text>
<Text> {this.state.nextDegree}</Text>
</View>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64616837
复制相关文章
相似问题
腾讯云开发者
