反应本机动画滚动视图 onScroll 事件不适用于外部方法

Question

我在 ReactNative 中制作了一个折叠收费栏，当 Animated.ScrollView contentOffset.y 等于 240 时我需要停止动画。如果我提出任何条件或在外部函数中调用 Animated.event 它不起作用。

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}
     )
   }
>
...

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

我需要制作这个效果：

Answer 1

而不是 stopping scroll event mapping，为什么不将 interpolate 用于您的动画并将 extrapolate 设置为 'clamp'？这将阻止您的动画超出输入和输出值的范围。

不确定您要对哪些样式进行动画处理，但为了展示示例，假设它是一个 translateY 变换：

// 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>

Answer 2

onScroll= {Animated.event(                                         
  [{ nativeEvent: { contentOffset: { y: this. state.scrollY } } }], 
  {                                                                
    useNativeDriver: true,                                         
    listener: event => {                                           
      handlerScroll(event);                             
    },                                                             
  },                                                               
)}

见https://reactnative.dev/docs/animated#event

反应本机动画滚动视图 onScroll 事件不适用于外部方法

React native animation scrollview onScroll event not working with external method

scrollview

reactjs

react-native

android-collapsingtoolbarlayout

react-animated