svga / SVGAPlayer-Web

Similar to Lottie. Render After Effects / Animate CC (Flash) animations natively on Android and iOS, Web. 使用 SVGAPlayer 在 Android、iOS、Web中播放 After Effects / Animate CC (Flash) 动画。
https://svga.io
Apache License 2.0
954 stars 239 forks source link

一个界面多个动画,出现动画循环混乱现象 #41

Open qyjandroid opened 5 years ago

qyjandroid commented 5 years ago

在一个界面中,我创建了三个Player对象,第一个执行动画是单次动画,第二个是循环动画,会出现单次动画循环情况

PonyCui commented 5 years ago

Please provide a demo.

qyjandroid commented 5 years ago

问题说错了,是另一个问题,就是调用stopAnimation(true),无法停止动画

qyjandroid commented 5 years ago

`starta1= () => {

    const { index } = this.props;
    const dom = document.getElementById(`body_${index}`);
    if (dom) {
        this.eggParser = new window.SVGA.Parser(`#body_${index}`);
        this.eggPlayer = new window.SVGA.Player(`#body_${index}`);
        let path = "../../../assets/svga/sy_d2.svga";
        if (index == 1) {
            path = "../../../assets/svga/sy_d1.svga";
        }
        this.eggParser.load(
            path,
            videoItem => {
                this.eggPlayer.setContentMode("AspectFill");
                this.eggPlayer.setVideoItem(videoItem);
                //player.pauseAnimation();
                setTimeout(() => {
                    console.log("index==", index * 3000);
                    this.eggPlayer.startAnimation();
                }, timeMap[index]);
            },
            function(error) {
                console.log("引导动画==", error);
            }
        );
        this.eggPlayer.onFinished(() => {

        });
    }
};`

start2= () => { const dom = document.getElementById("s1-ani"); if (dom) { this.czParser = new window.SVGA.Parser("#s1-ani"); this.czPlayer = new window.SVGA.Player("#s1-ani"); this.czParser.load( "../../../assets/svga/sy_cz.svga", videoItem => { this.czPlayer.setVideoItem(videoItem); this.czPlayer.startAnimation(); }, function(error) { console.log("==", error); } ); this.czPlayer.onFinished(() => { console.log("动画"); }); } };

handleClick = () => { // const { onClick } = this.props; // onClick && onClick(); this.setState({ start: true }, () => { this.start3(); }); };

`start3 = () => { if (this.czPlayer) { console.log("停止==", this.czPlayer); //异常 this.czPlayer.stopAnimation(true); // this.czPlayer.pauseAnimation(); // this.czPlayer.clear(); } if (this.eggPlayer) { //正常停止 this.eggPlayer.pauseAnimation(); this.eggPlayer.clear();

    // }
};`
PonyCui commented 5 years ago

你可以上传一个压缩包,这样方便重现问题,也可以使用 jsbin.com。