アニメーション - アニメーション値を実際の値に補間する方法

Question

私は（クランプと補間を使用して）アニメーションの値を同時に制限しようとしていますが、それらを使用できるように補間から値を取得しようとしています。具体的には、国家の一部を更新し、そこからオブザーバブルを作成したいからです。補間（この場合はstate.panValue）によって生成されたAnimatedValueから '実際の'値を抽出する方法を知ることはできません。私は

this.state.panValue.value 

と

this.state.panValue._value 

を試みたし、彼らは未定義として戻ってきます。もし誰かが私を助けることができれば素晴らしいだろう！

編集：私は状態変数「panValue」の事を更新し、全体をスキップすることができますのでは私もちょうど限度内で更新

this.state.pan.x 

変数を持っていることは本当に幸せになると思います。 Facebook上の素敵な人は、変数を関数や何かに切り替えることで、何とかこの制限をonPanResponderMoveの中に実装できると示唆しましたが、いくつかのことを試しましたが、エラーはあります。これらのアニメーション化された価値を '安全に'修正する。

 onPanResponderMove: Animated.event([ 
     null, 
     { dx: this.state.pan.x }, 
    ]), 

オリジナルコード：

import React, { Component } from 'react'; 
import { 
    View, 
    Animated, 
    PanResponder, 
    Text, 
} from 'react-native'; 
import styles from './styles'; 

class ClockInSwitch extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    pan: new Animated.ValueXY(), 
    panValue: 0, 
    }; 
} 

componentWillMount() { 
this._animatedValueX = 0; 
this._animatedValueY = 0; 
this.state.pan.x.addListener((value) => { 
    this._animatedValueX = value.value; 
    this.setState({ 
     panValue: this.state.pan.x.interpolate({ 
      inputRange: [-30, 0, 120,], 
      outputRange: [-10, 0, 120,], 
      extrapolate: 'clamp', 
     }), 
    }); 
}); 

this._panResponder = PanResponder.create({ 
    // Ask to be the responder: 
    onStartShouldSetPanResponder: (evt, gestureState) => true, 
    onStartShouldSetPanResponderCapture: (evt, gestureState) => true, 
    onMoveShouldSetPanResponder: (evt, gestureState) => true, 
    onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, 

    onPanResponderGrant: (evt, gestureState) => { 
    this.state.pan.setOffset({ 
     x: this._animatedValueX, 
    }); 
    this.state.pan.setValue({ x: 0, y: 0 }); 
    }, 
    onPanResponderMove: Animated.event([ 
     null, 
     { dx: this.state.pan.x }, 
    ]), 
    onPanResponderTerminationRequest: (evt, gestureState) => true, 
    onPanResponderRelease: (evt, gestureState) => { 
    this.state.pan.flattenOffset(); 
    Animated.timing(this.state.pan, { 
     toValue: 0, 
     duration: 500, 
    }).start(); 
    }, 
    onPanResponderTerminate: (evt, gestureState) => { 
    }, 
    onShouldBlockNativeResponder: (evt, gestureState) => { 
    return true; 
    }, 
}); 
} 

componentWillUnMount() { 
    this.state.pan.x.removeAllListeners(); 
} 

render() { 
    const animatedStyle = { 
    transform: [{ 
    translateX: this.state.panValue, 
    }, 
    ], 
    }; 
return (
    <View> 
    <Text>{this.state.pan.x._value}</Text> 
    <View style={styles.buttonStyle}> 
     <Animated.View 
     style={[styles.sliderButtonStyle, animatedStyle]} 
     {...this._panResponder.panHandlers} 
     /> 
    </View> 
    </View> 
    ); 
    } 
} 

export default ClockInSwitch; 

Answer 1

私は、これはあなたが探しているものだと思います。指数を使用しているので、ベクターアイコンの宣言を変更する必要があります。乾杯！

/** 
 
* @providesModule ClockInSwitch 
 
* @flow 
 
*/ 
 
import React, {Component} from 'react'; 
 
import {View, Animated, StyleSheet, PanResponder, Text} from 'react-native'; 
 
import {FontAwesome} from '@exponent/vector-icons'; 
 

 
export class ClockInSwitch extends Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      pan: new Animated.ValueXY(), 
 
      panValue: 0 
 
     }; 
 
    } 
 
    componentWillMount() { 
 
     this._panResponder = PanResponder.create({ 
 
      onMoveShouldSetResponderCapture:() => true, 
 
      onMoveShouldSetPanResponderCapture:() => true, 
 
      onPanResponderGrant: (e, gestureState) => { 
 
       this 
 
        .state 
 
        .pan 
 
        .setValue({x: 0, y: 0}); 
 
      }, 
 
      //here's where you can check, constrain and store values 
 
      onPanResponderMove: (evt, gestureState) => { 
 
       // 300 is the width of the red container (will leave it to you to calculate this 
 
       // dynamically) 100 is the width of the button (90) plus the 5px margin on 
 
       // either side of it (10px total) 
 
       var newXVal = (gestureState.dx < 300 - 100) 
 
        ? gestureState.dx 
 
        : 300 - 100; 
 
       this 
 
        .state 
 
        .pan 
 
        .x 
 
        .setValue(newXVal); 
 
       //set this state for display 
 
       this.setState({panValue: newXVal}); 
 
      }, 
 

 
      onPanResponderRelease: (e, {vx, vy}) => { 
 
       this 
 
        .state 
 
        .pan 
 
        .flattenOffset(); 
 
       Animated 
 
        .spring(this.state.pan, { 
 
        toValue: 0, 
 
        duration: 400, 
 
        overshootClamping: true 
 
       }) 
 
        .start(); 
 
       this.setState({panValue: 0}); 
 
      } 
 
     }); 
 
    } 
 

 
    componentWillUnMount() { 
 
     this 
 
      .state 
 
      .pan 
 
      .x 
 
      .removeAllListeners(); 
 
    } 
 

 
    render() { 
 
     //decouple the value from the state object 
 
     let {pan} = this.state; 
 
     let [translateX, 
 
      translateY] = [pan.x, pan.y]; 
 
     let translateStyle = { 
 
      transform: [{ 
 
        translateX 
 
       }, { 
 
        translateY 
 
       }] 
 
     }; 
 
     return (
 
      <View> 
 
       <Text style={styles.leftText}>Power Button Demo</Text> 
 
       <View style={styles.buttonStyle}> 
 
        <Animated.View 
 
         style={[styles.sliderButtonStyle, translateStyle]} 
 
         {...this._panResponder.panHandlers}> 
 
         <FontAwesome 
 
          name="power-off" 
 
          color="#EA2E49" 
 
          style={{ 
 
          alignSelf: "center", 
 
          marginHorizontal: 10 
 
         }} 
 
          size={36}/> 
 

 
        </Animated.View> 
 
       </View> 
 
       <Text style={styles.rightText}>{this.state.panValue}: x value</Text> 
 
      </View> 
 
     ); 
 
    } 
 
} 
 

 
export default ClockInSwitch; 
 
const styles = StyleSheet.create({ 
 
    sliderButtonStyle: { 
 
     borderColor: '#FCFFF5', 
 
     borderStyle: 'solid', 
 
     borderWidth: .5, 
 
     backgroundColor: '#FCFFF5', 
 
     borderRadius: 45, 
 
     height: 90, 
 
     width: 90, 
 
     justifyContent: 'center', 
 
     textAlign: 'center', 
 
     marginHorizontal: 5, 
 
     shadowColor: '#333745', 
 
     shadowOffset: { 
 
      width: 2, 
 
      height: 2 
 
     }, 
 
     shadowOpacity: .6, 
 
     shadowRadius: 5 
 
    }, 
 
    buttonStyle: { 
 
     borderColor: '#FCFFF500', 
 
     backgroundColor: '#DAEDE255', 
 
     borderStyle: 'solid', 
 
     borderWidth: 1, 
 
     height: 100, 
 
     width: 300, 
 
     justifyContent: 'center', 
 
     borderRadius: 50, 
 
     margin: 5, 
 
     flexDirection: 'column' 
 
    }, 
 
    rightText: { 
 
     justifyContent: 'center', 
 
     textAlign: 'right', 
 
     fontWeight: '100', 
 
     marginHorizontal:15, 
 
     fontSize: 20, 
 
     color: '#FCFFF5', 
 
     marginVertical:25, 
 
     flexDirection: 'column' 
 
    }, 
 
    leftText: { 
 
     justifyContent: 'center', 
 
     textAlign: 'left', 
 
     fontWeight: '100', 
 
     marginHorizontal:15, 
 
     fontSize: 24, 
 
     color: '#FCFFF5', 
 
     marginVertical:25, 
 
     flexDirection: 'column' 
 
    } 
 
});