3

2つのキーフレームアニメーション「バウンスイン」と「バウンスアウト」があります。バウンスインアニメーションは完了するのに1.2秒かかりますが、終了する前にユーザーがバウンスアウト機能をトリガーすると、100％のスケールにジャンプします。 t現在のアニメーション位置から適切にスケールアウトします。

これはキーフレームアニメーションで可能ですか？私はそれがtransitionプロパティで行われているのを見ましたが、scale（）は使用していません。

@-webkit-keyframes Bounce-In 
{
0% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
60% { -webkit-transform: scale(0.7) }
80% { -webkit-transform: scale(1.0) }
90% { -webkit-transform: scale(0.9) }
100% { -webkit-transform: scale(1.0) }
}

@-webkit-keyframes Bounce-Out 
{
0% { -webkit-transform: scale(1.0) }
40% { -webkit-transform: scale(0.1) }
60% { -webkit-transform: scale(0.4) }
80% { -webkit-transform: scale(0.1) }
90% { -webkit-transform: scale(0.2) }
100% { -webkit-transform: scale(0) }
}

JSFiddleのデモがあります：http：//jsfiddle.net/Vn3bM/98/ * アニメーションが終了する前に[ゲーム]の円をクリックすると、他の2つが100％にジャンプし、アニメーション化されます（これがスムーズにしようとしています）。

バウンスアウトから0％のキーフレームを削除しようとしましたが、それは役に立ちませんでした...

4

1 に答える 1

12

あなたの場合、アニメーションで気付く「ジャンプ」は、onmouseup にインストールしたアニメーションの変更によるものです。「Bounce-Out」アニメーションの初期スケールは 1 (最初のキーフレーム) で、アニメーションがインストールされるとすぐに 2 つの円が設定されます。

これには 2 つの解決策があり、詳しく説明できます。


簡単な方法

「webkitAnimationEnd」イベントを介して最初のアニメーションが終了するのを待つだけで、アニメーションが終了するのを待つ再帰関数を含む onmouseup イベントをインストールできます。

var initAnimationEnded = false;
document.getElementById('sports').addEventListener('webkitAnimationEnd', function() {
 initAnimationEnded = true;
}, false);​

onmouseup ハンドラは次のとおりです。

document.getElementById('games').onmouseup = function() {
  function bounceOut() {
    if (initAnimationEnded) {
        events.style.webkitAnimationName = "Bounce-Out";
        sports.style.webkitAnimationDelay = "0.2s";
        sports.style.webkitAnimationName = "Bounce-Out";
    } else {
        setTimeout(bounceOut, 20);
    }
  }
  bounceOut();
}


ここに jsfiddle をインストールしたので、動作を確認できます。バウンス アウト アニメーションは、アニメーションが終了した後にのみトリガーされます。これは特に珍しいことではありません。


ハードウェイ

アニメーションを一時停止し、変換の現在の値を解析してから、一時的なキーフレーム アニメーションをインストールしてバウンスすることができます。ただし、これははるかに冗長になります。

まず、アニメーションを停止する必要があります。

events.style.webkitAnimationPlayState = "paused";
sports.style.webkitAnimationPlayState = "paused";

次に、ヘルパーを設定して新しい css ルールを挿入します。

var addCssRule = function(rule) {
  var style = document.createElement('style');
  style.innerHTML = rule;
  document.head.appendChild(style);
}

次に、その場で css キーフレーム ルールを作成して挿入します。

    // get the current transform scale of sports and events

    function getCurrentScaleValue(elem) {
      return document.defaultView.
      getComputedStyle(elem, null).
      getPropertyValue('-webkit-transform').
      match(/matrix\(([\d.]+)/)[1];
    }

    var currentSportsScale = getCurrentScaleValue(sports);
    var currentEventsScale = getCurrentScaleValue(events);

     // set up the first string for the keyframes rule

    var sportsTempAnimation = ['@-webkit-keyframes Sports-Temp-Bounce-Out {'];
    var eventsTempAnimation = ['@-webkit-keyframes Events-Temp-Bounce-Out {'];

     // basic bounce out animation

    var bounceOutAnimationBase = {
        '0%': 1,
        '40%': 0.1,
        '60%': 0.4,
        '80%': 0.1,
        '90%': 0.2,
        '100%': 0
    };

     // scale the animation to the current values

    for (prop in bounceOutAnimationBase) {
        sportsTempAnimation.push([
          prop, ' 
          { -webkit-transform: scale(', 
          currentSportsScale * bounceOutAnimationBase[prop], 
          ') } '].join(''));
        eventsTempAnimation.push([
           prop, 
           ' { -webkit-transform: scale(', 
           currentEventsScale * bounceOutAnimationBase[prop], 
           ') } '
         ].join(''));
    }

     // add closing brackets

    sportsTempAnimation.push('}');
    eventsTempAnimation.push('}');

     // add the animations to the rules

    addCssRule([sportsTempAnimation.join(''), 
                eventsTempAnimation.join('')].join(' '));

次に、次のルールでアニメーションを再開します。

    events.style.webkitAnimationName = "Events-Temp-Bounce-Out";
    events.style.webkitAnimationDelay = "0s";
    sports.style.webkitAnimationDelay = "0s";
    sports.style.webkitAnimationName = "Sports-Temp-Bounce-Out";
    events.style.webkitAnimationPlayState = "running";
    sports.style.webkitAnimationPlayState = "running";


ほら。ここでjsfiddleを作成したので、それをいじることができます。


より多くの砂糖

  • あなたの例では、円は bounce で交互に跳ね返ります。すべてのスポーツ サークル アニメーションに対して setTimeout を使用すると、2 番目のソリューションでこれを簡単に機能させることができます。サンプル コードが不必要に複雑になるため、ここには含めたくありません。

  • 提供されている例が実際には DRYではないことはわかっています。たとえば、イベントやスポーツのすべてのものをコードの半分の行 (メタ プロパティを使用) で動作させることができますが、読みやすさの点では、この例はうまく機能すると思います。

  • css3 animations をサポートするすべてのブラウザーでこの例を機能させるには、トランジション プロパティを正規化する必要があります。JavaScript でこれを行うには、こちらをご覧ください。サンプルはアニメーションやその他のプロパティでも機能します。「transition」を必要なプロパティに置き換えるだけです。

  • オンザフライで css3 アニメーションを変更する方法についてさらに読むには、この投稿が非常に役立つことがわかりました。こちらもご覧ください。

于 2012-07-10T07:58:53.430 に答える