要素の円弧モーションを実現する CSS3 サンプルコード

CSS を使用して要素の円弧の動きを制御する方法

CSS3 の新しい属性 transfrom トランジション効果によって、要素の移動、回転、拡大縮小を実現できることは誰もが知っています。アニメーション属性と組み合わせることで、要素のアニメーション効果を実現できます。しかし、CSS を使用して要素の円弧移動を実現する方法は次のとおりです。

上のアニメーションに示すように、ボールは弧を描いて動きます。動きを分析します。

ボールの動きを X 軸と Y 軸の 2 つの動きに分けると、X 軸上のボールは (遅い-速い) の速度で動きます。
ボールは Y 軸に沿って (速い-遅い) の速度で移動します。
2つの軸の動きを組み合わせて円弧効果を実現します

3次ベジェ関数

animation プロパティには、アニメーションの速度関数である animation-timing-function プロパティがあります。このプロパティは、3 次ベジェ関数と呼ばれる数学関数を使用して速度曲線を生成します。

3次ベジェ関数 (x1, y1, x2, y2): (3次ベジェ関数の具体的な意味については、関連資料を参照してください):

このウェブサイトポータルを使用すると、曲線の値をリアルタイムで調整できます。 animation-timing-function 属性には、よく使用される、ease、linear、ease-in、ease-out、ease-in-out などのパッケージ化された速度関数がすでにいくつか用意されています。

効果の実現

まず考えられるのは、X軸とY軸の変位アニメーションを分離することです。ただし、要素のアニメーションは一度に 1 つのアニメーション (最後に宣言されたアニメーション) しか実行できません。そこで、別の観点から考えて、2 つの親子要素を使用することができます。親要素に X 軸の変位アニメーションを追加し、子要素に Y 軸の変位アニメーションを追加します。具体的なコードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>要素の円弧の動き</title>
    <スタイル>
        。箱{
            幅: 400ピクセル;
            高さ: 400px;
            境界線: 2px 実線 #ff8800;
        }
        スパン{
            表示: ブロック;
            幅: 40px;
            高さ: 40px;
            境界線: 1px 実線 #222;
            アニメーション: center1 2s 前方へのイーズイン;

        }
        span:後{
            コンテンツ： '';
            表示: ブロック;
            幅: 40px;
            高さ: 40px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            境界線の半径: 20px;
            背景: 緑黄色;
            アニメーション: center2 2s 前方へのイーズアウト;
        }
        @キーフレーム 中心1 {
            {変換: translateX(360px)}
        }
        @keyframes 中心2 {
            {変換: translateY(360px)}
        }
    </スタイル>
</head>
<本文>
<div class="box">
    <span></span>
</div>
</本文>
</html>

このとき、子要素を置き換えるために要素の疑似クラス after を使用しましたが、効果は同じです。 span に色付きの境界線を付けると、2 つの要素の移動軌跡を簡単に観察できます。アニメーション効果は次のとおりです。

この時点では、緑色のボールが弧を描いて動いていることはまだ比較的明らかです。

拡張機能:

この時点で円弧の大きさが十分でなかったり、円弧が目立たないと感じる場合は、3 次ベジェ関数の値を自分で調整できます。ウェブサイトポータルによると。

イーズインカーブ効果を選択します。次に、x1 と y1 の値を変更します (赤い点を右に引っ張ります)。次に、この時点で cubic-bezier() 値をコピーします。元のスパンのアニメーションのイーズイン位置をこの値に置き換えます。
イーズアウトカーブ効果を選択します。次に、x2とy2の値を変更します（青い点を右に引っ張ります）。次に、この時点で cubic-bezier() 値をコピーします。アニメーションのイーズアウト位置後の元の span 疑似クラスをこの値に置き換えます。

現時点での CSS コードは次のとおりです。

スパン{
            表示: ブロック;
            幅: 40px;
            高さ: 40px;
            境界線: 1px 実線 #222;
            アニメーション: center1 2s cubic-bezier(.66,.01,1,1) 前方;

        }
        span:後{
            コンテンツ： '';
            表示: ブロック;
            幅: 40px;
            高さ: 40px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            境界線の半径: 20px;
            背景: 緑黄色;
            アニメーション: center2 2s cubic-bezier(0,0,.36,1) 前方;
        }

このときのアニメーション効果の弧はさらに明白です。

これで、CSS3 で要素アークモーションを実装するサンプルコードに関するこの記事は終了です。CSS3 要素アークモーションに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Linux での UDP について学ぶ

>>: 初心者向けウェブサイト構築ガイド⑦：美しいウェブサイトを作るのはとっても簡単