Làm cách nào để dừng hoạt ảnh lặp trong React Native?

Question

Tôi có một hình ảnh động vòng lặp đơn giản trong thành phần của tôi như thế này:

runAnimation() { 
    console.log('run animation'); 
    this.state.angle.setValue(0); 
    Animated.timing(this.state.angle, { 
     toValue: 360, 
     duration: 8000, 
     easing: Easing.linear 
    }).start(() => this.runAnimation()); 
} 

... 

<Animated.Image 
    style={[ 
     styles.rotate, 
     { transform: [ 
      { rotate: this.state.angle.interpolate({ 
       inputRange: [0, 360], 
       outputRange: ['0deg', '360deg'] 
      })}, 
     ]} 
    ]} 
    source={require('./spinning_ball.png')} 
/> 

Làm thế nào tôi ngưng hoạt hình này? Ví dụ: khi điều hướng sang màn hình khác hoặc sau khi người dùng nhấp vào nút.

Tôi đã thử sử dụng this.state.angle.stopAnimation() nhưng chú ý hoạt ảnh chạy vẫn đang được in trong bảng điều khiển. Có một phương pháp dừng khác nhau tôi nên gọi để ngăn chặn các cuộc gọi lại bắt đầu được thực hiện?

Answer 1

Dựa trên nhận xét của tôi trong câu trả lời của Nguyên Hoàng. Đây là một cách khác để ngăn chặn các hình ảnh động lặp nếu bạn gọi this.state.angle.stopAnimation():

runAnimation() { 
    this.state.angle.setValue(0); 
    Animated.timing(this.state.angle, { 
    toValue: 360, 
    duration: 8000, 
    easing: Easing.linear 
    }).start((o) => { 
    if(o.finished) { 
     this.runAnimation(); 
    } 
    }); 
} 

Answer 2

Bạn có thể tạo biến stopAnimation để dừng Hoạt ảnh bất cứ khi nào bạn muốn chỉ khi stopAnimation === false sau đó gọi lại runAnimation chức năng. Ví dụ:

this.state = { stopAnimation: false } 

runAnimation() { 
    this.state.spinValue.setValue(0); 
    Animated.timing(
    this.state.spinValue, 
    { 
     toValue: 1, 
     duration: 3000, 
     easing: Easing.linear 
    } 
).start(() => { 
    if(this.state.stopAnimation === false) { 
     this.runAnimation(); 
    } 
    }); 
} 

Vì vậy, bạn chỉ cần tạo nút có chức năng gọi this.state = { stopAnimation: true } để dừng Hoạt ảnh.

Ví dụ tại đây: https://rnplay.org/apps/Lpmh8A.

Answer 3

Đặt một biến toàn cầu

let dataloaded = false; 

Để ngăn chặn hoạt hình ghi đè lên các biến (dataloaded) bất cứ khi nào bạn muốn

componentWillUnmount() { 
    dataloaded = true; 
} 

onPress={() => { 
    dataloaded = true; 
}} 

mã cuối cùng sẽ trông giống như

runAnimation() { 
    console.log('run animation'); 
    this.state.angle.setValue(0); 
    Animated.timing(this.state.angle, { 
     toValue: 360, 
     duration: 8000, 
     easing: Easing.linear 
    }) 
    .start(() => { 
     if (! dataloaded) { 
      this.runAnimation(); 
     } 
    }) 
}