class App extends Component {
    constructor() {
        super();

        this.sprite = null;

        this.onPlay = this.onPlay.bind(this);
    }
    componentDidMount() {
        this.init();
    }

    /**
     * 初始化动画
     */
    init = () => {
        const scene = new Scene('#container', {
            viewport: ['auto', 'auto'],
            resolution: [750, 1254],
        });

        const layer = this.layer = scene.layer();

        this.sprite = new Sprite();

        this.sprite.attr({ anchor: [0, 0], pos: [0, 0], size: [750, 1254], });

        layer.append(this.sprite);
    }

    /**
     * 播放动画
     */
    async onPlay() {
        // 事先缓存的img列表，试图通过切换图片播放一组动画
        const { imgs } = this.props;

        // 纹理贴图
        const keyframes = imgs.map((item) => { return { textures: item } });

        // 播放配置项
        const option = { duration: 3000, iterations: 1, easing: 'linear', fill: 'both' }

        // 执行动画
        await this.sprite.animate(keyframes, option).finished;
    }

    render() {
        return (
            <div className="animation-btn" onClick={this.onPlay}>【点击播放】</div>
        )
    }
}