CSS+JSでピカチュウアニメーションを作る方法（コード解析）

この記事では、CSS JavaScript を使用してピカチュウをアニメーション化する方法を紹介し、CSS を使用してピカチュウを描画する方法と、js を使用してダイナミックな効果を実現し、ピカチュウを動かす方法も段階的に紹介します。

# アイデアを記録するだけで、最適化できる部分がたくさんあります。

# 鼻 (扇形) を描きます

透明

を使用して適切な三角形を描きます<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.nose { position: absolute; border: 10px solid black; border-color: black transparent transparent; border-bottom: none; left: 50%; top: 145px; margin-left: -10px; }</pre><div class="contentsignin">ログイン後にコピー</div></div>次に、その三角形上に半円を描いて扇形を形成します

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

黒い目を 2 つ描きます左右に

.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 .up .lip に追加します。 次に、内側と赤い頬を描画します

.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# を作成します## in test.html で、demo の ID を持つ div を記述します

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

下に 1 語ずつ段落を記述できます

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

ただし、まだバグがあります上記のコードで n と入力すると、単語が表示された後も 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);

一度に 1 つの単語を表示する原理がわかったので、次に CSS を表示します。

test.html 内に 2 つの div を用意します。1 つは CSS タグを記述するために使用され、もう 1 つはページに 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 のコードを更新します
スタイルを 2 つの部分に分割し、相互に影響を及ぼさないようにします

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

完全な最適化は次のとおりです。

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

モジュール式

多数のコードを 1 つにまとめます。ファイルにエクスポートしてインポートします。

プログラミング関連の知識の詳細については、プログラミング ビデオ

をご覧ください。 ！

以上がCSS+JSでピカチュウアニメーションを作る方法（コード解析）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。