[react-native] 네이티브 애니메이션, 완전한 이벤트 반응

Program / 글쓴이

Animated.spring이 끝날 때 이벤트를 트리거하는 가장 좋은 방법은 무엇입니까?

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

나는 꽤 많이 검색했지만 그것을 수행하는 단일 방법을 찾지 못했습니다. addListener를 사용하여 애니메이션이 종료 값 또는 시간 초과에 도달했는지 확인할 수 있지만 둘 다 매우 간단해야하는 것에 대한 추악한 수정처럼 느껴집니다.

아는 사람 있나요?

답변

30 분 후에 인터넷 검색을했는데 이걸 발견했는데 더 잘 문서화하지 않았다는 게 믿기지 않습니다.

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

.start(callback)

답변

애니메이션이 시작될 때 실행됩니다.

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

화살표 기능이나 기능을 사용하여에 불려가는 끝났 END 애니메이션

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

그리고 마지막으로 이것이 함수의 맥락에서 보이는 모습입니다.

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

도움이 되었기를 바랍니다.

답변

기본적으로 애니메이션이 완료 될 때 작업을 수행하는 세 가지 접근 방식이 있습니다. 첫째 : call (callback) 메서드에 전달 된 콜백을 사용할 수 있습니다. 두 번째 : 콜백도받는 stopAnimation을 사용할 수 있습니다. 세 번째 : 애니메이션 값에 리스너를 배치하고 현재 값에 따라 작업을 수행하는 제가 선호하는 방법입니다. 예를 들어 0에서 150까지 변환하고 애니메이션 값을 기반으로 ‘모션’이라고 말하고 모션이 값에 도달하면 무언가를 수행 할 수 있습니다.

let motion = Animated.Value(0);

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

👉https : //www.youtube.com/channel/UCl5-W0A8tE3EucM7E_yS62A에 대한 자세한 내용

답변