Как вызвать ускорение (уменьшение продолжительности) анимации в React Native?

Question

У меня есть 3-секундная непрозрачность, отображаемая поверх загружаемого изображения. Анимация начинается с onLoadStart. onLoadEnd Я бы хотел быстро завершить sh анимацию независимо от оставшейся продолжительности.

т.е. - если в анимации осталось 2 секунды и изображение загружается, я бы хотел, чтобы анимация была завершена sh за 200 мс. Как?

Вот код пока. Спасибо.

import React from 'react';
import { Animated, ImageBackground } from 'react-native';

const ProgressiveImage = ({ source }) => {
  const opacity = new Animated.Value(0);

  const startOpacityAnimation = () =>
    Animated.timing(opacity, {
      toValue: 1,
      duration: 3000,
    }).start();

  const endOpacityAnimation = () => {
    // Take the current opacity value and
    // finish the animation in 200ms.
  };

  const animatedOpacity = {
    backgroundColor: opacity.interpolate({
      inputRange: [0, 1],
      outputRange: ['rgba(255, 255, 255, 0.4)', 'rgba(255, 255, 255, 0)'],
    }),
  };

  return (
    <ImageBackground
      style={{ height: 100, width: 100 }}
      source={source}
      onLoadStart={startOpacityAnimation}
      onLoadEnd={endOpacityAnimation}
    >
      <Animated.View style={{ flex: 1, ...animatedOpacity }} />
    </ImageBackground>
  );
}

Answer 1

Вы можете попробовать:

const endOpacityAnimation = () => {

    opacity.stopAnimation()

    Animated.timing(opacity, {
        toValue: 1,
        duration: 200
    }).start()

};

Или, если вы хотите, чтобы текущее значение непрозрачности в анимации остановки:

opacity.stopAnimation((value) => {
  if (value < 'some number which means only 1 seconds have passed') {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 200,
    }).start();
  } else {
    // something if have less than 2 seconds to end the animation
  }
});