CSS と GSAP を使用して複数のキーフレームを含む連続アニメーションを実装する方法 (ソース コードを添付)

この記事の内容は、CSSとGSAPを使用して複数のキーフレームを含む連続アニメーションを実装する方法についてです（ソースコードが添付されています）。必要な友人が参考になれば幸いです。あなたは助けてくれました。

エフェクトのプレビュー

ソースコードのダウンロード

https://github.com/comehop​​e/front-end-daily-challenges

コード解釈

domを定義、コンテナには10個の pが含まれています 子要素。各 p には 1 つの span 要素が含まれます: p 子元素，每个 p 中包含 1 个 span 元素：

<figure class="container">
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
</figure>

居中显示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: lightyellow;
}

定义容器的尺寸和样式：

.container {
    width: 400px;
    height: 400px;
    background: linear-gradient(45deg, tomato, gold);
    border-radius: 3%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

画出容器里的 1 个元素，它有一个外壳 p，里面是一个白色的小方块 span：

.container {
    position: relative;
}

.container p {
    position: absolute;
    width: inherit;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container p span {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: white;
}

为容器中的元素定义下标变量，并让元素的外壳依次旋转，围合成一个圆形，其中 outline

.container p {
    outline: 1px dashed black;
    transform: rotate(calc((var(--n) - 1) * 36deg));
}

.container p:nth-child(1) { --n: 1; }
.container p:nth-child(2) { --n: 2; }
.container p:nth-child(3) { --n: 3; }
.container p:nth-child(4) { --n: 4; }
.container p:nth-child(5) { --n: 5; }
.container p:nth-child(6) { --n: 6; }
.container p:nth-child(7) { --n: 7; }
.container p:nth-child(8) { --n: 8; }
.container p:nth-child(9) { --n: 9; }
.container p:nth-child(10) { --n: 10; }

中央表示:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

コンテナのサイズとスタイルを定義します:

let elements = '.container p span';

Drawコンテナ内の要素にはシェル p があり、その中には小さな白い正方形 span があります。

let animation = new TimelineMax();

コンテナ変数内の要素の添え字を定義し、要素のシェルが順番に回転して円を形成します。outline は補助線です:

animation.from(elements, 1, {scale: 0});

この時点で、サブ要素の描画が完了し、アニメーション スクリプトが開始されます。

GSAP ライブラリを導入します:

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25});

サブ要素セレクターを表す変数を定義します:

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180});

タイムライン オブジェクトを宣言します:

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1});

まず、エントリ モードを小さい (フレーム 1) から大きい (フレーム 2) に設定します)。フレーム 2 にはコードはなく、セマンティクスに暗黙的に含まれています:

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1});

子要素を垂直のストリップに変えて全方向に広げます (フレーム 3):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1})
    .to(elements, 1, {x: '-30px'});

垂直のストリップを回転させます 小さな正方形に変えます (フレーム 4):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1})
    .to(elements, 1, {x: '-30px'})
    .to(elements, 1, {x: '30px'});

小さな正方形を長い水平のストリップに変えて円を形成します (フレーム 5):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1})
    .to(elements, 1, {x: '-30px'})
    .to(elements, 1, {x: '30px'})
    .to(elements, 1, {x: '0', scaleX: 0.1, scaleY: 1});

フレームを記録しすぎるとスクリンバがクラッシュするので、フレーム 6 ～ 11 はビデオに反映されないことに注意してください。 。

円を内側に収束させて線を細くする (フレーム 6):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1})
    .to(elements, 1, {x: '-30px'})
    .to(elements, 1, {x: '30px'})
    .to(elements, 1, {x: '0', scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})

線を左にスイングさせる (フレーム 7):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1})
    .to(elements, 1, {x: '-30px'})
    .to(elements, 1, {x: '30px'})
    .to(elements, 1, {x: '0', scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: '-80px', scaleY: 0.5, borderRadius: '50%'});

線を右にスイングさせる (フレーム 8):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1})
    .to(elements, 1, {x: '-30px'})
    .to(elements, 1, {x: '30px'})
    .to(elements, 1, {x: '0', scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: '-80px', scaleY: 0.5, borderRadius: '50%'})
    .to(elements, 1, {y: '-10px', scaleX: 0.1, scaleY: 0.5, borderRadius: '0%', rotation: 0});

そして水平線を垂直線に変更します。形状は 3 番目のフレームと似ていますが、線はより細く、より収束しています (フレーム 9):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1})
    .to(elements, 1, {x: '-30px'})
    .to(elements, 1, {x: '30px'})
    .to(elements, 1, {x: '0', scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: '-80px', scaleY: 0.5, borderRadius: '50%'})
    .to(elements, 1, {y: '-10px', scaleX: 0.1, scaleY: 0.5, borderRadius: '0%', rotation: 0})
    .to(elements, 1, {y: '-300px', delay: 0.5});

次に、垂直線を水平線に変更します。形状は次のようになります。 5フレーム目、ただし線が短くなります(フレーム10):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: '-100px', scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: '-60px', scaleY: 0.1})
    .to(elements, 1, {x: '-30px'})
    .to(elements, 1, {x: '30px'})
    .to(elements, 1, {x: '0', scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: '-80px', scaleY: 0.5, borderRadius: '50%'})
    .to(elements, 1, {y: '-10px', scaleX: 0.1, scaleY: 0.5, borderRadius: '0%', rotation: 0})
    .to(elements, 1, {y: '-300px', delay: 0.5})
    .timeScale(2);

横線が少し広がって点になります(フレーム11):

let animation = new TimelineMax({repeat: -1, repeatDelay: 1});

点を縦線に変形させて内側に縮めます。変化が長いので、アニメーション時間も長くする必要があります (フレーム 12):

.container {
    overflow: hidden;
}

.container p {
    /* outline: 1px dashed black; */
}

垂直線を中心から外側に素早く広げ、線が放出されているかのように、広がる前に少し停止します (フレーム 13):

body {
    overflow: hidden;
}

body::before,
body::after {
    content: '';
    position: absolute;
    width: 60vmin;
    height: 60vmin;
    border-radius: 50%;
    background: radial-gradient(
        transparent 25%,
        gold 25%, gold 50%,
        tomato 50%
    );
}

body::before {
    left: -30vmin;
    bottom: -30vmin;
}

body::after {
    right: -30vmin;
    top: -30vmin;
}

タイム スケール スケーリング関数を使用して、アニメーションの再生速度を 2 倍にします:

rrreee

タイムラインを宣言するコードを変更して、アニメーションを繰り返し再生します:

rrreee

この時点で、アニメーションは完了です。

コンテナの外側のコンテンツを非表示にし、補助線を削除します。

rrreee最後に、ページの隅を装飾します: rrreee

これで完了です。

関連する推奨事項:

🎜純粋な CSS を使用してハサミの効果を実現する方法 (ソース コード付き) 🎜🎜🎜🎜 純粋な CSS を使用して縞模様の錯覚アニメーション効果を実現する方法 (ソース コード付き) 🎜🎜

以上がCSS と GSAP を使用して複数のキーフレームを含む連続アニメーションを実装する方法 (ソース コードを添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。