反应原生动画scrollview onScroll事件不适用于外部方法

问题描述

我在ReactNative中折叠了收费栏，并且当 Animated.ScrollView contentOffset.y等于240时，我需要停止动画播放.如果我放置任何条件或在外部函数中调用Animated.event，不起作用.

I make a collapsing tollbar in ReactNative and i need stop de animation when the Animated.ScrollView contentOffset.y is equal 240. If i put any condition or call the Animated.event in external function it dosn´t work.

Animated.Value.stopAnimation()也不起作用.

这有效:

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

这不起作用:

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

这也不起作用

<Animated.ScrollView
   scrollEventThrottle={1}
   onScroll={
     this.state.canScroll &&
     Animated.event(
       [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}],
       {useNativeDriver: true}
     )
   }
>
...

我不知道还能用什么来停止动画.

I don´t know what more i can use to stop my animation.

我需要产生这种效果:

推荐答案

而不是停止滚动事件映射，为什么不将extrapolate设置为"clamp"的动画使用interpolate?这将阻止您的动画超出输入和输出值的范围.

Instead of stopping scroll event mapping, why not use interpolate for your animation with extrapolate set to 'clamp'? This will stop your animation from going beyond the bounds of input and output values.

不确定要设置哪种样式的动画，但是为了显示示例，我们假设这是一个transformY转换:

Not sure what styles you’re trying to animate but for the sake of showing an example let’s say it was a translateY transform:

// onScroll map data to Animated value
onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
    { useNativeDriver: true }
)}

<Animated.View
    style={{
        transform: [{
            translateY: this.state.scrollY.interpolate({
                inputRange: [0, 240],
                outputRange: [0, -160],
                extrapolate: 'clamp' // clamp so translateY can’t go beyond -160
            })
        }]
    }}
>
    ...
</Animated.View>

这篇关于反应原生动画scrollview onScroll事件不适用于外部方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！