如何停止react-native动画

问题描述 投票:0回答:2

我试图在本机反应中停止动画,但它不起作用。 我尝试使用 stopAnimation 方法

来做到这一点

这是我的代码:

    constructor(props) {
        super(props);
        //...
        this.state = {
            posY: new Animated.Value(0),
            posX: new Animated.Value(0),
            //...
        };
    }

    componentWillMount(){
        //...
        let eventEmitter = getGlobalEventEmitter();

        eventEmitter.emit('initialize', {words : true});
        eventEmitter.addListener('startGame', ()=>{
            this.setState({initialized: true});
            this.updateText();
        });
    }

    updateText(){

        let currentText = [];
        //... set some values to currentText

        this.props.setText(currentText); // store in redux
        this.startText(this.effects[textEffect]['duration']);
    }

    startText(duration) {

        let viewHeight = 530;
        let fallTo = 500;


        Animated.timing(
            this.state.posY,
            {
                toValue: fallTo,
                duration: duration
            }
        ).start();


        let stopAnimation = function(){
            this.state.posY.stopAnimation();
            console.log("ANIMATION SHOULD STOP");
        };
        stopAnimation = stopAnimation.bind(this);

        eventEmitter.addListener('wordGuessed', ()=>{            
            stopAnimation();
        });

    }

在另一个组件中,我正在触发

wordGuessed
事件,并且控制台日志有效。我做错了什么?

javascript reactjs animation react-native
2个回答
39
投票

只需致电

Animated.timing(
  this.state.posY
).stop();

0
投票

来自 https://www.codedaily.io/courses/React-Native-Animated-for-Beginners/stopAnimation

this._animatedValue = new Animated.Value(0);

Animated.timing(this._animatedValue, {
  toValue: 100,
  duration: 500,
}).start();

setTimeout(
  () =>
    this._animatedValue.stopAnimation(({ value }) =>
      console.log("Final Value: " + value)
    ),
  250
);
© www.soinside.com 2019 - 2024. All rights reserved.