js 和 css動畫

小小浪花一朵發表於2018-08-11
JSCSS動畫

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的操作，不涉及任何樣式表的內容

相關文章