Hoạt ảnh lặp lại với ảnh động mới api

Question

Phản ứng gốc giới thiệu API Animated mới, tôi muốn tạo hoạt ảnh vòng lặp như quy mô bong bóng lên rồi giảm tỷ lệ và lặp lại tiến trình đó.

Tuy nhiên tôi không thể tìm ra. Tôi đã thử viết một số mã như bên dưới

class TestProject extends React.Component { 

    constructor(): void { 
    super(); 
    this.state = { 
     bounceValue: new Animated.Value(0), 
     v: 1, 
    }; 
    } 

    componentDidMount() { 
    this.state.bounceValue.setValue(1.5); 

    let animation = Animated.timing(this.state.bounceValue, { 
     toValue: this.state.v, 
    }); 

    setInterval(() => { 
     animation.stop(); 

     if (this.state.flag) { 
     this.state.v = 0.5; 
     this.state.bounceValue.setValue(0.5); 
     } 
     else { 
     this.state.v = 1.5; 
     this.state.bounceValue.setValue(1.5); 
     } 

     animation.start(); 
    }, 5000); 

    } 

    render(): ReactElement { 
    return (
     <View style={styles.imageContainer}> 
     <Image 
      style={styles.image} 
      source={{uri: 'http://image142-c.poco.cn/best_pocoers/20130517/91062013051716553599334223.jpg'}} 
     /> 
     <Animated.Text 
      style={[ 
      styles.test, 
      {transform: [ 
       {scale: this.state.bounceValue}, 
      ],} 
      ] 
      }> 
      haha 
     </Animated.Text> 
     </View> 
    ); 
    } 

} 

nhưng không hoạt động tốt.

Mọi đề xuất sẽ được đánh giá cao.

Answer 1

tôi sử dụng phương pháp chuỗi để vượt qua một loạt các hình ảnh động để chu kỳ và sau đó lặp lại các chức năng.

//this.state.animatedStartValue = 0; 

function cycleAnimation() { 
    Animated.sequence([ 
    Animated.timing(this.state.animatedStartValue, { 
     toValue: 1, 
     duration: 500, 
     delay: 1000 
    }), 
    Animated.timing(this.state.animatedStartValue, { 
     toValue: 0, 
     duration: 500 
    }) 
    ]).start(() => { 
    cycleAnimation(); 
    }); 
} 

Nếu tôi chuyển đổi qua lại rằng hình ảnh động trên riêng của nó nó sẽ mờ dần vào/ra, tuy nhiên tôi lớp nó trên một cơ sở để bắt chước một tiểu bang hay hotspot kiểu hoạt động nút

<TouchableOpacity> 
    <Animated.Image 
     source={activeImageSource} 
     style={this.state.animatedStartValue}} 
    /> 
    <Image source={nonActiveImageSource} 
    /> 
    </TouchableOpacity> 

React Native Sequence Documentation

Answer 2

Dường như 'vòng lặp' không được hỗ trợ bởi số Animated api bây giờ.

Tôi đã thực hiện điều đó bằng cách bắt đầu lại hoạt ảnh khi hoàn tất.

startAnimation() { 
    Animated.timing(this._animatedValue, { 
    toValue: 100, 
    duration: 1000, 
    }).start(() => { 
    this.startAnimation(); 
    }); 
} 

Mong một giải pháp tốt hơn ...

Answer 3

Bạn có thể thiết lập hình ảnh động khác sau đó gọi các hình ảnh động một lần nữa:

một ví dụ tôi đã làm mờ dần văn bản trong và ngoài:

textAnimate: function() { 
    Animated.timing(
     this.state.textOpacity, 
     { 
     toValue: 0.3,       
     duration: 500, 
     } 
    ).start(() => { 
     Animated.timing( 
     this.state.textOpacity,    
     { 
      toValue: 1,      
      duration: 500,   
     } 
    ).start(() => { 
      this.textAnimate(); 
     }); 
    });  
    }, 

    componentDidMount: function() { 
    this.state.textOpacity.setValue(1) 
    this.textAnimate(); 
    }, 

Answer 4

phiên bản cải tiến của câu trả lời @bcomerford

//this.state.animatedStartValue = 0; 

function cycleAnimation() { 
    Animated.sequence([ 
    Animated.timing(this.state.animatedStartValue, { 
     toValue: 1, 
     duration: 500, 
     delay: 1000 
    }), 
    Animated.timing(this.state.animatedStartValue, { 
     toValue: 0, 
     duration: 500 
    }) 
    ]).start(event => { 
    if (event.finished) { 
     cycleAnimation(); 
    } 
    }); 
} 

Answer 5

Có bây giờ loop animation sẵn:

Animated.loop(
    Animated.sequence([ 
    Animated.timing(this.state.animatedStartValue, { 
     toValue: 1, 
     duration: 500, 
     delay: 1000 
    }), 
    Animated.timing(this.state.animatedStartValue, { 
     toValue: 0, 
     duration: 500 
    }) 
    ]), 
    { 
    iterations: 4 
    } 
).start() 

Answer 6

Hãy thử một cái gì đó như thế này:

componentDidMount() { 
 
    this.bootAnimation(); 
 
    } 
 

 
    bootAnimation() { 
 
    this.animation = Animated.loop(
 
     Animated.timing(this.state.progress, { 
 
     toValue: 1, 
 
     duration: 5000 
 
     }) 
 
    ).start(); 
 
    }