Question

我正在创建一个可触摸的按钮，以响应本地动画。当按下按钮时，它应该缩小一点。释放压力后，压力应恢复正常。

这是我的代码：

seg_data <- read.csv(file = "SegmentationData.csv",row.names=1)

按下按钮时，将启动pressInHandler中的动画，并且缩放比例从1到0.95进行动画处理。这有效。但是，当我释放压力（调用onPressOut）时，比例会突然恢复为1，而不会产生平滑的动画。似乎从未调用过pressOutHandler（及其中的动画）。

我有另一个具有相同属性的按钮，但没有设置缩放比例，而是设置了背景颜色。

Answer 1

简单点。

注意：始终使用 useNativeDriver：是

const App = () => {
  const animation = new Animated.Value(0);
  const inputRange = [0, 1];
  const outputRange = [1, 0.8];
  const scale = animation.interpolate({inputRange, outputRange});

  const onPressIn = () => {
    Animated.spring(animation, {
      toValue: 1,
      useNativeDriver: true,
    }).start();
  };
  const onPressOut = () => {
    Animated.spring(animation, {
      toValue: 0,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.button, {transform: [{scale}]}]}>
        <TouchableOpacity
          style={styles.btn}
          activeOpacity={1}
          onPressIn={onPressIn}
          onPressOut={onPressOut}>
          <Text style={styles.btnText}>BUTTON</Text>
        </TouchableOpacity>
      </Animated.View>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {flex: 1, alignItems: 'center', justifyContent: 'center'},
  button: {
    height: 70,
    width: 200,
    backgroundColor: 'red',
    marginBottom: 20,
    borderRadius: 10,
  },
  btn: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  btnText: {
    color: '#fff',
    fontSize: 25,
  },
});

缩放带有动画的本机按钮

1 个答案: