CODEWITHSUNDEEP
loopsreact-nativeanimation
roz333
roz333

Reputation: 715

animated.loop prevent animated.timing inside a animated.sequence

I want to run an animation, In this animation a baseball bat hits a ball in the first place after that ball start to spinning and moving on screen, I've got just one problem, when i write an animated.loop ( for spinning ball) inside animated.sequence, all animated.timing codes that have been written after animated.loop are prevented How can i fix this?

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,




}




})

Upvotes: 1

Views: 436

Answers (2)

user12723070
user12723070

Reputation:

You can use the method Animated.parallel

The parallel call will have all defined animations in the array trigger at the same time.

See Animated.parallel for more details.

Upvotes: 1

Yoel
Yoel

Reputation: 7985

Run a function parallel and inside you will run sequence and loop together

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

Upvotes: 1

Related Questions