为基于多个ScrollView的单个View设置动画 [英] Animating a single View based on multiple ScrollView(s)

问题描述

我正在一个应用程序上尝试根据多个ScrollView的滚动位置对View进行动画处理.

I'm working on an application where I'm trying to Animate a View based on scroll Position of multiple ScrollViews.

这是屏幕的外观.

以上屏幕分为两部分

• 位于顶部的View组件
• 底部的TabNavigator组件

• A View component on Top
• A TabNavigator component at the Bottom

TabNavigator中的每个选项卡都有一个ScrollView(在这种情况下有2个，但可以更多)，我要实现的是在用户向下滚动时将View收起并展开用户向上滚动. 在一个选项卡上，我表现不错，可以按照我的要求正常工作，但是当我添加第二个选项卡时出现了问题.

each tab in TabNavigator has a ScrollView in it (in this case there are 2 but can be more), What I want to achieve is to collapse the View as the user scrolls down and expand it when the user scrolls up. On a single Tab I was doing well, it was working exactly how I wanted it to do, but the problem came when I added the 2nd Tab.

问题

当我在tab1上滚动一点并移至tab2并尝试滚动时，它变得生涩了.查看GIF以了解我要说的话

When I scroll a bit on tab1 and move to tab2 and try to scroll, it gets jerky. see the GIF to understand what I'm trying to say

在expo.io上检查这种零食以实时查看问题

Check this snack on expo.io to see the problem live

snack.expo.io/SytBkdBAW

我尝试过的事情

App.js

export default class App extends Component {

  constructor (props) {
    super(props)

    this.state = {
      /* omitted - not related */
      scrollY: new Animated.Value(0)
    }
  }

  render () {

    let translateY = this.state.scrollY.interpolate({
      inputRange: [0, 600],
      outputRange: [0, -290],
      extrapolate: 'clamp'
    });

    let TabsTranslateY = this.state.scrollY.interpolate({
      inputRange: [0, 600],
      outputRange: [0, -290],
      extrapolate: 'clamp'
    });

    return (
      <View style={styles.container}>
        <Animated.View style={{transform: [{translateY: translateY}], overflow: 'hidden'}}>
          <Text style={styles.welcome}>
            Welcome to React Native!!
          </Text>

          <Text style={styles.time}>
            {this.state.hour} : {this.state.minute}
          </Text>

          <TouchableOpacity onPress={() => { /* omitted */ }} style={styles.button}><Text style={styles.buttonText}>Set Time</Text></TouchableOpacity>
        </Animated.View>
        <Animated.View style={{
          flex: 0,
          transform: [{translateY: TabsTranslateY}],
          height: Dimensions.get('window').height
        }}>
          <Tabs removeClippedSubviews={false} screenProps={{animatedScrollY: this.state.scrollY}}/>
        </Animated.View>
      </View>
    )
  }
}

const styles = StyleSheet.create({/* omitted styles*/})

Home.js(Tab1)

Home.js (Tab1)

/* omitted imports */
export default class Home extends Component {
  /* omitted navigation options */
  constructor (props) {
    super(props)

    this.state = {
      scrollY: this.props.screenProps.animatedScrollY
    }

  }

  render () {
  return (
      <View>
        <Animated.ScrollView onScroll={Animated.event(
          [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}],
          {useNativeDriver: true}
        )} scrollEventThrottle={16}>

          {Array(90).fill().map((v, i) => {
            return <Text key={i}
                         style={{flex: 1, backgroundColor: '#333', padding: 20, marginVertical: 10, color: 'white'}}>Item
              #{i + 1}</Text>
          })}
        </Animated.ScrollView>
      </View>
    )
  }
}

Photos.js(Tab2)

Photos.js (Tab2)

/* omitted imports */
export default class Photos extends Component {
  /* omitted navigation options */
  constructor (props) {
    super(props)

    this.state = {
      PhotosScrollY: this.props.screenProps.animatedScrollY
    }
  }

  render () {
    return (
      <Animated.ScrollView onScroll={Animated.event(
        [{nativeEvent: {contentOffset: {y: this.state.PhotosScrollY}}}],
        {useNativeDriver: true}
      )} scrollEventThrottle={16}>

        <View style={{flex: 1,}}>
          {Array(90).fill().map((v, i) => {
            return <View key={i} style={/* omitted */}>
              <Text style={/* omitted */}>
                Photo #{i + 1}
              </Text>
            </View>
          })}
        </View>

      </Animated.ScrollView>
    )
  }
}

我不确定如何解决此问题，任何建议和解决方案都应感谢.

I'm not sure how to overcome this problem, Any suggestions and solutions are appreciated.

谢谢.

推荐答案

尝试使用所以您需要在App

const tab1ScrollY = new Animated.Value(0)
const tab2ScrollY = new Animated.Value(0)
const scrollY = Animated.add(tab1ScrollY,tab2ScrollY)

scrollY它是tab1 scroll + tab2 scroll

这篇关于为基于多个ScrollView的单个View设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！