js 和 css動畫

qianfeng 發布于2019-08-29 16:23 / 2196人閱讀

摘要：和動畫使用或者使用這兩個函數定時調用一段代碼。腳本化樣式表開啟和關閉樣式表和元素的對象定義了一個在中可以設置和查詢的屬性。

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

云服務器 GPU云服務器 js+css和jsp js和css內聯外聯 js和css效果圖 css3動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113714.html

可能是最全的前端動效庫匯總

摘要：非常的龐大，而且它是完全為設計而生的動效庫。它運行于純粹的之上，是目前最強健的動畫資源庫之一。可能是創建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性。可以通過安裝吊炸天了，接近現實生活中的物理運動碰撞慣性動畫庫。收集日期為2019-02-28，★代表當時的該項目在github的star數量 Animate.css 56401 ★ 一個跨瀏覽器的動效基礎庫，是許多基礎動...

afishhhhh 2019-05-23 16:24 評論0 收藏0
JavaScript是如何工作的: CSS 和 JS 動畫底層原理及如何優化它們的性能

摘要：貝塞爾曲線貝塞爾曲線是應用于二維圖形應用程序的數學曲線。通過調整控制點，貝塞爾曲線的形狀會發生變化。讓我們看看貝塞爾曲線的工作原理。貝塞爾曲線需要四個值，或者更準確地說它需要兩對數字。每對描述立方貝塞爾曲線控制點的和坐標。這是專門探索 JavaScript 及其所構建的組件的系列文章的第 13 篇。如果你錯過了前面的章節，可以在這里找到它們： JavaScript 是如何工作的：...

darcrand 2019-08-23 14:47 評論0 收藏0
使用Move.js創建CSS3動畫

摘要：是使用簡單函數創建動畫的一個簡單的庫。基礎知識提供了創建動畫的最簡單的。他用于分割動畫為兩個集合，并按順序執行。如下動畫被分為兩步，通過方法實現分割使用創建復雜動畫在本教程中，我們已經寫了很多基本的動畫來了解各個方法。原文鏈接，請移步creating-css-animations-using-move-js 第一次翻譯，如有誤解，請移步原文在網站上，CSS3 的過渡和動畫是當前...

MASAILA 2019-08-21 12:13 評論0 收藏0
前端動畫調研-V1

摘要：支持動畫狀態的，在動畫開始，執行中，結束時提供回調函數支持動畫可以自定義貝塞爾曲線任何包含數值的屬性都可以設置動畫倉庫文檔演示功能介紹一定程度上，也是一個動畫庫，適用所有的屬性，并且實現的能更方便的實現幀動畫，替代復雜的定義方式。動畫調研-V1 前言：動畫從用途上可以分為兩種，一種是展示型的動畫，類似于一張GIF圖，或者一段視頻，另一種就是交互性的動畫。這兩種都有具體的應用場景，比如...

ddongjian0000 2019-08-23 11:00 評論0 收藏0
[練習]利用CSS steps 實現逐幀動畫

摘要：網頁逐幀動畫的實現方式網頁中的逐幀動畫，大致可分為兩大類的實現方式，分別是使用控制，和單純使用實現，兩者的優劣總體概括來說就是動畫可控性更強，但開銷大，實現復雜。網頁逐幀動畫的實現方式網頁中的逐幀動畫，大致可分為兩大類的實現方式，分別是使用JS控制，和單純使用CSS實現，兩者的優劣總體概括來說就是： JS動畫可控性更強，但開銷大，實現復雜。 CSS動畫實現相對JS更簡單。常見的網...

RiverLi 2019-08-30 12:55 評論0 收藏0
11 個最好的 JavaScript 動態效果庫

摘要：經過一番研究，我收集了個最好的庫，你可以用在自己的項目中。該庫于年月首次推出，目前仍有近名參與者開發。超過的，是一個動畫庫，可以處理屬性單個轉換或任何屬性，以及對象。對智能設備的方向作出反應的視差引擎快速創建漂亮的動畫。翻譯：瘋狂的技術宅原文：https://blog.bitsrc.io/11-jav... 當我想要在網上找一個簡潔的 Javascript 動效庫時，總是發現很多推...

wawor4827 2019-08-23 16:06 評論0 收藏0