8

地球を見下ろしているように要素をアニメートしたい。要素はあなたに向かってジャンプし、その頂点に当たり、少し落ちます。軌道の側面図は次のようになります。

     _
   /   \
  /     |
 |
 |

キーフレームアニメーションではリアルな効果を得ることができませんでした。鉱山は次のように人工的に見えます：

    /\
   /  \
  /
 /
/

CSS

@keyframes springIn {
    0% {
        transform: scale(0.0);
    }
    80% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1.0);
    }
}

.someElement {
    animation: springIn 1s linear 1s 1 forwards;
}

重力効果を得るために、アニメーションに放物線関数をどのように配置しますか？ベジェ曲線を使用できると思いましたが、CSS標準では[0、0]以外のポイントは許可されていません。

4

3 に答える 3

9

animation-timing-function キーフレームで使用して、2つのトランジション（上昇とそれに続く下降）を放物線状にします。

これを正しく行うには（つまり、物理学に従って）、最初に「ピーク」ポイントのスケールと時間が正しく対応していることを確認する必要があります。アニメーションは0％から100％まで実行され、放物線の上部（最大スケールのポイント）は2つの間のどこかにあります。これを、 m％と呼びます。スケールは0（0％）で始まり、1（100％）で終わり、たとえばs（m ％）でピークになります。次に、少し基本的な計算を使用すると、これら2つの変数間の関係は次のようになります。

m = 100 / (1 + sqrt(s-1))

また

s = (100/m - 1)^2 + 1

...したがって、80％でピークに達するには、s = 17/16=1.0625が必要です。

または、最大スケールsが1.2の場合、 m = 69.0983 ...％でピークに達する必要があります。

ここで、トランジションを適切に放物線状にするには、放物線状のanimation-timing-function設定を使用する必要があります。オブジェクトが飛び出したり、落下し始めたりするようなものを効果的に使用したいのですが、これら2つのキーワードに関連付けられた3次ベジェ曲線は正確には放物線ではありません 。ease-out ease-in

代わりに、以下を使用してください。

animation-timing-function: cubic-bezier(0.33333, 0.66667, 0.66667, 1)

アニメーションの「上昇」部分の場合、および：

animation-timing-function: cubic-bezier(0.33333, 0, 0.66667, 0.33333)

「落下」部分のために。これらは正確な放物線を提供します。（これらの値の導出の背後にある数学については、ここを参照してください。理想的には、0.33333ではなく1/3、0.66667ではなく2/3を使用しますが、CSSでは分数は許可されないことに注意してください）。

これらすべてをまとめると、このCSSが得られます。

.someElement { animation: springIn 1s linear 1s 1 none }

@keyframes springIn
{
  0% { transform: scale(0.0); animation-timing-function: cubic-bezier(0.33333, 0.66667, 0.66667, 1) }
  69.0983% { transform: scale(1.2); animation-timing-function: cubic-bezier(0.33333, 0, 0.66667, 0.33333) }
  100% { transform: scale(1.0) }
}

...そして、私が正しい合計を行った場合、それはあなたに完全に放物線状のアニメーションの軌跡を与えるはずです！

（注：アニメーションが終了した後も強制を継続する必要がないように思われたため、animation-fill-modeを「none」に変更しましたtransform: scale(1.0)。これが何らかの理由で実際に必要な場合は、この値を「forwards」に戻します）。

于 2013-06-02T14:03:50.007 に答える
8

ベジェ曲線を使ってできると思います。

あなたの場合、それはそのようなものである可能性があります：

-webkit-transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-moz-transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-ms-transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-o-transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); 
transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-moz-transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-ms-transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-o-transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); 
transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); /* custom */

私は自分でそれをしていません、このリンクをチェックしてください：

cssイージングアニメーションツール

JSFiddleで例を作成しました。

ホバーを安定させるために外側のdivを配置します。

<div class="container">
    <div class="moving"></div>
</div>

CSSは次のとおりです。

.moving {
    position: absolute; width: 200px; height: 150px; top: 50px;  left: 50px;
    background-color: green;
    -webkit-transition: all 5s cubic-bezier(0.310, 0.440, 0.445, 1.650); 
}

.container:hover .moving {
    zoom: 1.5;
}

編集

オブジェクトの速度が一定である必要はない（ほぼ放物線状である可能性がある）ことを示すために、（イーズアニメーションツールページからの）ベジェ曲線で得られるものの単なる画像

ベジェ曲線

于 2013-03-15T08:19:16.957 に答える
1

アドビは、標準のイーズイン/イーズアウトタイミング機能のみを使用する優れた例を提供しています。完全に「物理的」ではない（つまり、放物線ではない）場合でも、多くの状況で十分である可能性があります。[物理学はあなたの友達です]セクションまで下にスクロールすると、ページにデモがあります。

div {
    width:140px;
    height:140px;
    border-radius: 70px;
    background:red;
    position:relative;
    animation: jump 1s infinite;
}

@keyframes jump {
    0% {top: 0;animation-timing-function: ease-in;}
    50% {top: 140px;height: 140px;animation-timing-function: ease-out;}
    55% {top: 160px; height: 120px;border-radius: 70px / 60px;animation-timing-function: ease-in;}
    65% {top: 120px; height: 140px;border-radius: 70px;animation-timing-function: ease-out;}
    95% {top: 0;animation-timing-function: ease-in;}
    100% {top: 0;animation-timing-function: ease-in;}
}

出典：http ：//www.adobe.com/inspire/2013/04/animating-interactive-experiences-css.html

于 2013-10-24T20:47:18.323 に答える