2

私は js と jQuery にまったく慣れていないので、ここで何度も議論されている単純なアニメーションを実現したいと考えていました: 跳ねるボールです。ただし、すでに説明したトピックははるかに洗練されていたため、特定の質問に対する答えは見つかりませんでした.

非常に単純なアニメーションが必要です。5 回バウンドし、6 回目で地面にとどまります。それは私がこれまでに達成したものです。しかし、5 回のバウンスでは、バウンスの距離を最初の距離の 20% 減らしたいと考えています。距離が 100 だとすると、最初に 80 にバウンスし、次に 60 にバウンスし、20 から 0 にバウンドします。

ここで私の試みを見ることができます。

または、ここの js コードのみ: 

$(function() {

    var time = 500;
    var bounces = 5;

    function bounceDown(){
      $(".ball").animate({top: 200}, time, function(){
        bounceUp();
      });
    };

    function bounceUp() {
      $(".ball").animate({top: 100}, time);
    };

    function shadowUp(){
      $(".shadow").animate({width: 100, height: 10, left: 85, top: 245, opacity: 1}, time,    
    function(){
        shadowDown();
      });
    };

    function shadowDown() {
      $(".shadow").animate({width: 0, height: 0, left: 130, top: 225, opacity: 0}, time);
    };     

    function finalDown(){
        $(".ball").animate({top: 200}, time);
    };

    function finalShadow(){
        $(".shadow").animate({width: 100, height: 10, left: 85, top: 245, opacity: 1}, time);    
    };

    $(".button").on("click", function(){
      for (var i = 0; i < bounces; i++){
        setTimeout(function(){
          bounceDown();
          shadowUp();      
        }, time*2*i);
        setTimeout(function(){
          finalDown();
          finalShadow();
      }, 5000);
      };               
    });
});
4

1 に答える 1

3

top_bounce初期値を宣言できます。

var top_bounce = 100;

そして、bounceUp関数を次のように変更します。

function bounceUp() {
  $(".ball").animate({top: top_bounce}, time);
    top_bounce = top_bounce + 20;
};

ここでわかるように: http://jsfiddle.net/darkajax/5wASf/

そして、コメントで言及されている「ボーナスの質問」については、似たようなもので、次のような変数を宣言してvar shadow_size = 0;から、次のような関数を宣言します。

function shadowDown() {
        console.log(shadow_size);
      $(".shadow").animate({width: shadow_size*100, height: shadow_size*10, left: 110, top: 225, opacity:  0}, time);
        shadow_size += 0.2;

    };

フィドルが更新されていることがわかります。また、left中央に表示するには、同様のことを行う必要があります

于 2013-03-04T16:00:30.140 に答える