用javascript重新创建旧的windows纸牌获奖动画

我希望能够在创建元素的中间副本以填充路径的同时，获取元素并将其沿任意路径移动。在旧的Windows纸牌游戏中，当你获胜时，你会看到我感兴趣的动画：

我可以设置任意路径的动画（我对上面链接中看到的反弹动画不是特别感兴趣），但是插入元素的副本是很棘手的。我确实有一个解决方案，使用requestAnimationFrame和jQuery克隆元素并将该副本放置在每个动画帧上，但我的主要问题是，当动画快速移动时，每个元素副本之间的空间变得太大。我想保持一个紧密的分组，无论动画的速度如何

我使用jquery和的解决方案如下：

一个正在运行的演示正在进行中

---

我并不特别偏爱任何给定的图书馆。我使用我所做的大部分是出于熟悉，但我愿意接受任何可行的解决方案。我也不太熟悉SVG或canvas，但我肯定也会对它们中的任何一种开放。

demo不起作用。TWEEN是未定义的——一个带有TWEEN内联的版本。如果你不反对使用画布，看看这个：当你为画布设置动画时，你应该删除它，然后绘制下一帧，你应该在每一帧都这样做。如果你只是省略擦除画布，你会很容易得到这种效果。

$(function () {
    animate();

    var top = parseInt($('#mark').css('top'));
    var left = parseInt($('#mark').css('left'));
    var tween = new TWEEN.Tween({x: 0, y: 0})
            .to({x: 200, y: 200}, 500)
            .easing(TWEEN.Easing.Elastic.InOut)
            .onUpdate(function () {
                var mark = document.getElementById('mark');
                mark.style.transform = 'translate(' + this.x + 'px, ' + this.y + 'px)';

                var clone = $('#mark').clone().css({
                    transform: '',
                    position: 'absolute',
                    top: (top + this.y) + 'px',
                    left: (left + this.x) + 'px'
                }).attr('id', 'mark-' + this.y + '-' + this.x);
                $('#wrap').append(clone);
            })
            .start();

    function animate(time) {
        requestAnimationFrame(animate);
        TWEEN.update();
    }
});