js如何寫出css動畫 ？ js寫css動畫的方法（程式碼）

這篇文章帶給大家的內容是關於js如何寫出css動畫 ？ js寫css動畫的方法（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

使用setTimeout()或setInterval()使用這兩個函數定時呼叫一段程式碼。這是其原理。

目的，重複修改內聯樣式，達到動畫的效果

透過在相同的時間內建構出一幀幀的內容，然後讓其在函數的作用下不斷的改變css的值，達到動畫的效果

js寫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);    // 在结束的时候回调
        }
    }
}

查詢計算出的樣式

getComputedStyle(e)

275個樣式。 。 。 O__O "…

腳本化css類別

除了能腳本化內聯樣式，同樣的也能腳本化css的類別

移除，新增類別

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

顯示類別清單

classList
只讀屬性，傳回元素類別屬性的即時集合。

e.classList()

腳本化樣式表

開啟和關閉樣式表

style和link元素的CSSStyleSheet物件定義了一個在js中可以設定和查詢的disabled屬性。

關於disabled屬性，該屬性在HTML中不屬於規範的一部分，在HTML中不存在，但是，在DOM中存在該屬性。在標籤中無法設定該屬性，但是可以在腳本中設定該屬性

如果值為true，樣式表關閉，否則樣式表開啟

e.disabled = true;

這樣樣式表即可關閉。

類似的透過以下方式也可

document.styleSheets[0].disabled;

查詢，插入與刪除樣式表規則

CSSStyleSheet物件同樣也定義了用來查詢，插入和刪除樣式表規則的api

查詢所有樣式表內容

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

document.styleSheets[0] 一個唯讀屬性，傳回一個該文件的連結或嵌入的樣式表

該樣式只讀，不可進行插入和刪除

其中selectorText為css選擇器
cssText 為css的文字樣式

新增和刪除規則

#insertRule()和deleteRule()這兩種方法，要達到新增和刪除規則
還有一個addRule()方法

insertRule()方法

insertRule()和deleteRule ()這兩種方法，達到新增和刪除規則

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

在ss樣式表中，在第0條cssRules中新增一條css規則。使得類別為name的字體變藍
如果新增的索引已經存在則不會覆蓋，所有的索引加1，然後進行插入

deleteRule()方法

刪除樣式規則
刪除上一條插入的樣式

ss.deleteRule(0);

刪除第0條規則，樣式繼續保持從0開始

建立新的樣式表

這個不難，直接插入一個新的style元素透過innerHTML的方式將其插入新的css內容，或直接插入link標籤，設定加入一個html的屬性使用的是Element.setAttritube()方法，將rel的值設為stylesheet 然後在用同樣的方法加入src屬性

#純粹的dom 和bom的操作，不涉及任何樣式表的內容

相關建議：

CSS 和 JS 動畫哪個更快_html/css_WEB-ITnose

#css動畫結束後 js無法修改translated值._html/css_WEB-ITnose

以上是js如何寫出css動畫 ？ js寫css動畫的方法（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！