我复活的作品不止一次.如何才能让这部动画一次性运行

Question

我正试图让我的选项卡在向下滚动时显示动画。onScroll发送布尔值，如果最后一个y坐标大于当前y坐标，则向上滚动，否则向下滚动。如果我继续向下滚动，scroll仍然会向我的函数发送真实值，并且animaton会多次工作。我怎么能禁用位置，这样只有toValue才能工作，并且我的函数不会一次又一次地触发，而从onScroll返回布尔值是一样的。

function runTiming(value, dest) {
const clock = new Clock();
const state = {
finished: new Value(0),
position: new Value(0),
time: new Value(0),
frameTime: new Value(0),
};
const config = {
duration: 200,
toValue: new Value(0),
easing: Easing.inOut(Easing.cubic),
};
return block([
cond(clockRunning(clock), 0, [
set(state.finished, 0),
set(state.time, 0),
set(state.position, value),
set(state.frameTime, 0),
set(config.toValue, dest),
startClock(clock),
]),
timing(clock, state, config),
cond(state.finished, debug('stop clock', stopClock(clock))),
state.position,
]);
}

Answer 1

这可能是由于onScroll事件被多次触发所致。

我昨天刚刚对此进行了编码，并将向您提供正在运行并经过测试的代码：

export const throttle = (func, limit) => {
let inThrottle
return function() {
const args = arguments
const context = this
if (!inThrottle) {
func.apply(context, args)
inThrottle = true
setTimeout(() => inThrottle = false, limit)
}
}
}
class MainComponent extends PureComponent {
constructor(props) {
super(props);
this.offset = 0;
this.isAnimatingMenu = false;
this.onScroll = this.onScroll.bind(this)
};
onScroll = throttle(event => {
const currentOffset = event.nativeEvent.contentOffset.y;
const direction = currentOffset > this.offset ? 'down' : 'up';
const diff = currentOffset - this.offset;
if (direction === 'down' && diff > 9 && !this.isAnimatingMenu) { 
this.isAnimatingMenu = true
this.onHideMenu(() => this.isAnimatingMenu = false)
}
if (direction === 'up' && diff < -9 && !this.isAnimatingMenu) {
this.isAnimatingMenu = true
this.onShowMenu(() => this.isAnimatingMenu = false)
}
this.offset = currentOffset;    
}, 75)
render() {
<FlatList 
windowSize={1}
bounces={false}
style={styles.flex1}
scrollEventThrottle={75}
onScroll={this.onScroll}
renderItem={this.renderItem}
data={this.deriveHomeWidgetsDataFromProps()}
/>
}
}

在函数onHideMenu和onShowMenu中，调用动画函数来显示/隐藏菜单。CCD_ 3也可以在CCD_ 4或CCD_ 5上实现。如果你需要更多的帮助，请告诉我。