まえがき

cubic-bezier を理解する前に、animation-timing-function とtransition-timing-function の重要な内容である CSS3 のアニメーション効果を理解する必要があります。

オントロジー

概要

cubic-bezier は、cubic Bezier とも呼ばれ、主にアニメーション用のスピードカーブを生成する関数です。 cubic-bezier(, , , ) として。

次の図から 3 次ベジェを簡単に理解できます:

何から上の図で知っておく必要があるのは、3 次ベジェの値の範囲です:

P0: デフォルト値 (0, 0)
P1: 動的値 (x1) , y1)
P2: 動的値 (x2, y2)
P3: デフォルト値 (1, 1)

注意が必要なのはP1とP2の値で、X軸の値の範囲は0から1のときです。値が超過範囲を超過すると、3 次ベジェは失敗します。Y 軸の値が指定されていない場合、もちろん、値が大きすぎる必要はありません。

最も直接的な理解は、を座標軸上に 1 の範囲のみの直線として配置し、その中間から 2 点を抜き出すことです (X 軸の値の範囲は [ 0, 1]、Y 軸は任意）、形成された最終的な曲線がアニメーションの速度曲線です。

の使用テスト例:

<!DOCTYPE html><html lang="zh-cn"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>    .animation {      width: 50px;      height: 50px;      background-color: #ed3;      -webkit-transition:  all 2s;           -o-transition:  all 2s;              transition:  all 2s;    }    .animation:hover {      -webkit-transform:  translateX(100px);          -ms-transform:  translateX(100px);           -o-transform:  translateX(100px);              transform:  translateX(100px);    }  </style></head><body>  <div class="animation"></div></body></html>

マウスを要素上に移動すると、要素が右に移動し始めることがブラウザで確認できます。 , 最初はゆっくりと動きますが、離れると元のカーブに従って原点に戻ります。

この例では、三次ベジェまたは他のタイミング関数をトランジションに追加しない場合、デフォルトの速度曲線は次のとおりです。

次に、cubic-bezier(.17, .86, .73, .14) をコードに追加しましょう:

....animation {  ...  -webkit-transition:  all 2s cubic-bezier(.17, .86, .73, .14);       -o-transition:  all 2s cubic-bezier(.17, .86, .73, .14);          transition:  all 2s cubic-bezier(.17, .86, .73, .14);}...

ページを更新して効果を観察してください。アニメーションの実行中に非常に遅い動きがあり、その前後の速度は同じであることがわかります。このときのモーションカーブは次のとおりです。

一般的に使用されるいくつかの固定値は、3 次ベジェ値と速度曲線に対応します

ease: cubic-bezier(.25, .1, .25, 1)
ライナー: cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)
イーズイン: cubic-bezier(.42, 0, 1, 1)
イーズアウト: cubic-bezier(0, 0, .58, 1)
イーズインアウト: cubic-bezier(.42, 0, .58, 1)
In Out . Back (前後のバッファリング効果): cubic -bezier(0.68, -0.55, 0.27, 1.55)

エフェクトのリファレンス

記事内で触れたアニメーションその効果は以下のサイトで見ることができます、もちろん大胆に試すこともできます:

英語版オンラインプレビュー (Lea Verou)
中国語版のオンラインプレビュー (その他の効果)
オンラインでシリーズを生成
著者の「読み込み中」ライブラリ

リファレンス

MDNW3School

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、