使用CSS3和Javascript创建硬币动画，如temple run中的动画

我正在尝试使用css3和javascript创建硬币动画，如temple run中的动画。我尝试使用css3中的transition复制动画，但我无法实现相同的效果

他们有没有在网络上有相同动画的例子？或者有谁能帮我实现动画

更新：

点击一个按钮，我想从按钮中取出一些硬币，收集到一个篮子中（按钮可以在页面的任何位置，篮子固定在底部）

使用css3转换和jquery实现

Html

Jquery

  $('#btn1').click(function(){
     $('.coin').css('opacity',1);
     $('#1').addClass('coinanim1');
     $('#2').addClass('coinanim2');
     $('#3').addClass('coinanim3');
     $('#4').addClass('coinanim4');
   }); 



 $('.coin').on('webkitTransitionEnd',function(){

      $('.coin').css('opacity',0);
      $('.coin').attr('class','coin');
  });

演示：

---

我认为您应该使用一些库，特别是用于javascript的物理库，如Box2D，它允许您制作基于重力的动画

还有其他方法，比如创建自己的函数，使用一些计算将精灵（硬币）从位置a移到位置b，使其看起来像是使用曲线路径飞行

但是Box2D已经足够成熟，而且在基于物理的效果方面看起来很棒

---

Box 2d示例：

为什么不简单地使用JQuery动画

$cart=$（“.cart”）；
$（“按钮”）。在（“单击”，函数（）{
$btn=$（此项）；
变量$coin=$（''）
.insertAfter（$btn）
.css({
“左”：$btn.offset（）.left，
“顶部”：$btn.offset（）.top
})
.制作动画({
“顶部”：$cart.offset（）.top，
“左”：$cart.offset（）.left
}，800，函数（）{
$coin.remove（）；
});
});​

---

使用此方法，您还可以使用CSS动画来增强硬币飞入篮子时的行为。

您能提供一个视频吗？让我们看看您到目前为止的代码。@SuperSkunk用文字描述动画，并思考DOM的外观，然后我们可以帮你得到一个CSSthat@Bergi点击一个按钮，我想从按钮中取出一些硬币，收集到一个篮子里（按钮可以在页面的任何地方，篮子固定在底部）你好。？你能把这个函数转换成原始javascript还是我可以在vue js中使用的函数。？

.coinanim{
    top:420px;
    left: 430px;
    width:50px;
    height:50px;
    transition: all 2s ease-in-out; 
    -webkit-transition: all 2s ease-in-out; 
    transition-delay: .36s;   
   -webkit-transition-delay: .36s;  
 }

  $('#btn1').click(function(){
     $('.coin').css('opacity',1);
     $('#1').addClass('coinanim1');
     $('#2').addClass('coinanim2');
     $('#3').addClass('coinanim3');
     $('#4').addClass('coinanim4');
   }); 



 $('.coin').on('webkitTransitionEnd',function(){

      $('.coin').css('opacity',0);
      $('.coin').attr('class','coin');
  });

$cart = $(".cart");
$("button").on("click", function(){
    $btn = $(this);
    var $coin = $('<div class="coin">')
        .insertAfter($btn)
        .css({
            "left": $btn.offset().left,
            "top": $btn.offset().top
        })
        .animate({
            "top": $cart.offset().top,
            "left": $cart.offset().left
        }, 800, function() {
            $coin.remove();
        });
});​