js 和 css动画

qianfeng 发布于2019-08-29 16:23 / 2267人阅读

摘要：和动画使用或者使用这两个函数定时调用一段代码。脚本化样式表开启和关闭样式表和元素的对象定义了一个在中可以设置和查询的属性。

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动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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