Анимированные сроки нет продолжительности?

Question

Пока я играл с анимированным компонентом, который обеспечивает реагирующее-нативное, я заметил, что функция Animated.timing(); была действительно мощной, но она заканчивается после определенной продолжительности набора.IE duration: 2000,.Продолжительность полезна и все, но что, если мне нужно Animated.Value();, чтобы постоянно увеличивать?Очевидно, что продолжительность не может быть использована, и я хочу выяснить, как увеличить Animated.Value() не на основе продолжительности, а вместо этого увеличить на целое число, например, 2 бесконечно?Кроме того, я хочу использовать useNativeDriver: true,, так как это делает мою анимацию менее медленной.

Как бы я это сделал?Я благодарен за любое предложение / решение!Спасибо за чтение!

Answer 1

Каждая анимация имеет три значения.а) начальное значение, б) конечное значение и в) продолжительность.Я проверял их сам, чтобы убедиться, и кажется, что вы можете динамически изменять их между при каждом запуске, и, кстати, вы можете использовать useNativeDriver: true тоже (также проверял сам).Вот шаблон того, что я сделал.

    export class MyComponent extends React.PureComponent {
    constructor(props) {
        super(props);
        this.duration = 500;
        this.scale = 1.5;
        this.startScale = 1;
        this.animScale = new Animated.Value();
    }

    render(){
        return (
            <Animated.View style={{height: 500}}
               transform: [{scale: this.animScale}>
               <TouchableWithoutFeedback onPress={() => {
                    this.animScale.setValue(this.startScale);
                    Animated.timing(
                        this.animScale,{
                            toValue: this.scale,
                            duration: this.duration,
                            useNativeDriver: true
                        }
                    ).start();
                    this.scale += 0.2;
                    this.startScale += 0.1;
                    this.duration += 100;
               }}>
                    <Text>let's go</Text>
               </TouchableWithoutFeedback>
            </Animated.View>
        )
    }
}