Comment écrire une animation CSS en js ? Comment écrire une animation CSS en js (code)

Le contenu de cet article explique comment écrire une animation CSS en JS ? La méthode (code) d'écriture d'animation CSS en JS a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'elle vous sera utile.

Utilisez setTimeout() ou setInterval() pour appeler régulièrement un morceau de code en utilisant ces deux fonctions. C'est le principe.

Le but est de modifier à plusieurs reprises le style en ligne pour obtenir l'effet d'animation

En construisant le contenu d'un cadre en même temps, puis en le laissant changer continuellement le CSS sous l'action de la valeur de la fonction pour obtenir l'effet d'animation

JS écrivant une animation CSS

// 将e转化为相对定位的元素，使得其可以左右移动
// 第一个参数为元素对象或者元素的id
// 如果第二个参数是函数，以e为参数，它将在动画结束时调用
// 第三个参数指定e移动的距离，默认为5像素
// 第四个参数指定移动多久，默认500毫秒
function shake(e, oncomplete, distance, time) {
    // 句柄函数
    if (typeof e === "string") e = document.getElemnentById(e);    // 如果传入的是对象的id则获取对象的id，如果传入的为元素（元素为对象）则直接跳过这一句
    if (!time) time = 500;    // 如果time是空值，则直接使用默认值
    if (!distance) distance = 5;    // 如果未指定移动的距离，则默认为5像素

    var originalStyle = e.style.cssText;    // 获取元素e的css样式
    e.style.position = "relative";    // 设置为相对定位
    var start = (new Date()).getTime();    // 设置动画开始的时间,获取一个格林威治时间
    animate();    // 动画开始

    // 函数检查消耗时间，并更新e的位置
    // 如果动画完成，它将e还原为原始状态
    // 否则，将会更新e的位置，安排其自身重新运行
    function animate() {
        var now = (new Date()).getTime();    // 获取现在的时间
        var elapsed = now-start;    // 从开始以来消耗了多长时间
        var fraction = elapsed / time;    // 为总时间的几分之几

        if (fraction < 1) {    // 如果动画未完成
            // 作为动画完成比例的函数，计算e的x位置
            // 使用正弦函数将完成比例乘以4pi
            // 所以，它将来回往返两次
            var x = distance * Math.sin(fraction * 4 * Math.PI);     // 使用正弦函数实现每秒四帧
            e.style.left = x + "px";

            // 在25毫秒后或在总时间的最后尝试再次运行函数
            // 目的是为了产生每秒40帧动画
            setTimeout(animate, Math.min(25, time-elapsed));    // 使用天花板函数再次调用，再次移动
        }
        else {    // 否则动画完成
            e.style.cssText = originalStyle; // 恢复原始样式
            if (oncomplete) oncomplete(e);    // 产生一个回调函数
        }
    }
}

// 以毫秒级的时间将e从完全不透明淡出到完全透明
// 在调用函数时假设e是完全不透明的
// oncomplete 是一个可选函数，以e为参数，它将在动画结束的时调用
// 如果不指定time，默认为500毫秒
function fadeOut(e, oncomplete, time) {
    if (typeof e === "string") e = document.getElementById(e);
    if (!time) time = 500;

    // 使用Math.sqrt作为一个缓动函数创建动画
    // 非线性函数，一开始淡出的较快，然后逐步的缓慢
    var ease = Math.sqrt;

    var start = (new Date()).getTime();    // 动画开始的时间
    animate();    // 动画开始

    function animate() {
        var elapsed = (new Date()).getTime()-start;    // 消耗的时间
        var fraction = elapsed/time;    // 总时间的几分之几

        if (fraction < 1) {    // 如果动画未完成
            var opacity = 1 - ease(fraction);    // 计算不透明度  即 完成一次变换，开方
            e.style.opacity = String(opacity);    // 设置透明度
            setTimeout(animate, // 进行下一帧
                Math.min(25, time-elapsed));    // 在25毫秒之后或者在总时间的最后再次调用
        }else {
            e.style.opacity = "0";    // 使得e完全透明
            if (oncomplete) oncomplete(e);    // 在结束的时候回调
        }
    }
}

Interroger les styles calculés

getComputedStyle(e)

275 styles . . . O__O "…

Classes CSS scriptables

En plus des scripts de styles en ligne, vous pouvez également scripter des classes CSS

supprimer et ajouter des classes

e.className = "attention";  // 添加类
e.className = "";   // 移除类

Afficher la liste des classes

classList
Propriété en lecture seule, renvoie une collection en temps réel d'attributs de classe d'éléments

e.classList()

Feuille de style scriptée

Activer et désactiver le feuille de style

L'objet CSSStyleSheet des éléments style et link définit un attribut désactivé qui peut être défini et interrogé en js

Concernant l'attribut désactivé, cet attribut ne fait pas partie de la spécification en HTML. n'existe pas en HTML, cependant, l'attribut existe dans le DOM. Cet attribut ne peut pas être défini dans une balise, mais il peut être défini dans un script

Si la valeur est vraie, la feuille de style est fermée, sinon la feuille de style est activée.

e.disabled = true;

La feuille de style peut être fermée de cette manière

De même, vous pouvez également interroger, insérer et supprimer des règles de feuille de style via les méthodes suivantes :

document.styleSheets[0].disabled;

CSSStyleSheet. L'objet définit également une API pour interroger, insérer et supprimer des règles de feuille de style

Interroger tout le contenu de la feuille de style

document.styleSheets[0] Une propriété en lecture seule. qui renvoie un lien vers le document ou la feuille de style intégrée

var firstRule = document.styleSheets[0].cssRules[0];

Ce style est en lecture seule et ne peut pas être inséré ou supprimé

où selectorText est le sélecteur CSS

cssText est le style de texte CSS

Ajouter et supprimer des règles

insertRule() et deleteRule() sont deux méthodes pour ajouter et supprimer des règles

Il existe également une méthode addRule()

insertRule( ) méthode

insertRule() et deleteRule() sont deux méthodes pour ajouter et supprimer des règles

Dans la feuille de style SS, ajoutez une règle CSS dans les 0èmes cssRules pour créer les règles. classe. La police du nom devient bleue

ss.insertRule(".name {color:blue}", 0);

Si l'index ajouté existe déjà, il ne sera pas écrasé. Tous les index sont augmentés de 1, puis insérés

méthode deleteRule()

. Supprimez la règle de style

Supprimez le dernier style inséré

Supprimez la 0ème règle et le style continuera à partir de 0

ss.deleteRule(0);

Créez une nouvelle feuille de style

Ce n'est pas difficile, simple. Insérez un nouvel élément de style et insérez un nouveau contenu CSS via innerHTML, ou insérez directement la balise de lien Pour définir et ajouter un attribut HTML, utilisez la méthode Element.setAttritube(), définissez la valeur rel sur. feuille de style, puis utilisez Ajouter l'attribut src de la même manière

Opérations dom et bom pures, n'impliquant aucun contenu de feuille de style

Recommandations associées :

Laquelle est-ce qu'une animation CSS ou JS ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!