React Native-iOS中的Bounce效果与动画diffclamp混淆 [英] React Native - Bounce effect in iOS messing with Animated diffclamp

问题描述

编辑：我讨厌谷歌搜索答案，并且发现一些十年前从未解决过的问题，所以我为可能想知道的人回答自己的问题。就我而言，我只是禁用了滚动视图的反弹道具。由于FlatList扩展了React的ScrollView，因此在我创建的动画FlatList组件中将 bounces 设置为 false 可以阻止它弹起并解决我的问题。祝你有美好的一天。

I hate googling for answers and finding some question that never got solved from 10 years ago so I am answering my own question for those that might want to know. In my case, I simply disabled the bounces prop for the scrollview. Since FlatList extends React's ScrollView, setting bounces to false in the animated FlatList component that I created stopped it from bouncing and solved my problem. Have a nice day.

希望你过得愉快。我正在尝试动态设置标题的动画，但是由于某种原因，每当我滚动到滚动视图的开头或结尾之外时，反弹效果就会与Animation混淆。（如下面的gif所示）

hope you're having a great day. I am trying to animate my header dynamically but for some reason whenever I scroll beyond the beginning or the end of the scrollview, the bounce effect messes with the Animation.(as shown in the gif below)

GIF

相同的GIF但分辨率更高

如您所见，当我滚动到顶部并启用bounce动画时，标题认为我正在向下滚动，因为bounce将列表中的第一个元素返回顶部。我该如何解决？我在网络上的某个地方看到，向动画值添加插值器会有所帮助，尽管我不太了解。
下面是我的代码。谢谢

As you can see, when I scroll to the top and enable the bounce animation, the header thinks that i am scrolling down as the bounce returns the first element in the list back to the top. How do I fix this? I saw on the web somewhere that adding an interpolator to the animated value would help, though I don't really understand. Below is my code. Thank You

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)

const tempArray = [
  ...(an array of my data)
]

export default class TempScreen extends React.Component {
  static navigationOptions = {
    header: null
  }

  constructor(props) {
    super(props)
    this.state = {
      animatedHeaderValue: new Animated.Value(0),
    }
  }

  render() {
    const animatedHeaderHeight = Animated.diffClamp(this.state.animatedHeaderValue, 0, 60)
      .interpolate({
        inputRange: [0, 70],
        outputRange: [70, 0],
      })
    return ( <
      View >
      <
      Animated.View style = {
        {
          backgroundColor: 'white',
          borderBottomColor: '#DEDEDE',
          borderBottomWidth: 1,
          padding: 15,
          width: Dimensions.get('window').width,
          height: animatedHeaderHeight,
        }
      } >
      <
      /Animated.View> <
      AnimatedFlatList scrollEventThrottle = {
        16
      }
      onScroll = {
        Animated.event(
          [{
            nativeEvent: {
              contentOffset: {
                y: this.state.animatedHeaderValue
              }
            }
          }]
        )
      }
      data = {
        tempArray
      }
      renderItem = {
        ({
          item
        }) =>
        <
        View style = {
          {
            flex: 1
          }
        } >
        <
        Text style = {
          {
            fontWeight: 'bold',
            fontSize: 30
          }
        } > {
          item.name
        } < /Text> <
        Text > {
          item.year
        } < /Text> <
        /View>
      }
      />

      <
      /View>

    )
  }
}

推荐答案

如果只想解决弹跳问题，则问题是iOS赋予diffClamp负的scrollY值。您需要对它们进行过滤，并确保scrollY保持> = 0，以避免diffClamp受到过度滚动的影响。

If you want to solve the "bounce" problem only, the problem is that iOS gives to diffClamp negative scrollY values. You need to filter these and ensure scrollY remains >= 0 to avoid diffClamp being affected by overscroll.

const clampedScrollY = scrollY.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 1],
  extrapolateLeft: 'clamp',
});

另一种不错的技巧是使用悬崖技术，以便标头仅在最小长度后消失

Another nice trick is to use a "cliff" technique, so that the header only disappear after a minimum scrollY position.

这是我应用中的代码：

const minScroll = 100;

const clampedScrollY = scrollY.interpolate({
  inputRange: [minScroll, minScroll + 1],
  outputRange: [0, 1],
  extrapolateLeft: 'clamp',
});

const minusScrollY = Animated.multiply(clampedScrollY, -1);

const translateY = Animated.diffClamp(
  minusScrollY,
  -AnimatedHeaderHeight,
  0,
);

const opacity = translateY.interpolate({
  inputRange: [-AnimatedHeaderHeight, 0],
  outputRange: [0.4, 1],
  extrapolate: 'clamp',
});

clampedScrollY 将是：

• scrollY = 0时为0


• scrollY = 50时为0


• 当scrollY = 100


• 为0时scrollY = 130


• 170当scrollY = 270

• 0 when scrollY=0
• 0 when scrollY=50
• 0 when scrollY=100
• 30 when scrollY=130
• 170 when scrollY=270

您明白了。因此，如果scrollY> 100， diffClamp 将仅> 0，并且在该阈值之后以1递增1。

You get the idea. So diffClamp will only be > 0 if scrollY > 100, and increment 1 by 1 after that threshold.

这篇关于React Native-iOS中的Bounce效果与动画diffclamp混淆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！