CSS+JS로 피카츄 애니메이션을 만드는 방법(코드 분석)-JS 튜토리얼-php.cn

이 기사에서는 CSS+JavaScript를 사용하여 피카츄 애니메이션을 만드는 방법을 소개하고 CSS를 사용하여 피카츄를 그리는 방법과 js를 사용하여 동적 효과를 구현하고 피카츄를 움직이게 만드는 방법을 단계별로 소개합니다.

CSS+JS로 피카츄 애니메이션을 만드는 방법(코드 분석)

아이디어를 간단하게 기록하면 최적화할 수 있는 부분이 많습니다

코(부채 모양)를 그려주세요

transparent를 사용하여 적절한 삼각형을 그려보세요

.nose { position: absolute; border: 10px solid black; border-color: black transparent transparent; border-bottom: none; left: 50%; top: 145px; margin-left: -10px; }

로그인 후 복사

그런 다음 삼각형에 반원을 그려서 부채꼴 모양

.yuan { position: absolute; height: 8px; width: 20px; top: -18px; left: -10px; border-radius: 8px 8px 0 0; background-color: black; }

로그인 후 복사

왼쪽과 오른쪽에 검은 눈 두 개를 그려주세요

.eye { position: absolute; border: 2px solid #000000; width: 64px; height: 64px; left: 50%; top: 100px; margin-left: -32px; border-radius: 50%; background-color: #2e2e2e; } .eye.left { transform: translateX(-118px); } .eye.right { transform: translateX(118px); }

로그인 후 복사

그 다음 검은 눈 안에 하얀 눈을 그려주세요

.eye::after { content: ""; display: block; position: absolute; border: 2px solid black; background: #ffffff; width: 30px; height: 30px; border-radius: 50%; left: 10px; }

로그인 후 복사

입술을 그려주세요

왼쪽 입술을 만들어주세요

.mouth .up .lip.left { border: 3px solid black; width: 86px; height: 24px; border-radius: 0 0 0 50px; border-top-color: transparent; border-right-color: transparent; position: relative; transform: rotate(-15deg); position: absolute; left: 50%; margin-left: -50%; }

로그인 후 복사

CSS+JS로 피카츄 애니메이션을 만드는 방법(코드 분석)

그런 다음 의사 요소를 사용하여 코 아래 검은 부분을 덮습니다. 세로 라인

.mouth .up .lip.left::before { content: ""; display: block; width: 5px; height: 30px; position: absolute; right: -4px; bottom: 0px; background-color: #ffdb00; }

로그인 후 복사

같은 원리로 올바른 입술을 만듭니다

.mouth .up .lip.right { border: 3px solid black; width: 86px; height: 24px; border-radius: 0 0 50px 0; border-top-color: transparent; border-left-color: transparent; position: relative; transform: rotate(15deg); position: absolute; right: 50%; margin-right: -50%; }

로그인 후 복사

.mouth .up .lip.right::before { content: ""; display: block; width: 5px; height: 30px; position: absolute; left: -4px; bottom: 0px; background-color: #ffdb00; }

로그인 후 복사

CSS+JS로 피카츄 애니메이션을 만드는 방법(코드 분석)

아랫 입술을 만듭니다

.mouth .down { border: 1px solid red; height: 166px; width: 100%; position: relative; overflow: hidden; } .mouth .down .yuan1 { border: 1px solid black; position: absolute; width: 124px; height: 1000px; left: 50%; margin-left: -62px; bottom: 0; border-radius: 85px/280px; background: #9b000a; }

로그인 후 복사

CSS+JS로 피카츄 애니메이션을 만드는 방법(코드 분석)

그 다음 몸과 같은 배경을 추가합니다. .입 .위 .립 그런 다음 안쪽 부분과 붉은 볼을 그려주세요

.mouth .down .yuan1 .yuan2 { border: 1px solid red; position: absolute; width: 150px; height: 300px; background: #fa595b; left: 50%; margin-left: -75px; bottom: -165px; border-radius: 100px; } .face { border: 3px solid black; position: absolute; width: 88px; height: 88px; left: 50%; margin-left: -44px; top: 210px; } .face.left { transform: translateX(-166px); border-radius: 50%; background: #ff0000; } .face.right { transform: translateX(166px); border-radius: 50%; background: #ff0000; }

로그인 후 복사

애니메이션 효과 추가

코에 애니메이션 효과 추가

@keyframes wave { 0% { transform: rotate(0); } 33% { transform: rotate(6deg); } 66% { transform: rotate(-6deg); } 100% { transform: rotate(0); } } .nose:hover { transform-origin: center bottom; animation: wave 220ms infinite linear; }

로그인 후 복사

동적 디스플레이

숫자가 자동으로 1씩 늘어나도록

새로 만들기test.html和test.js
테스트에서 html로 데모 아이디로 div를 작성하세요

let n = 1; demo.innerHTML = n; setInterval(() => { n += 1; demo.innerHTML = n; }, 1000);

로그인 후 복사

아래 문단을 작성하시면 각 단어가 하나씩 나옵니다

const string = "大家好，我是你们的老朋友"; let n = 1; demo.innerHTML = string.substr(0, n); setInterval(() => { n += 1; demo.innerHTML = string.substr(0, n); }, 300);

로그인 후 복사

하지만 위의 코드에는 여전히 버그가 있습니다. , 단어가 표시된 후에도 여전히 n이 남아 있음을 알 수 있습니다. 늘리려면 단어를 표시한 후 타이머를 취소하기만 하면 됩니다. 타이머를 취소하는 방법은 다음과 같습니다.

const string = "大家好，我是你们的老朋友"; let n = 1; demo.innerHTML = string.substr(0, n); let id = setInterval(() => { n += 1; if (n > string.length) { window.clearInterval(id); return; } demo.innerHTML = string.substr(0, n); }, 300);

로그인 후 복사

이제 단어 표시 원리를 알았습니다. 하나씩 CSS를 표시할 수 있습니다.

test.html에 두 개의 div를 준비합니다. 하나는 CSS 태그를 작성하는 데 사용되고 다른 하나는 페이지에 CSS 콘텐츠를 표시하는 데 사용됩니다.

그러나 이 작업을 수행한 후에도 여전히 문제가 있습니다. 표시된 애니메이션이 텍스트에 의해 아래로 밀려나는 것입니다. 그림과 같이

CSS+JS로 피카츄 애니메이션을 만드는 방법(코드 분석)

test.html

로그인 후 복사

에 다음 코드를 추가합니다

애니메이션을 적용하는 방법에 대한 문제를 해결했고, 보이지 않는 코드에 대한 문제를 해결하겠습니다. 스크롤 막대가 자동으로 아래로 스크롤되도록 합니다. 그리고 애니메이션이 수정되었습니다.

html의 내용은 사용자가 볼 필요가 없으며 직접 숨길 수 있습니다.

로그인 후 복사

스크롤 막대가 표시되도록 test.js의 코드를 업데이트하세요. 자동으로 아래로 스크롤

let id = setInterval(() => { n += 1; if (n > string.length) { window.clearInterval(id); return; } demo.innerText = string.substr(0, n); demo2.innerHTML = string.substr(0, n); demo.scrollTop = demo.scrollHeight; //更新了这里 }, 0);

로그인 후 복사

스크롤 막대를 숨긴 후에도 사용자는 콘텐츠를 스크롤할 수 있습니다.

#demo::-webkit-scrollbar { display: none; }

로그인 후 복사

느린, 중간, 빠른 재생 기능 구현

재생, 일시 중지, 느린, 중간 및 빠른 버튼 추가
새로 고침 후 버튼이 먼저 커졌다가 복원된 것을 확인했습니다. 이는 CSS 재설정이 버튼에 영향을 주기 때문에 테스트와 js에서 코드를 업데이트하세요

서로 영향을 주지 않고 스타일을 두 부분으로 나눕니다

.skin * { margin: 0; padding: 0; box-sizing: border-box; } .skin *::before, *::after { box-sizing: border-box; } .skin { background: #ffdb00; min-height: 50vh; position: relative; }

로그인 후 복사

CSS+JS로 피카츄 애니메이션을 만드는 방법(코드 분석)

3. 아이디어

일시 정지: 타이머(알람시계) 지우기
놀이: 타이머 실행
느리게: 알람 시계를 깨고 재설정하면 시간이 느려집니다

코드 최적화

btnSlow.onclick = () => { window.clearInterval(id); time = 300; id = setInterval(() => { run(); }, time); }; // 等价于 btnSlow.onclick = () => { window.clearInterval(id); time = 300; id = setInterval(run, time); };

로그인 후 복사

The 완전한 최적화는 다음과 같습니다

暂停; btnPause.onclick = () => { window.clearInterval(id); }; 播放; btnPlay.onclick = () => { id = setInterval(() => { run(); }, time); }; 慢速; btnSlow.onclick = () => { window.clearInterval(id); time = 300; id = setInterval(() => { run(); }, time); }; 中速; btnNormal.onclick = () => { window.clearInterval(id); time = 50; id = setInterval(() => { run(); }, time); }; 快速; btnFast.onclick = () => { window.clearInterval(id); time = 0; id = setInterval(() => { run(); }, time); };

로그인 후 복사

위의 코드 최적화 결과는 다음과 같습니다↓↓↓

const run = () => { n += 1; if (n > string.length) { window.clearInterval(id); return; } demo.innerText = string.substr(0, n); demo2.innerHTML = string.substr(0, n); demo.scrollTop = demo.scrollHeight; }; const play = () => { return setInterval(run, time); }; let id = play(); const pause = () => { window.clearInterval(id); }; //暂停 btnPause.onclick = () => { pause(); }; // 播放 btnPlay.onclick = () => { id = play(); }; //慢速 btnSlow.onclick = () => { pause(); time = 300; id = play(); }; //中速 btnNormal.onclick = () => { pause(); time = 50; id = play(); }; //快速 btnFast.onclick = () => { pause(); time = 0; id = play(); };

로그인 후 복사

함수가 아무것도 하지 않고 다른 함수를 호출하면 외부 함수를 직접 생략할 수 있습니다

예를 들어

btnSlow.onclick = () => { slow(); }; //等价 btnSlow.onclick = slow;

로그인 후 복사

여러 기능을 함께 차단하고 하나의 객체를 마주하세요

const play = () => { return setInterval(run, time); }; let id = play(); const pause = () => { window.clearInterval(id); }; const slow = () => { pause(); time = 300; id = play(); }; const normal = () => { pause(); time = 50; id = play(); }; const fast = () => { pause(); time = 0; id = play(); };

로그인 후 복사

const player = { run: () => { n += 1; if (n > string.length) { window.clearInterval(id); return; } demo.innerText = string.substr(0, n); demo2.innerHTML = string.substr(0, n); demo.scrollTop = demo.scrollHeight; }, play: () => { return setInterval(player.run, time); }, pause: () => { window.clearInterval(id); }, slow: () => { player.pause(); time = 300; id = player.play(); }, normal: () => { player.pause(); time = 50; id = player.play(); }, fast: () => { player.pause(); time = 0; id = player.play(); }, };

로그인 후 복사

...

bindEvents: () => { document.querySelector("#btnPause").onclick = player.pause; document.querySelector("#btnPlay").onclick = player.play; document.querySelector("#btnSlow").onclick = player.slow; document.querySelector("#btnNormal").onclick = player.normal; document.querySelector("#btnFast").onclick = player.fast; } //

로그인 후 복사