1

純粋な CSS を使用してリアルに動くオブジェクトをアニメーション化しようとしています。具体的には：

  1. 何かが落ちる/跳ねる
  2. 振動する弦 (単純な調和運動/正弦波)
  3. 何かが流体を通って落下する (静止から終末速度まで)

私の知る限り、CSS でのスムーズなアニメーションは現在、3 次ベジエ曲線を使用することによってのみ実現できます。

https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function

落下は によって正確にモデル化できることがわかりましcubic-bezier(0.33, 0, 0.66, 0.33)たcubic-bezier(0.33, 0.66, 0.66, 1)。

http://jsfiddle.net/BYossarian/Frg74/2/

(2) および/または (3) に最適なベジエ曲線を知っている人はいますか? また、他のタイプの物理的な動きについて誰かが意見を持っていれば、それも素晴らしいことです.

必要に応じて、私はそれを目の当たりにすることができますが、誰かがすでにこれを持っていることを望んでいました.

4

1 に答える 1

2

わかりましたので、私はこれで遊んでいて、バイブレーションを行っています。予想通り、機能させるには一連のベジエ曲線をつなぎ合わせる必要がありました。

http://jsfiddle.net/BYossarian/wrK44/6/ (Webkit プレフィックスのみ)

赤いボールは CSS を使用してアニメーション化され、灰色のボックスは参照用に JS を使用してアニメーション化されます。コンテナーをクリックして開始/停止します。

アニメーションの CSS (プレフィックスなし) は次のとおりです。

.vibrate {
    animation: shm 2s infinite alternate;
}

@keyframes shm {
    from {
        margin-left:0px;
        animation-timing-function: cubic-bezier(0.25, 0.01, 0.55, 0.16);
    }
    25% {
        margin-left:29.3px;
        animation-timing-function: cubic-bezier(0.52, 0.44, 0.47, 0.44);
    }
    50% {
        margin-left:100px;
        animation-timing-function: cubic-bezier(0.53, 0.56, 0.48, 0.56);
    }
    75% {
        margin-left:170.7px;
        animation-timing-function: cubic-bezier(0.45, 0.84, 0.75, 0.99);
    }
    to {
        margin-left:200px;
    }
}

いくつかのメモ:

  1. これは、振動の中央ではなく、端から始まります。途中から開始する必要がある場合は、animation-delayを使用してオフセットできます。
  2. すべての距離に定数を掛けることで、距離を上下にスケーリングできます。これは機能するはずです。
  3. ここanimation-durationで指定されているのは、ボールが一方の端から他方の端に移動する時間です (戻りの旅は 設定でカバーされますanimation-direction: alternate;)。そのため、オブジェクトが上記の完全なループを実行するのにかかる時間は 4 秒です。

更新: わかりましたので、ようやく流動的な動きを開始する時間を見つけました:

http://jsfiddle.net/S7WRp/ (これも Webkit プレフィックスのみ)

クリックして開始します。最初のボールは JS を介してアニメーション化されます。2 つ目は CSS アニメーションです。3 番目と 4 番目のボールはどちらも一定の速度 (他のボールの終端速度) で移動しており、参照として使用されるため、最初の 2 つのボールが最初に加速し、最後に終端速度に達することがわかります。

CSS:

@keyframes fluidDrop {
    from {
        top: 0px;
        animation-timing-function: cubic-bezier(0.7, 0.22, 0.725, 0.61);
    }
    13.33% {
        top: 31.79px;
        animation-timing-function: cubic-bezier(0.16, 0.1875, 0.24, 0.094);
    }
    23.66% {
        top: 88.3px;
        animation-timing-function: cubic-bezier(0.234, 0.15, 0.88, 0.85);
    }
    65% {
        top: 441.5px;
        animation-timing-function: linear;
    }
    to {
        top: 800px;
    }
}

さらに注意事項:

  1. オブジェクトの形状と流体の粘性がここに影響を与えるので、「平均的な」粘性と球形のオブジェクトを「フリーサイズ」として選びました。
  2. これを使用するには、アニメーションの時間を必要に応じて設定し、top値を比例的にスケーリングして、オブジェクトが落下する距離に一致させます。現時点では、800px の距離で落下します。たとえば、1600px の距離で落下させたい場合はtop、すべてのキーフレームのすべての値を 2 倍します。
于 2013-09-21T17:25:54.473 に答える