反応したネイティブでアニメーション化されたアニメーション

Question

私はプレスでビューをアニメートしたいと思います。

export default class AnimatedRotation extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      spinValue: new Animated.Value(0), 
      color: '#F62459', 
     } 
    } 

    rotateSpring =() => { 
     Animated.spring(
      this.state.spinValue, 
      { 
       toValue: 1, 
       friction: 1, 
      } 
     ).start(); 
     this.setState({ 
      color: this.state.color == '#F62469' ? '#FFC107' : '#F62469', 
     }) 
    }; 

    render() { 
     var spin = this.state.spinValue.interpolate({ 
      inputRange: [0, 1], 
      outputRange: ['0deg', '360deg'], 
     }); 

     return (
      <View style={styles.container}> 
       <Text style={styles.header}>Header</Text> 
       <View style={styles.wrapper}> 
        <TouchableWithoutFeedback onPress={this.rotateSpring}> 
         <Animated.View style={[styles.circle, { 
          transform: [{rotate: spin},], 
          backgroundColor: this.state.color 
          }]}> 
          <Icon name="ios-add" color="white" size={50}/> 
         </Animated.View> 
        </TouchableWithoutFeedback> 
       </View> 
      </View> 
     ); 
    } 
} 

私はアニメーションを1回だけ押して、もう一度アニメーションしません。私はその理由は、spinValueの状態が初めて押されたときのtoValueと等しいからです。だから私はこのような何かを考えた：

rotateSpring =() => { 
    Animated.spring(
     this.state.spinValue, 
     { 
      toValue: this.state.spinValue + 1, 
      friction: 1, 
     } 
    ).start(); 
    this.setState({ 
     color: this.state.color == '#F62469' ? '#FFC107' : '#F62469', 
     spinValue: this.state.spinValue + 1, 
    }) 
}; 

しかし、これは、アプリケーションがクラッシュします。 onPressに何かアニメーションを付けるには？

Answer 1

非常に簡単な解決法：

this.state.spinValue.setValue(0); 
Animated.spring(...); 

あなたのアニメーションが周期的である場合（それはそうであるように見えます）、アニメーションを開始する前にこの行を実行するだけで十分です。

コメント：Animated.Valueが状態の一部である理由はありません。良いヒントは、setState（）を使って決して使ったことがないということです。

Answer 2

this.state.spinValue + 1は、this.state.spinValueが数値ではなくアニメーション値であるため、エラーが発生します。あなたはそれに通常の追加をすることはできません。あなたはまた、

Animated.spring(this.state.spinValue, { 
    toValue: Animated.add(this.state.spinValue, 1), 
    friction: 1, 
}).start(); 

、（テストしていません）次のことを試すことができます

this.state.spinValue.stopAnimation(value => { 
    Animated.spring(this.state.spinValue, { 
    toValue: value + 1, 
    friction: 1, 
    }).start(); 
}); 

、数値を取得し、例えば1

ことによってそれをインクリメントする必要があります