5

我正在尝试使用 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/

在此处输入图像描述

4

2 回答 2

7

为什么不简单地使用 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 动画来增强硬币在飞向篮筐时的行为。

于 2012-10-26T10:33:58.753 回答
2

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

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

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

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

于 2012-10-26T06:57:24.483 回答