5

css3 と javascript を使用してテンプル ランのアニメーションのようなコイン アニメーションを作成しようとしています。

ウェブで同じアニメーションを持つ例はありますか? または、アニメーションを実現するのを手伝ってくれる人はいますか。

更新：

ボタンをクリックすると、ボタンからいくつかのコインが出てきて、バスケットに集められます（ボタンはページのどこにでも配置でき、バスケットは下部に固定されます）

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

Jクエリ

  $('#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 に答える