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

畫嘴唇

製作左邊lip

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

同樣原理製作右lip

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

• 製作下嘴唇<pre class='brush:php;toolbar:false;'>.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; }</pre>
然後在.mouth .up .lip 加入和body 一樣的背景 然後畫裡面的部分和紅臉頰

• .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

在test.html 中寫一個id 為demo 的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);

但是上面程式碼還存在bug ，打出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);

知道了一個字一個字顯示的原理，接下來顯示我們的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 reset 影響到按鈕，在test,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);
};

完整最佳化如下

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

#######模組化#########把一堆程式碼放到一個文件匯出，在導入######更多程式相關知識，請造訪：###程式設計影片###！ ！ ###

以上是CSS+JS如何製作皮卡丘動畫（程式碼分析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！