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

이 기사에서는 CSS+JavaScript를 사용하여 피카츄 애니메이션을 만드는 방법을 소개하고 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%;
}

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

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

아랫 입술을 만듭니다

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

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

.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 콘텐츠를 표시하는 데 사용됩니다.

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

test.html

<style>
  #html {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50vh;
  }
</style>

에 다음 코드를 추가합니다

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

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

<style>
  #demo2 {
    display: none;
  }
  #demo{
    position: fixed;
    height: 50vh;
    top: 0;
    left: 0;
    width: 100%;
    overflow-y: auto;
  }
  #html {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50vh;
  }
</style>

스크롤 막대가 표시되도록 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;
}

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

Modular

코드뭉치를 파일에 넣어서 내보낸 후 가져오기

더 많은 프로그래밍 관련 지식을 알고 싶으시면 방문해주세요. : 프로그래밍 영상! !

위 내용은 CSS+JS로 피카츄 애니메이션을 만드는 방법(코드 분석)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!