Question

我一直在尝试使循环动画正常运行，但是在使用“开箱即用” React Native动画时遇到了令人讨厌的暂停，这是我在这里问过的：

Why is there a pause between animation loops here?

在等待上述帮助时，我正在寻找另一种方法。我的替代方法是以下代码。它使用react-native-animated-sprite https://www.npmjs.com/package/react-native-animated-sprite

我正在为图像帧使用index.js文件，并且实际上是从上面的url复制代码：

const myAnimation = {
    name:"anim",
    size: {width: 220, height: 220},
    animationTypes: ['FIRST', 'LOOP'],
    frames: [


 require('./frame1.png'),
... //the rest of the frames


],
animationIndex: function getAnimationIndex (animationType) {
    switch (animationType) {
        case 'FIRST':
         return [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,18,19,20,21,22,23,24,25,26,27,28,29,30,31];

        case 'LOOP':
        return[18,19,20,21,22,23,24,25,26,27,28,29,30,31];

      }     
    }
}

主要代码：

import myAnimation from '../apptesting/assets/index';

export default class Animation extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      loopStart: false,
      tweenOptions: {},
      isOn: false,
      animationType: 'LOOP',

    };

  }

  onItemMouseDown = () => {
   this.setState({
     isOn: true,
   })

  }

  onItemMouseUp = () => {
    this.setState({
      isOn: false,
      loopStart: false,
    })
  }

 render() {
    return (

 <View style={styles.container}>
 <TouchableOpacity style={styles.button}
        onPressIn={this.onItemMouseDown}
        onPressOut={this.onItemMouseUp}
      >

      </TouchableOpacity>

 {this.state.isOn === true ? 
 <AnimatedSprite
          ref={'animRef'} //not used
          sprite={myAnimation}
          animationFrameIndex={myAnimation.animationIndex(this.state.animationType)} //this allows me to set the state between 'FIRST' and 'LOOP' animation sets from within the index.js file, but as mentioned, I don't know how to make the 'LOOP', loop.
          loopAnimation={false}
          coordinates={{
            top: 200,
            left: 100,
          }}
          size={{
            width: myAnimation.size.width * 0.65,
            height: myAnimation.size.height * 1.65,
          }}
          draggable={true} 
          tweenOptions = {this.state.tweenOptions} //not used
          tweenStart={'fromMethod'}
          onPress={() => {this.onPress();}}
        />
        : null }

      </View>
    );
  }

那么-在渲染完“ FIRST”图像后，如何使“ LOOP”连续循环？

一旦数组播放一次，我将如何循环播放？

0 个答案: