Javascript 脊椎多重动画

我有2个或更多的动画骨架，2个或更多的json文件。我希望他们在同一时间和10秒后播放另一个动画

问题是只有一个动画正在播放，而第二个动画不显示

我的做法如下：

<canvas id="animationCanvas" width="240" height="240"></canvas>
<script>
    var first = true,
        rendererFirst = new spine.SkeletonRenderer('http://someurl.com/images/'),
        spineAFirst = /* My JSON Code */,
        parsedFirst = JSON.parse(spineAFirst);

    rendererFirst.scale = 0.2;
    rendererFirst.load(spineAFirst);
    rendererFirst.state.data.defaultMix = 1.0;

    for (var i in parsedFirst.animations) {
        if (first) {
            first = false;
            rendererFirst.state.setAnimationByName(0, i, true);
        } else {
            rendererFirst.state.addAnimationByName(0, i, true, 10);
        }
    }

    rendererFirst.skeleton.x = 120;
    rendererFirst.skeleton.y = 120;
    rendererFirst.animate('animationCanvas');
</script>

---

当然，我做了两次或更多次。我也尝试过使用单个SkeletonRenderer，只是根据需要多次加载、设置或添加动画，但没有成功。

每次调用渲染器时，渲染器似乎都在清理画布，实现这一点的更好方法似乎是为每个动画创建画布，并将渲染器绑定到每个动画