Comment créer une animation Pikachu avec CSS+JS (analyse de code)-js tutoriel-php.cn

Cet article vous présentera la méthode de création d'animation Pikachu en utilisant CSS+JavaScript. Il vous présentera également étape par étape comment dessiner Pikachu en utilisant CSS et comment utiliser js pour obtenir des effets dynamiques et faire bouger Pikachu.

Comment créer une animation Pikachu avec CSS+JS (analyse de code)

Enregistrez simplement vos idées, il existe de nombreuses zones qui peuvent être optimisées

Dessinez un nez (en forme d'éventail)

Utilisez transparent pour dessiner un triangle approprié

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

Copier après la connexion

Ensuite, dessinez le demi-cercle sur le triangle pour formez un éventail

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

Copier après la connexion

Dessinez deux yeux noirs à gauche et à droite

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

Copier après la connexion

Puis dessinez les yeux blancs à l'intérieur des yeux noirs

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

Copier après la connexion

Dessinez les lèvres

Faites la lèvre gauche

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

Copier après la connexion

Comment créer une animation Pikachu avec CSS+JS (analyse de code)

Utilisez ensuite des pseudo éléments pour couvrir le noir sous le nez Lignes verticales

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

Copier après la connexion

Utilisez le même principe pour faire la lèvre droite

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

Copier après la connexion

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

Copier après la connexion

Comment créer une animation Pikachu avec CSS+JS (analyse de code)

Faire la lèvre inférieure

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

Copier après la connexion

Comment créer une animation Pikachu avec CSS+JS (analyse de code)

Puis ajoutez le même fond que le corps dans .bouche .up .lèvre Dessinez ensuite la partie intérieure et les joues rouges

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

Copier après la connexion

Ajoutez des effets d'animation

Ajoutez des effets d'animation au nez

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

Copier après la connexion

Affichage dynamique

Laissez un nombre augmenter automatiquement de 1

Créez-en un nouveautest.html et test.js
dans Dans test.html, écrivez un div avec l'identifiant demo

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

Copier après la connexion

Vous pouvez écrire un paragraphe ci-dessous, et chaque mot apparaît un par un

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

Copier après la connexion

Mais il y a toujours un bug dans le code ci-dessus If. vous tapez n, vous constaterez qu'une fois les mots affichés, n Il continue d'augmenter. Il suffit d'annuler la minuterie après avoir affiché les mots. La méthode pour annuler la minuterie est la suivante

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

Copier après la connexion

Maintenant que nous connaissons le principe. d'afficher un mot par un, affichons ensuite notre CSS.

Préparez deux divs dans test.html, l'un est utilisé pour écrire des balises CSS et l'autre est utilisé pour afficher le contenu CSS sur la page.

Cependant, il y a toujours un problème après cela, l'animation affichée est repoussée vers le bas par le texte. Comme le montre l'image

Comment créer une animation Pikachu avec CSS+JS (analyse de code)

Ajoutez le code suivant à test.html

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

Copier après la connexion

Nous avons résolu le problème de la façon d'animer, et il y a un problème de code invisible. Ensuite, nous résoudrons le problème de la façon de animer. faites défiler automatiquement la barre de défilement vers le bas. Et l'animation est corrigée

Le contenu du code HTML n'a pas besoin d'être vu par l'utilisateur, il peut être masqué directement

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

Copier après la connexion

Mettez à jour le code dans test.js pour laisser la barre de défilement défiler. faire défiler automatiquement vers le bas

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

Copier après la connexion

Après avoir masqué la barre de défilement, l'utilisateur peut toujours faire défiler le contenu

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

Copier après la connexion

Implémenter des fonctions de lecture lente, moyenne et rapide

Ajouter des boutons lecture, pause, lent, moyen et rapide
Après rafraîchissement, j'ai constaté que le bouton est d'abord devenu plus grand puis restauré, c'est parce que la réinitialisation CSS affecte le bouton, mettez à jour le code dans test et js

Divisez le style en deux parties sans s'affecter

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

Copier après la connexion

Comment créer une animation Pikachu avec CSS+JS (analyse de code)

3. Idée

Pause : Effacer le minuteur (réveil)
Jouer : Exécuter le minuteur
Lent : Écraser le réveil, le réinitialiser, le temps sera plus lent

Optimisation du code

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

Copier après la connexion

Le l'optimisation complète est la suivante

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

Copier après la connexion

Les résultats d'optimisation du code ci-dessus sont les suivants↓↓↓

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

Copier après la connexion

Si une fonction ne fait rien, appelle simplement une autre fonction, alors la fonction externe peut être omise directement

Par exemple

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

Copier après la connexion

bloquez plusieurs fonctions ensemble et faites face à un seul objet

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

Copier après la connexion

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();
  },
};

Copier après la connexion

...

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

Copier après la connexion