animated.loop防止animated.sequence中的animated.timing

Question

我想运行一个动画，在这个动画中，棒球棒在球开始旋转并在屏幕上移动后，首先击打一个球，我有一个问题，当我在animated.sequence中编写一个animated.loop (用于旋转球)时，所有在animated.loop之后编写的animated.timing代码都被阻止了我该如何解决这个问题？

const ColorBox =()=>{

   const BaseballValue=new Animated.Value(0);
   const BaseballValue2=new Animated.Value(0);
   const BaseballValue3=new Animated.Value(0);
   const BallValue= new Animated.Value(0);
   const BallValue2= new Animated.Value(0);
useEffect(()=>{

  Animated.sequence([

    Animated.timing(BaseballValue,{
toValue:1,
duration:500,
easing:Easing.ease


    }),
     Animated.timing(BaseballValue3,{
     toValue:1,
     duration:400,
     easing:Easing.ease


     }),


    Animated.timing(BaseballValue2,{

    toValue:1,
    duration:400,
    easing:Easing.ease



    }),
   Animated.loop(
    Animated.timing(BallValue,{
    toValue:1,
    duration:800,
    easing:Easing.linear,
    delay:0



    })),

 Animated.spring(BallValue2,{

toValue:1,




 })





  ]).start();


})




const SpinBaseball=BaseballValue.interpolate({
inputRange:[0,1],
outputRange:['0deg','-90deg']


})


const BackwardBaseball=BaseballValue3.interpolate({
   inputRange:[0,1],
   outputRange:[0,-30]


})



const MovingBaseball=BaseballValue2.interpolate({
inputRange:[0,1],
outputRange:[0,210]


})


const SpinBall=BallValue.interpolate({
inputRange:[0,1],
outputRange:['0deg','360deg']

})


const MovingverticalBall=BallValue2.interpolate({

inputRange:[0,1],
outputRange:[0,150]


})







 return(

    <View>
<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
   <Animated.Image
    source={require('.././images/ball.png')}

    style={{...styles.ball, transform:[{rotate:SpinBall}, {translateX:MovingverticalBall}] }}

   >
   </Animated.Image>
   </View>
 <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>

  <Animated.Image
   source={require('.././images/baseball.png')}
   style={{...styles.baseball, transform:[{rotate:SpinBaseball},{translateX:BackwardBaseball}, {translateX:MovingBaseball}]}}
  >



  </Animated.Image>

 </View>

 </View>
 )


}

export default ColorBox;



const styles=StyleSheet.create({

   ball:{
   width:80,
   height:80

   },

baseball:{
   width:250,
   height:100,




}




})

Answer 1

并行运行一个函数，在里面你将同时运行序列和循环

 Animated.parallel([
      Animated.sequence([
        Animated.timing(BaseballValue, {
          toValue: 1,
          duration: 500,
          easing: Easing.ease,
        }),
        Animated.timing(BaseballValue3, {
          toValue: 1,
          duration: 400,
          easing: Easing.ease,
        }),
        Animated.timing(BaseballValue2, {
          toValue: 1,
          duration: 400,
          easing: Easing.ease,
        }),
        Animated.spring(BallValue2, {
          toValue: 1,
        }),
      ]),

      Animated.loop(
        Animated.timing(BallValue, {
          toValue: 1,
          duration: 800,
          easing: Easing.linear,
          delay: 0,
        }),
      ),
    ]).start();
  });

Answer 2

您可以使用Animated.parallel方法

并行调用将同时在数组触发器中具有所有已定义的动画。

有关更多详细信息，请参阅Animated.parallel。