首頁  >  文章  >  web前端  >  CSS+JS如何製作皮卡丘動畫(程式碼分析)

CSS+JS如何製作皮卡丘動畫(程式碼分析)

青灯夜游
青灯夜游轉載
2021-07-19 19:31:083497瀏覽

這篇文章跟大家介紹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;
}

畫嘴唇

製作左邊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%;
}

CSS+JS如何製作皮卡丘動畫(程式碼分析)

CSS+JS如何製作皮卡丘動畫(程式碼分析)

CSS+JS如何製作皮卡丘動畫(程式碼分析)

##然後用偽元素遮住鼻子下方的黑色垂直線
.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:css;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

CSS+JS如何製作皮卡丘動畫(程式碼分析)新一個

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更新程式碼,讓捲軸自動往下滾CSS+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中文網其他相關文章!

陳述:
本文轉載於:掘金--你脚丫子真香。如有侵權,請聯絡admin@php.cn刪除