Блог

Как запустить анимацию для перевода и изменения высоты изображения после определенного смещения (например, 100) в ScrollView? Я устанавливаю состояние, когда направление прокрутки уменьшается после достижения смещения, и использую это, чтобы определить, следует ли мне запускать свои функции Animated.timing, но если я использую setState в onScroll своем приложении зависания, возможно, из-за установки состояния слишком много раз, но как этого избежать?

Мой код для настройки состояния:

 onScroll={(event) => {
      const currentOffset = event.nativeEvent.contentOffset.y;
      const direction = currentOffset > offset ? 'down' : 'up';
      if (direction === 'down' amp;amp; currentOffset >= 100 amp;amp; currentOffset <= 110) setRunAnimations(true)
  }}
 

Я использую состояние для запуска своих анимаций, т. Е. Если значение true, то запустите эту функцию:

 const scrollY = useRef(new Animated.Value(0)).current;

const enlarge = () => {
  Animated.timing(scrollY, {
    toValue: 1,
    duration: 5000,
  }).start();
};

if (runAnimations) enlarge();
 

Вы можете избежать множественных заданных состояний, проверив, не является ли runAnimations ложным в вашем onscroll. Например.

 onScroll={(event) => {
      const currentOffset = event.nativeEvent.contentOffset.y;
      const direction = currentOffset > offset ? 'down' : 'up';
      if (!runAnimation amp;amp; direction === 'down' amp;amp; currentOffset >= 100 amp;amp; currentOffset <= 110) setRunAnimations(true)
  }}
 

Анимация будет запущена только один раз. Однако в какой-то момент вы можете сбросить параметры запуска.