CODEWITHSUNDEEP
react-native
NightTom
NightTom

Reputation: 486

Why is there a pause between animation loops here?

I've updated this post in the hope someone gets wind of it. I've managed to get the loop working (with help @Ariel Perez) but now it is pausing between each loop.

Here's what happens:

I have an animation that plays through all images, then once that is done, it loops continuously over the last few frames. All the while the user is holding down the screen. As the loop begins, it plays the 15 frames, then pauses for about a second, then plays again, continuing on. I'm trying to get rid of the pause!

Here are the animation functions:

export default class Timer extends React.Component {
  constructor(props){
  super(props);

  this.state = {

    isOn:false, 
    mouseUp: null,
    isMouseDown: null,
    stateImages: Images,

  }

  this.animations = new Animated.Value(0);
  this.opacity = [];
  Images.map((item, index) => {

    this.opacity.push(
       this.animations.interpolate({
            inputRange: [index - 1, index, index + 1],
            outputRange: [0, 100, 0],

        }),
      )
    })

// The animation loop function

startAnimation = () => {

  Animated.timing(this.animations, {
    toValue: length - 1,
    duration: 50 * length,
    easing: Easing.linear,
    useNativeDriver: true,
  }).start(({ finished }) => {
    // completion callback

    if (this.state.isMouseDown === true) {
      this.startLoopAnimation();
    }
  });
}

// The animation loop function
startLoopAnimation = () => {
  this.animations = new Animated.Value(0);
    this.opacity = [];
    Images.map((item, index) => {

      this.opacity.push(
        this.animations.interpolate({
           inputRange: [index - 1, index, index + 1],
           outputRange: [0, 100, 200], //adding 200 here keeps the frame rendered but doesn't stop the pause.
      }),
     )
   })

  let orderedImages = Images.slice(Images.length - 15, Images.length);

    this.setState({
      stateImages: orderedImages,
    });
  Animated.timing(this.animations, {
    toValue: length - 1,
    duration: 50 * length,
    easing: Easing.linear,
    useNativeDriver: true,
  }).start(({ finished }) => {

    // completion callback
     if(this.state.isMouseDown === true){

      this.startLoopAnimation(); //this loops the animations last 15 frames

     }

  });
}

onItemMouseDown = () => {

  this.startAnimation() //This starts the entire animation

  this.setState({
  isMouseDown: true,
  isOn: true,
  pauseToggle: 'down',
  mouseUp: 'no',
  twoSecOver: false,

}, () => {
  console.log(this.state.isMouseDown, 'isMouseDown')

})

 this.timer = setInterval(() => {
   this.setState(prevState => ({
     time: prevState.time + 1
      }))
    }, 1000)

  }

onItemMouseUp = () => {
  this.setState({
    stateImages: Images,
    isMouseDown: false,
    isOn:false,
    mouseUp: 'yes',


  },() => {
  console.log(this.state.isMouseDown, 'isMouseDown')
  // console.log(this.state.stateImages, 'stateImages on mouseup')


})

and the render:

render() { //the render shows an image which the user can press on. This then shows the animation.

  return (
    <ImageBackground source={background} style={styles.background}>
      <TouchableOpacity style={styles.background}
        onPressIn={this.onItemMouseDown}
        onPressOut={this.onItemMouseUp}
      >

      </TouchableOpacity>

      {this.state.isOn === true ? (
        <View style={styles.background}>

      <Text style={styles.timer}>{this.state.time}</Text>

        {this.state.stateImages.map((item, index) => {
            const opacity = this.opacity[index];

            return (
              <Animated.View
                key={item.id}
                style={[styles.anim, { animations: item, opacity}]}
              >
              <Image source={item.source} style={styles.animImage}/>
              </Animated.View>

            );
          })}

        </View>
      ) : null}

    </ImageBackground>
  );
 }

Can anyone spot anything that could cause this pause or even suggest a better way to loop through frames?

Upvotes: 2

Views: 565

Answers (1)

Muhammad Numan
Muhammad Numan

Reputation: 25353

there is a problem in duration because after splitting 15 images then you should be minus 15 from the length

const length2 = Images.length-15;

 Animated.timing(this.animations, {
    toValue: length2 - 1,
    duration: 40 * length2, //here was the problem
    easing: Easing.linear,
    useNativeDriver: true,
  })

Upvotes: 1

Related Questions