Question

我正在使用这种方法来对图像的循环序列进行动画处理：

export class NowPlayingAnimation extends ThemedComponent<undefined, 
  NowPlayingAnimationState> {
stylesGenerator = stylesGenerator;
styles = stylesGenerator(this.context);

images: any[];

constructor(props: any) {
    super(props);
    this.images = this.animationImages();
    this.next = this.next.bind(this);
    this.state = {index: 0};
}

componentDidMount() {
    this.next();
}

next() {
    setTimeout(() => {
        this.setState({index: (this.state.index + 1) % 42});
        this.next();
    }, 25);
}

render() {
    return (
        <Image
          source={{uri: this.images[this.state.index]}}
          style={this.styles.image}
        />
    );
}

private isiOS() {
    return Platform.OS === Constants.OSType.iOS;
}

private animationImages(): any[] {
    return [
        'ic_main_tab_now_playing_active_0',
        'ic_main_tab_now_playing_active_1',
        'ic_main_tab_now_playing_active_2',
        'ic_main_tab_now_playing_active_3',
        'ic_main_tab_now_playing_active_4',
        'ic_main_tab_now_playing_active_5',
        'ic_main_tab_now_playing_active_6',
        'ic_main_tab_now_playing_active_7',
        'ic_main_tab_now_playing_active_8',
        'ic_main_tab_now_playing_active_9',
        'ic_main_tab_now_playing_active_10',
        'ic_main_tab_now_playing_active_11',
        'ic_main_tab_now_playing_active_12',
        'ic_main_tab_now_playing_active_13',
        'ic_main_tab_now_playing_active_14',
        'ic_main_tab_now_playing_active_15',
        'ic_main_tab_now_playing_active_16',
        'ic_main_tab_now_playing_active_17',
        'ic_main_tab_now_playing_active_18',
        'ic_main_tab_now_playing_active_19',
        'ic_main_tab_now_playing_active_20',
        'ic_main_tab_now_playing_active_21',
        'ic_main_tab_now_playing_active_22',
        'ic_main_tab_now_playing_active_23',
        'ic_main_tab_now_playing_active_24',
        'ic_main_tab_now_playing_active_25',
        'ic_main_tab_now_playing_active_26',
        'ic_main_tab_now_playing_active_27',
        'ic_main_tab_now_playing_active_28',
        'ic_main_tab_now_playing_active_29',
        'ic_main_tab_now_playing_active_30',
        'ic_main_tab_now_playing_active_31',
        'ic_main_tab_now_playing_active_32',
        'ic_main_tab_now_playing_active_33',
        'ic_main_tab_now_playing_active_34',
        'ic_main_tab_now_playing_active_35',
        'ic_main_tab_now_playing_active_36',
        'ic_main_tab_now_playing_active_37',
        'ic_main_tab_now_playing_active_38',
        'ic_main_tab_now_playing_active_39',
        'ic_main_tab_now_playing_active_40',
        'ic_main_tab_now_playing_active_41',
    ];
  }
 }

在本机反应中是否有更好的方法？以获得更好的性能。建议改用Native实施动画吗？

在React native中循环播放图像序列的动画？

0 个答案: