Français
Français
Tout d'abord, nous devons diviser la chaîne pour être affichée en caractères, afin que chaque caractère puisse être traité séparément. La fonction STR_SPLIT est un outil puissant pour implémenter cette fonction.
<?php
$string = "Bienvenue sur notre site officiel！";
$chars = str_split($string); // Diviser la chaîne en tableau de caractères
?>
Dans le code ci-dessus, nous avons divisé la chaîne "Bienvenue à notre site officiel!" dans un tableau utilisant la fonction STR_SPLIT , et chaque élément du tableau est un caractère de la chaîne d'origine.
Maintenant, nous avons un tableau de caractères qui peut utiliser une boucle FOREAC pour produire des caractères un par un. Lors de la sortie, nous devons également simuler l'effet de retard afin que les caractères puissent être affichés un par un.
<?php
foreach ($chars as $char) {
echo $char; // Caractères de sortie
flush(); // Actualiser le tampon，Faire apparaître les personnages instantanément
usleep(50000); // Retard 50 millisecondes
}
?>
Dans le code ci-dessus, nous utilisons la fonction Flush () pour actualiser le tampon de sortie afin que les caractères soient affichés immédiatement sur la page Web. Usleep (50000) retarde chaque caractère de 50 millisecondes, créant ainsi un effet de sortie de caractère par personnage.
PHP est un langage de script côté serveur. Il ne fonctionne pas directement sur les éléments DOM du navigateur, il ne peut donc pas créer des effets d'animation lisses directement du côté client. Cependant, nous pouvons produire du code HTML et JavaScript via PHP, combiné avec les méthodes SetInterval ou Settimeout de JavaScript pour réaliser des effets d'animation plus complexes.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Effet d'animation au niveau des personnages</title>
<script>
window.onload = function() {
let text = "<?php echo addslashes($string); ?>"; // PHP Chaîne de sortie
let index = 0;
let output = document.getElementById('output');
function showCharacter() {
if (index < text.length) {
output.innerHTML += text.charAt(index);
index++;
}
}
setInterval(showCharacter, 50); // Chaque50millisecondes显示一个字符
};
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
Dans cet exemple, PHP publie une chaîne contenant tous les caractères, et JavaScript est responsable de la sortie des caractères par caractères dans le navigateur. La fonction ShowCharacter est appelée toutes les 50 millisecondes par SetInterval , qui réalise l'effet de l'affichage progressif des caractères.
En modifiant la logique de la fonction STR_SPLIT et de la partie JavaScript dans PHP, vous pouvez implémenter divers effets d'animation. Par exemple, modifiez le temps de retard, modifiez la façon dont l'affichage des caractères, etc. Voici quelques effets de personnalisation courants:
Ajouter un effet de gradient de couleur de texte :
En JavaScript, vous pouvez ajouter des styles CSS à chaque personnage pour simuler des gradients de couleur ou d'autres effets d'animation.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Effet d'animation au niveau des personnages</title>
<script>
window.onload = function() {
let text = "<?php echo addslashes($string); ?>";
let index = 0;
let output = document.getElementById('output');
function showCharacter() {
if (index < text.length) {
let span = document.createElement('span');
span.textContent = text.charAt(index);
span.style.color = 'rgb(' + Math.floor(Math.random() * 256) + ',' +
Math.floor(Math.random() * 256) + ',' +
Math.floor(Math.random() * 256) + ')'; // Couleurs aléatoires
output.appendChild(span);
index++;
}
}
setInterval(showCharacter, 100); // Chaque100millisecondes显示一个字符
};
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
Dans cet exemple, nous définissons une couleur aléatoire pour chaque caractère pour obtenir l'effet de gradient de couleur.
En combinant la fonction STR_SPLIT avec PHP et JavaScript, nous pouvons implémenter très simplement les effets d'animation au niveau des caractères. PHP est responsable du traitement et de la segmentation des chaînes, tandis que JavaScript est responsable de l'affichage progressivement des caractères du côté du navigateur pour réaliser des effets d'animation. Vous pouvez personnaliser davantage ces effets au besoin pour rendre votre site Web ou votre application plus animé et amusant.
