使用CSS3和Javascript创建像寺庙运行中的动画一样的硬币动画

Question

我正在尝试使用css3和javascript创建像寺庙运行中的动画一样的硬币动画我尝试使用css3中的过渡来复制动画，但我无法实现相同的

是他们在网络上有相同动画的任何例子吗？或任何人都可以帮助我实现动画。

更新：

点击一个按钮，我想要一些硬币从按钮中出现并收集到一个篮子里（按钮可以在页面的任何地方，篮子固定在底部）

使用css3过渡和jquery

实现

HTML     

   <button id="btn1">button1</button>

   <div id="1" class="coin"></div>
   <div id="2" class="coin"></div> 
   <div id="3" class="coin"></div> 
   <div id="4" class="coin"></div> 
   <div id="basket"></div>
</div>​

的CSS

.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;  
 }

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');
  });

演示：http://jsfiddle.net/dA42n/23/

Answer 1

为什么不简单地使用JQuery动画？ http://jsfiddle.net/KeeB2/2/

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

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

Answer 2

我认为你应该使用一些库，尤其是像Box2D这样的javascript物理库，它可以让你制作这种基于引力的动画。

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

但Box2D足够成熟，在基于物理的效果方面看起来很棒。

方框2d示例：http://box2d-js.sourceforge.net/index2.html