React Native Animated, Sự kiện hoàn chỉnh

Question 1

Phương pháp hay nhất để kích hoạt sự kiện khi Animated.spring kết thúc là gì?

Animated.spring(this.state.pan, {
    toValue: 0
}).start()

Tôi đã tìm kiếm khá nhiều và không tìm thấy một cách duy nhất để làm điều đó. Tôi có thể sử dụng addListener để kiểm tra xem hoạt ảnh đã đạt đến giá trị kết thúc hay hết thời gian chờ, nhưng cả hai đều cảm thấy như những bản sửa lỗi xấu xí cho những gì phải siêu đơn giản.

Có ai biết không?

Question 2

Nửa giờ sau googling và tôi tìm thấy điều này, không thể tin được là họ không ghi lại điều này tốt hơn.

https://github.com/facebook/react-native/issues/3212

.start(callback)

Question 3

Điều này sẽ được kích hoạt khi bắt đầu hoạt ảnh

.start(console.log("Start Animation")

Sử dụng một hàm hoặc hàm mũi tên, xong sẽ được gọi ở phần cuối của hoạt ảnh

.start(() => {console.log("Animation DONE")})

Và phân tích đây là những gì nó trông như thế nào trong ngữ cảnh của một hàm.

_play(){
  Animated.timing(this.state.progress, {
     toValue: 1,
     duration: 5000,
     easing: Easing.linear,
   }).start(() => {console.log("Animation DONE")});
}

Hy vọng rằng sẽ giúp!

Question 4

Về cơ bản, có ba cách tiếp cận này để làm điều gì đó khi hoạt ảnh kết thúc. Đầu tiên: bạn có thể sử dụng phương thức gọi lại được truyền vào phương thức gọi lại (callback). Thứ hai: Bạn có thể sử dụng stopAnimation cũng chấp nhận lệnh gọi lại Thứ ba: Cách ưa thích của tôi, bao gồm việc đặt người nghe vào giá trị hoạt ảnh và làm điều gì đó dựa trên giá trị hiện tại. Ví dụ: bạn có thể tạo bản dịch từ 0 đến 150 và dựa trên giá trị mà bạn tạo hoạt ảnh, hãy nói 'chuyển động' và khi chuyển động đạt đến giá trị, bạn có thể thực hiện điều gì đó.

let motion = Animated.Value(0);

motion.addListener(({value}) =>{
  if(value>=10){
    pos.stopAnimation((val)=>{console.log('stopped in '+val)});
  }
});

Thêm trên👉https: //www.youtube.com/channel/UCl5-W0A8tE3EucM7E_yS62A