使用CSS3和Javascript创建类似Temple Run游戏中的硬币动画

Question

我正在尝试使用css3和javascript创建类似temple run中的硬币动画，我尝试使用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/

- fuzionpro

---

你能提供一个视频吗？ - SuperSkunk

让我们看看你目前的代码。 - vdbuilder

@SuperSkunk http://www.youtube.com/watch?v=am-vqXq7JSQ&feature=related - fuzionpro

用语言描述动画并考虑DOM的外观，然后我们可以帮助您获取相应的CSS。 - Bergi

@Bergi 当点击按钮时，我希望一些硬币从按钮中出现并被收集到篮子里（按钮可以在页面的任何位置，而篮子固定在底部） - fuzionpro

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动画来增强硬币在飞向篮筐时的行为。

- gkond

---

你好，能否将这个函数转换为原始的 JavaScript 或者可以在 Vue.js 中使用的函数？ - Abidus Sattar Aziz

Answer 2

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

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

但是，Box2D已经足够成熟，并且在基于物理效果方面表现出色。

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

- Software Guy