首页 > js教程 > 正文

js如何写出css动画 ?js写css动画的方法(代码)

原创 2018-08-11 10:40:12 0 624
本篇文章给大家带来的内容是关于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中文网其它相关文章!

  • 相关标签:javascript css
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧
  • jQuery链式调用与show知识浅析_jquery
  • JS实现登录页面记住密码和enter键登录方法推荐_javascript技巧
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】_javascript技巧
  • js如何写出css动画 ?js写css动画的方法(代码)
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    • PeterZhu
    • 2017-03-20 22:47:17
    • 点击数(111301)

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    • PeterZhu
    • 2017-05-16 12:03:57
    • 点击数(109223)

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    • PeterZhu
    • 2017-03-13 10:15:11
    • 点击数(83833)

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • PeterZhu
    • 2017-07-24 16:48:56
    • 点击数(83012)

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    • 不言

      全栈工程师

    • 认证0级讲师
    • 6265篇
      文章总数
    • 624
      文章总浏览数

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节