28

私はアニメーションに少し慣れていないので、ここで大きなコンセプトが欠けている場合はご容赦ください. 曲線上の点を指している矢印をアニメーション化する必要があります。この投稿のために、それが 3 次曲線であるとしましょう。矢印は曲線の線に沿って移動し、常にその数ピクセル下を指します。

だから私がしたことは、CSS3を使用して曲線の線に沿ってキーフレームを設定することです:

 @-webkit-keyframes ftch {
     0% {
         opacity: 0;
         left: -10px;
         bottom: 12px;
     }
     
    25% {
        opacity: 0.25;
        left: 56.5px;
        bottom: -7px;
     }
     
     50% {
        opacity: 0.5;         
        left: 143px;
        bottom: -20px;
     }
     
     75% {
        opacity: 0.75;
        left: 209.5px;
        bottom: -24.5px;
     }
     
     100% {
         opacity: 1;
         left: 266px;
         bottom: -26px;
     }
}

ただし、-webkit-animation-timing-function: ease-in を使用してこのアニメーションを実行すると、そのイージングが個々のキーフレームに適用されますが、これは明らかに私が望んでいるものではありません。アニメーション全体にイージングを適用したい。

これを行うべき別の方法はありますか？各キーフレームではなくシーケンス全体にイージングを適用するプロパティはありますか?

4

4 に答える 4

17

オブジェクトが特定の時間に特定のポイントにあることを具体的に伝えているため、一連のキーフレームにイージング関数を適用することはできません。たとえば、一連のキーフレームにイーズインを適用すると、オブジェクトは 25% で必要な「チェックポイント」の背後にあり、最終的には 100% に追いつくまで加速します。

ポイントがほぼ等距離である場合は、適用できます。

.animatedobject {
  -webkit-animation-timing-function: linear;
}

少しロボットのように見えると、アニメーションはより見栄えが悪くなります。

より自然なアプローチは、加速し、速度を維持してから「ブレーキをかける」ことです。

 @-webkit-keyframes ftch {
 0% {
     opacity: 0;
     left: -10px;
     bottom: 12px;
    -webkit-animation-timing-function: ease-in;
 }

25% {
    opacity: 0.25;
    left: 56.5px;
    bottom: -7px;
    -webkit-animation-timing-function: linear;
 }

 50% {
    opacity: 0.5;         
    left: 143px;
    bottom: -20px;
    -webkit-animation-timing-function: linear;
 }

 75% {
    opacity: 0.75;
    left: 209.5px;
    bottom: -24.5px;
    -webkit-animation-timing-function: linear;
 }

 100% {
     opacity: 1;
     left: 266px;
     bottom: -26px;
    -webkit-animation-timing-function: ease-out;
 }
}

Webkit がパスに沿ったアニメーションをサポートしている場合、これらのキーフレームは必要なく、イージングを 2 つのキーフレームのみに適用しても問題はありません。

于 2010-12-27T05:35:38.707 に答える
2

アニメーションのさまざまな側面にさまざまなイージング関数を適用する場合は、コンテンツを 2 つの div にネストして、アニメーションを分離する必要があります。

この場合、移動アニメーションを適用する親 div と、不透明度アニメーションを適用する子 div を作成する必要があります。不透明度のアニメーションには線形のイージング カーブが必要であり、動きのアニメーションには最適なイージング関数が必要です。ただし、イージング カーブと固定チェックポイントの混合について Duopixel が言っていることを繰り返します。この場合、実際にはアニメーションは必要ありません。2 つの 0%:100% アニメーションだけです。1 つは親用で、もう 1 つは子 div 用です。

多くの CSS3 アニメーションを作成したので、Sencha Animator 製品用にこのガイドを書きました - このガイドには、CSS3 で動作する複雑なアニメーションを取得する方法に関する役立つ一般的な情報が含まれています - ツールを使用したくない場合でも.

于 2010-12-27T23:44:04.767 に答える
1

あなたへのいくつかの参照愛: http://www.w3.org/TR/css3-animations/

具体的には: http://www.w3.org/TR/css3-animations/#timing-functions-for-keyframes-

1 つの場所だけでなく、複数のキーフレーム アニメーションで 1 つの場所に移動し、次に別の場所に移動し、別の場所に移動するなど、アニメーションのスタックを行うことができます。

于 2010-12-26T18:03:50.147 に答える