在 React Native 上动画图像序列 [英] Animate image sequence on React Native

问题描述

我有一个由一系列图像组成的动画:image01.png、image02.png、image03.png 等.我如何让这些在 React Native 上连续动画?

I have an animation consisting of a sequence of images: image01.png, image02.png, image03.png, etc. How do I get these to animate continuously on React Native?

推荐答案

您可以尝试使用库:

• https://github.com/madsleejensen/react-native-image-sequence
• https://github.com/remobile/react-native-image-animation

第一个效率更高，第二个是纯javascript.另一种方法是以你自己的方式实现它，就像这里:https://github.com/facebook/react-native/issues/9280

First is more more efficient, second is in pure javascript. Another way is to implement it on your own way, like here: https://github.com/facebook/react-native/issues/9280

应该是这个样子

export default class Animation extends Component {
    constructor(props) {
        super(props);
        this.images = [
            require('./img_01.png'),
            require('./img_02.png'),
            require('./img_03.png'),
        ];
        this.next = this.next.bind(this);
        this.state = {index: 0};
    }

    componentDidMount() {
        this.next();
    }

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

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

这篇关于在 React Native 上动画图像序列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！