CSS와 GSAP를 사용하여 여러 키프레임으로 연속 애니메이션을 구현하는 방법(소스 코드 첨부)

이 문서의 내용은 CSS와 GSAP를 사용하여 여러 키 프레임(소스 코드 첨부)을 사용하여 연속 애니메이션을 구현하는 방법에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 당신이 도움이되었습니다.

효과 미리보기

소스 코드 다운로드

https://github.com/comehope/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();

컨테이너 변수의 요소에 대한 첨자를 정의하고 요소의 쉘은 순서대로 회전하여 원을 형성합니다. 여기서 윤곽선은 보조선입니다.

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});

그런 다음 수평선을 수직선으로 변경하면 모양은 세 번째 프레임과 비슷하지만 선이 더 가늘고 수렴됩니다(프레임 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});

그런 다음 수직선을 수평선으로 변경하면 모양은 3번째 프레임과 유사합니다. 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;
}

타임 스케일 스케일링 기능을 사용하여 애니메이션 재생 속도를 두 배로 높이세요:

rrreee

타임라인을 선언하는 코드를 수정하여 애니메이션이 반복적으로 재생되도록 만드세요:

rrreee

이 시점에서 애니메이션이 완성됩니다.

컨테이너 외부의 내용을 숨기고 보조선을 삭제하세요.

rrreee마지막으로 페이지 모서리를 장식하세요. rrreee

완료되었습니다!

관련 권장 사항:

🎜순수 CSS를 사용하여 가위 효과를 얻는 방법(소스 코드 포함) 🎜🎜🎜🎜순수 CSS를 사용하여 줄무늬 환상 애니메이션 효과를 얻는 방법(소스 코드 포함) 🎜🎜

위 내용은 CSS와 GSAP를 사용하여 여러 키프레임으로 연속 애니메이션을 구현하는 방법(소스 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!