如何从屏幕中间到屏幕底部为按钮设置动画

Question

我在 react native 中实现了一个浮动按钮（TouchableOpacity）。 我能够根据滚动位置显示和隐藏按钮。 当滚动视图向上滚动时，我想将按钮完全移出屏幕（底部）而不是显示和隐藏，而当它向下滚动时，我想将按钮从屏幕底部向上移动。 我想使用流畅的动画来实现这一点。

下面是我用来创建浮动按钮并在滚动时显示和隐藏的代码。

//For Handling button show and hide for the scroll position.
handleScroll = (event: any) => {
 const { animatedOpacityValue, showBlueButton } = this.state;
 const scrollPosition = event.nativeEvent.contentOffset.y;
 console.log('Scroll Position:', scrollPosition);

if (scrollPosition > 0 && scrollPosition < 400) {
  Animated.timing(this.state.animatedOpacityValue, {
    toValue: 1,
    duration: 5,
    useNativeDriver: true,
  }).start(() => this.setState({ showBlueButton: true }));
} else if (scrollPosition > 400 && showBlueButton) {
  Animated.timing(this.state.animatedOpacityValue, {
    toValue: 0,
    duration: 5,
    useNativeDriver: true,
  }).start(() => this.setState({ showBlueButton: false }));
 }
};

// 渲染方法

      <ScrollView
              style={styles.scrollViewStyles}
              contentContainerStyle={{ paddingBottom: 330 }}
              contentInset={{
                top: 10,
                bottom: Platform.OS === 'ios' ? 0 : 100,
              }}
              onScroll={this.handleScroll}
              scrollEventThrottle={16}>
              <CardView
                onSymptomLog={() => {
                  this.state.navigation.push('SymptomLogs');
                }}
              />
              <TodaySymptomsCard
                showBlueView={this.state.showBlueView}
                reminderTime={'5:40 PM'}
                symptomsCount={0}
                onEditAction={() => {
                  this.state.navigation.push('SetRemainder');
                }}
              />
               {this.state.showBlueButton && (
                <TouchableOpacity
                  style={{
                    backgroundColor: AppColors.DARK_BLUE_BUTTON_COLOR,
                    top: -50,
                    alignItems: 'center',
                    width: 150,
                    height: 50,
                    borderRadius: 28,
                    justifyContent: 'center',
                    left: '30%',
                    shadowOffset: { width: 1, height: 1 },
                    shadowColor: 'grey',
                    shadowOpacity: 2.0,
                  }}>
                  <Text style={{ color: AppColors.WHITE, fontSize: 20 }}>
                    + Symptoms
                  </Text>
                </TouchableOpacity>
              )} 
              <WearableStatus
                batteryPercentage="80%"
                batteryStatus={true}
              />
              <Support
                address="sdfsd fsdfsdfsdf"
                phone="122-534-3445"
                email="sdfsdfdsfsd@mgail.com"
              />
            </ScrollView>

任何帮助表示赞赏。 谢谢。

Answer 1

根据您的 scrollPosition 调用这些函数

const driver = Animated.value(0) //1 if the button should be shown by default

const fadeIn = () => {
  Animated.timing(driver, {
  toValue: 1,
  duration: 500,
  useNativeDriver: true
  }).start()
}

const fadeout = () => {
  Animated.timing(driver, {
  toValue: 0,
  duration: 500,
  useNativeDriver: true
  }).start()
}

将您的 TouchableOpacity 包裹在 <Animated.View> 中，并设置如下样式：

Style={{
  transform: [{
     translateY: driver.interpolate({
        inputRange: [0, 1],
        outputRange: [startingYPosition, EndingYposition]  
      })
   }]
}}

假设您的按钮的 positionY 在可见时为 700，那么 outputRange 的值将是 [0, 700]