1
我試圖同時限制我的動畫值(使用鉗位以及插值),但也可以將值從插值中移出以便我可以使用它們。具體而言,因爲我想更新一個狀態與他們並創建一個可觀察的。我只是不知道如何從插值生成的AnimatedValue中提取「真實」值(在本例中爲state.panValue)。我試過動畫 - 如何通過插值將動畫值轉換爲實際值
this.state.panValue.value
和
this.state.panValue._value
和他們回來爲未定義。如果有人能幫助我,那將是驚人的!
編輯:我還得到真正的幸福,只是有
this.state.pan.x
變量的範圍內更新的,所以我可以跳過這個更新的狀態變量「panValue」的事情。 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;
驚人的,澄清了許多非常感謝! –