Question

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

Animated.Value.stopAnimation（）也不起作用。

这有效：

context.Database.EnsureDeleted();

这不起作用：

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

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

我需要做出这样的效果：

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

def is_power_of_two(n):
# Check if the number can be divided by two without a remainder
  while n % 2 == 0:
    if n == 0 :
      break;      
    n = n / 2
# If after dividing by two the number is 1, it's a power of two
  if n == 1:
    return True
  return False

请参阅https://reactnative.dev/docs/animated#event

React本机动画scrollview onScroll事件不使用外部方法

2 个答案: