Question

当我在使用react-native提供的Animated组件时，我注意到Animated.timing();函数确实很强大，但是它会在设定的特定时间后结束。即duration: 2000,。持续时间很有用，但是如果我需要一个Animated.Value();来不断增加怎么办？显然，持续时间无法使用，我想了解如何不根据持续时间来递增Animated.Value()，而是无限地递增一个像2这样的整数吗？另外，我想使用useNativeDriver: true,并减少动画播放的时间。

我该怎么做？感谢您提出任何建议/解决方案！感谢您的阅读！

Answer 1

每个动画都有三个值。 a）起始值，b）结束值和c）持续时间。我确定自己进行了测试，以确保可以在每次运行之间之间动态更改它们，并且可以使用useNativeDriver：正确（也进行了自我测试）。这是我所做的模板。

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

动画时间没有持续时间？

1 个答案: