Question

我希望能够获取一个元素并沿着某个任意路径移动它，同时创建元素的中间副本以填充路径。在旧的Windows纸牌游戏中，当你获胜时，你会看到我感兴趣的那种动画：https://www.youtube.com/watch?v=_hNwHdzRKXE

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

我使用jquery和tween.js的解决方案在这里：

$(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();
    }
});

工作演示是here。

我并不特别偏爱任何给定的图书馆。我使用的主要是出于熟悉，但我对任何可行的解决方案持开放态度。我也不太熟悉SVG或画布，但我当然也会接受其中任何一个。

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

0 个答案: