javascript - كيفية إيقاف الرسوم المتحركة حلقة في رد فعل الأصلي؟




animation react-native (2)

لدي الرسوم المتحركة حلقة بسيطة في مكون بلدي مثل هذا:

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

كيف يمكنني إيقاف هذه الرسوم المتحركة؟ على سبيل المثال، عند التنقل إلى شاشة أخرى أو بعد نقر أحد المستخدمين على أحد الأزرار.

حاولت استخدام this.state.angle.stopAnimation () ولكن لاحظت تشغيل الرسوم المتحركة لا يزال يجري طباعتها في وحدة التحكم. هل هناك طريقة توقف مختلفة يجب أن أدعو لمنع تنفيذ رد البداية؟


استنادا إلى تعليقي في الإجابة نجوين هوانغ. هنا طريقة أخرى لوقف الرسوم المتحركة حلقات إذا كنت استدعاء 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();
    }
  });
}

يمكنك إنشاء متغير stopAnimation لوقف الرسوم المتحركة وقتما تشاء فقط عندما stopAnimation === false ثم runAnimation رد الاتصال. على سبيل المثال:

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

لذلك تحتاج فقط إلى إنشاء زر الذي استدعاء وظيفة this.state = { stopAnimation: true } لإيقاف الرسوم المتحركة.

مثال هنا: https://rnplay.org/apps/Lpmh8A .







react-native