为什么这里的动画循环之间有暂停? [英] Why is there a pause between animation loops here?

问题描述

我更新了这篇文章，希望有人能听到.我已经设法使循环正常工作(在@Ariel Perez 的帮助下)，但现在它在每个循环之间暂停.

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.

这是发生了什么:

我有一个可以播放所有图像的动画，一旦完成，它就会在最后几帧中连续循环.用户一直按住屏幕.当循环开始时，它会播放 15 帧，然后暂停大约一秒钟，然后再次播放，继续播放.我正在努力摆脱停顿！

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!

以下是动画功能:

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')


})

和渲染:

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?

推荐答案

duration 有问题，因为分割 15 张图片后，长度应该减 15

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,
  })

这篇关于为什么这里的动画循环之间有暂停?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！