精华内容
下载资源
问答
  • 动画用css3还是js
    2021-09-04 22:58:16

    JS和CSS3结合实现动画

    • 我们知道,CSS3的transition过渡属性可以实现动画
    • JavaScript可以利用CSS3的transition属性轻松实现元素
      动画
    • JS和CSS3结合实现动画规避了定时器制作动画的缺点
      函数节流
    • 函数节流:一个函数执行一次后,只有大于设定的执行周期后才允许执行第二次
    • 函数节流非常容易实现,只需要借助setTimeout()延时器
    var lock = true;
    function 需要节流的函数() {
    // 如果锁是关闭状态,则不执行
    if (!lock) return;
    // 函数核心语句
    // 关锁
    lock = false;
    // 指定毫秒数后将锁打开
    setTimeout(function () {
    lock = true;
    }, 2000);
    }
    

    动画效果开发1 - 无缝连续滚动特效
    动画效果开发2 - 跑马灯轮播图特效
    动画效果开发3 - 呼吸轮播图特效

    定时器和延时器
    定时器

    • setInterval()函数可以重复调用一个函数,在每次调用之
      间具有固定的时间间隔

    函数的参数

    setInterval()函数可以接收第3、4……个参数,它们将按顺序传入函数

    setInterval(function (a, b) {
    // 形式参数a的值是88,形式参数b的值是66
    }, 2000, 88, 66);
    
    • 具名函数也可以传入setInterval
    var a = 0;
    function fun() {
    console.log(++a);
    }
    setInterval(fun, 1000);
    

    清除定时器

    clearInterval()函数可以清除一个定时器

    // 设置定时器,并且用timer变量接收这个定时器
    var timer = setInterval(function () {
    }, 2000);
    // 点击按钮时,清除定时器
    oBtn.onclick = function () {
    clearInterval(timer);
    }
    

    延时器
    setTimeout()函数可以设置一个延时器,当指定时间到了
    之后,会执行函数一次,不再重复执行。

    setTimeout(function () {
    // 这个函数会在2秒后执行一次
    }, 2000);
    
    

    清除延时器

    • clearTimeout()函数可以清除延时器,和clearInterval()
      非常类似

    初步认识异步语句

    • setInterval()和setTimeout()是两个异步语句
    • 异步(asynchronous):不会阻塞CPU继续执行其他语句,当异步完成时,会执行“回调函数”(callback)
    setTimeout(function () {
    console.log('A');
    }, 2000);
    console.log('B');
    
    
    

    使用定时器实现动画

    • 使用定时器可以实现动画,利用的就是“视觉暂留”原理
    • 使用定时器实现动画较为不便:
      ① 不方便根据动画总时间计算步长
      ② 运动方向要设置正负
      ③ 多种运动进行叠加较为困难(比如一个方形一边移动一边变为圆形)
    更多相关内容
  • JS+CSS3开关按钮动画特效是一款基于js+css3制作3D拖拽旋转的面板开关,换向开关按钮点击黑白背景色切换特效。
  • CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画JavaScript 实现的效果。 CSS3 @keyframes 规则 要创建 CSS3 动画,你需要了解 @keyframes 规则。 @keyframes 规则是创建动画。 @keyframes 规则内...
  • CSS3 Animation提供的简单3D骰子滚动动画制作器。 香草JS 将dist / roll-a-die.js复制到您的库文件夹中将其加载到HTML脚本中 [removed][removed] 您可以使用链接...
  • 一款简单的js+css3文字上下滚动切换动画特效,可设置多种不同颜色的文字。
  • flipside是一款使用css3js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效。该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的。
  • 基于Zepto+CSS3宝箱开启动画抽奖JS特效代码,很不错的特效代码,特效基于Zepto、CSS3, 其中有好几种CSS3动画效果,背景光环滚动,宝箱摇摆开启,弹出提示层,还是很不错的CSS3 动画特效,大家可以学习下。
  • 01Js:首先,js动画是逐帧动画,几乎可以完成您想要的任何动画形式。 但因为内容不同会增加生产负担,并且资源占用相对较大。 但是它的优点也很明显:非常适合执行非常精致的动画,例如3D效果,人物或动物的急转弯等...

    01Js:

    首先,js动画是逐帧动画,几乎可以完成您想要的任何动画形式。 但因为内容不同会增加生产负担,并且资源占用相对较大。 但是它的优点也很明显:非常适合执行非常精致的动画,例如3D效果,人物或动物的急转弯等。 但是,如果帧速率太低,则从一个帧到另一个帧的过渡很可能是不自然且不一致的。

    620bca6a1c6cfadae8063a6a4ffaf9f9.png

    缺点:

    JavaScript在浏览器的主线程中运行,还有其他JavaScript脚本、样式计算、布局、绘图任务需要在主线程中运行。干扰它们可能导致线程阻塞,从而导致帧丢失。

    代码复杂度高于CSS动画。

    优点:

    JavaScript动画控制能力很强,可以控制动画在播放过程中:开始、暂停、播放、终止、取消都可以完成。

    动画效果比CSS3动画更丰富,一些动画效果,如曲线运动、冲击闪烁、视差滚动等效果,只有JavaScript动画才能完成。

    CSS3有兼容性问题,而JS大多数时候没有兼容性问题。

    6021bf0bb3f3e1d2a8bdc5e30828692f.png

    例如:

    Visit W3School!

    function mouseOver()

    {

    document.b1.src ="/i/eg_mouse.jpg"

    }

    function mouseOut()

    {

    document.b1.src ="/i/eg_mouse2.jpg"

    }

    aac5a7733d6b7b03e309d82162befdb2.png

    02Css3:

    动画是使元素从一种样式逐渐变化为另一种样式的效果。

    当实现一些简单的滑动,翻转和其他特殊效果时,Css3非常方便,但是当你想要实现一些很酷的效果时,它的操作通常比js操作具有更多的冗余。

    在css3中制作动画时,浏览器可以进行一些优化,这将比js使用更少的cpu资源,但是效果足够流畅。

    优点:

    (1)浏览器可以优化动画。

    (2)代码相对简单,并且性能调整方向是固定的。

    (3)对于帧速率性能较差的低版本浏览器,CSS3可以自然降级,而JS需要编写其他代码。

    96593d85ab0e0d75ec8738fec68b57b8.png

    缺点:

    1.运行过程的控制较弱,不可能附加事件绑定回调函数。 CSS动画只能暂停,无法在动画中找到特定的时间点,不能中途反转动画,无法更改时间比例,无法添加回调函数或将播放事件绑定到特定位置,并且没有进度报告

    2。 代码冗长。 如果您想使用CSS来实现稍微复杂一点的动画,那么CSS代码最终将变得非常繁琐。

    例如:

    div

    {

    width:100px;

    height:100px;

    background:red;

    animation:myfirst 5s;

    -moz-animation:myfirst 5s; /* Firefox */

    -webkit-animation:myfirst 5s; /* Safari and Chrome */

    -o-animation:myfirst 5s; /* Opera */

    }

    @keyframes myfirst

    {

    0% {background:red;}

    25% {background:yellow;}

    50% {background:blue;}

    100% {background:green;}

    }

    总结:

    如果动画只是简单的状态切换,不需要中间过程控制,在这种情况下,css动画是优选方案。

    如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画,这样你的动画可以保持高效,并且你的工作流也更可控。

    举报/反馈

    展开全文
  • 使用css3制作纯前端开场动画,穿越云层效果。
  • css3 的时代,css3动画 一切皆有可能; 传统的js 可以通过回调函数判断动画是否结束;即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件; transitionend事件和animationend事件标准的...
  • 因此,利用JavaScriptCSS3结合实现动画是一种较为常用的做法。//指定时间后,将锁打开,这段时间是盒子走完一次的时间。//标识量,指示当前盒子在左边还是右边。现在设置一个点击按钮运动的特效。//首先检查锁是否...

    使用JavaScript中的定时器可以实现动画,但有以下几种问题:

    • 不方便根据动画总时间计算步长
    • 运动方向要分开设置正负
    • 多种运动叠加较为困难(比如盒子在运动的工程中由正方形变为圆形)

    因此,利用JavaScript和CSS3结合实现动画是一种较为常用的做法。

    现在设置一个点击按钮运动的特效

    设置一个按钮,对其添加事件监听:

    		// 标识量,指示当前盒子在左边还是右边
        	var pos = 1;
    	
    		btn.onclick = function () {
                // 添加过渡
                box.style.transition = 'all 2s linear 0s';
                if (pos == 1) {
                    box.style.left = '1100px';
                    pos = 2;
                } else if (pos == 2) {
                    box.style.left = '100px';
                    pos = 1;
                }
            };
    

    但对于频繁点击,则事件会立即结束,盒子立即掉头:

    在这里插入图片描述

    因此可以考虑给盒子添加一个节流锁,使得盒子每次都能完整走完一个周期:

    		// 标识量,指示当前盒子在左边还是右边
            var pos = 1;  
    
            // 函数节流锁
            var lock = true;
    
            // 事件监听
            btn.onclick = function () {
                // 首先检查锁是否是关闭
    			if (!lock) return;
                // 添加过渡
                box.style.transition = 'all 2s linear 0s';
                if (pos == 1) {
                    box.style.left = '1100px';
                    pos = 2;
                } else if (pos == 2) {
                    box.style.left = '100px';
                    pos = 1;
                }
    			// 关锁
                lock = false;
                // 指定时间后,将锁打开,这段时间是盒子走完一次的时间
                setTimeout(function() {
                    lock = true;
                }, 2000);
            };
            
    

    效果:
    在这里插入图片描述
    完整代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #box {
                width: 100px;
                height: 100px;
                background-color: orange;
                position: absolute;
                top: 100px;
                left: 100px;
            }
        </style>
    </head>
    
    <body>
        <button id="btn">按我运动</button>
        <div id="box"></div>
    
        <script>
            // 得到元素
            var btn = document.getElementById('btn');
            var box = document.getElementById('box');
    
            // 标识量,指示当前盒子在左边还是右边
            var pos = 1;  
    
            // 函数节流锁
            var lock = true;
    
            // 事件监听
            btn.onclick = function () {
                // 首先检查锁是否是关闭
                if (!lock) return;
    
                // 添加过渡
                box.style.transition = 'all 2s linear 0s';
                if (pos == 1) {
                    box.style.left = '1100px';
                    pos = 2;
                } else if (pos == 2) {
                    box.style.left = '100px';
                    pos = 1;
                }
    
                // 关锁
                lock = false;
                // 指定时间后,将锁打开,这段时间是盒子走完一次的时间
                setTimeout(function() {
                    lock = true;
                }, 2000);
            };
        </script>
    </body>
    
    </html>
    
    展开全文
  • Move.js使用简单函数创建 CSS3 动画的一个简单的JavaScript库。本教程将探讨Move.js的基础知识,并提供一个在线demo。 基础知识 Move.js 提供了创建 CSS3 动画的最简单的 JavaScript API。让我们假设有一个带类 ...
  • js代码 [removed] var box = document.getElementById("box"); var aImgs= box.getElementsByTagName("img");... 这是一款基于CSS3 transform图片飞入动画特效,仿唱吧首页图片从左右两边飞入动画效果。
  • js结合css3倒计时三秒动画特效是一款带有动画效果的倒计时时间代码。
  • 一款JS+CSS3制作的日历本挂历点击掉落动画特效,类似撕掉挂历页动画效果。
  • 描述: css3代码与js插件一同实现的loading效果 原理比较简单,效果也比较好看 因使用较少,本案例暂只提供观赏 这里就不解释如何使用
  • CSS3动态数字翻转切换动画特效是一款类似苹果IOS版本发布css3数字跳动切换特效。
  • 本文实例讲述了原生JS检测CSS3动画是否结束的方法。分享给大家供大家参考,具体如下: 不知道大家在做网页的时候有没有碰到这种情况:当你使用CSS3动画属性时,想要在动画结束后添加一系列操作,但往往这些操作...
  • CSS3加载动画.zip

    2019-07-03 21:44:03
    CSS3加载动画是一款同一种模式,都是一群小球在大球里面形成各种排列从而达到Loading加载动画的效果。
  • 一个轻量级(不需要 jQuery)JavaScript 动画库,用于链接 CSS3 动画和循环。 例子 JavaScript var slideOne = document.getElementsByClassName('shape-1')[0] , slideTwo = document.getElementsByClassName('...
  • 本文给大家讲述的是如何使用javascript结合CSS动画来实现一些占用资源更少,更优化的动画效果,思路十分巧妙,这里推荐给小伙伴们参考下。
  • 这是一款纯CSS3制作3D旋转科幻球体动画特效,CSS3科技球体旋转动画代码。
  • CSS动画JS动画对比

    2021-08-31 10:30:13
    在工作中,经常会写点动画效果,常用的方式有CSS动画还有JS动画,根据项目的需求,采用的方案各不相同,但是两者实现的性能分析没有进行对比。总结网上相关资料,在这里简单整理下 本文主要讲以下这些内容 1、浏览器...

    在工作中,经常会写点动画效果,常用的方式有CSS动画还有JS动画,根据项目的需求,采用的方案各不相同,但是两者实现的性能分析没有进行对比。总结网上相关资料,在这里简单整理下
    本文主要讲以下这些内容

    1、浏览器渲染流程
    2、回流和重绘
    3、CSS 动画
    4、JS 动画
    两者对比
    🍉 1. 浏览器的渲染流程
    渲染流程主要有4个步骤

    解析 HTML 生成DOM 树
    解析 CSS 样式生成 CSSOM 树,CSSOM 树与 DOM 树结合生成 Render tree
    布局 Render Tree 对每个节点进行布局处理,确定在屏幕上的位置
    绘制 Render Tree,遍历渲染树将每个节点绘制出来
    为了优化用户体验,渲染引擎不会等到 HTML 解析完才创建布局渲染树

    「生成 DOM 树」
    DOM 树的构建是一个深度遍历过程,也就是说只有在所有子节点都构建好后才会去构建当前节点的下一个兄弟节点

    「生成 Render 树」
    生成 DOM 树的同时会生成 CSSOM 树,根据 CSSOM 和 DOM 树构建 Render Tree,渲染树包括颜色,尺寸等显示属性的矩形
    在这里插入图片描述

    「DOM 树和 Render 树」

    🍋 2. 回流和重绘
    CSS 中至关重要的概念

    回流
    回流也叫「重排」,指「几何属性」需要改变的渲染。

    每一次的回流都会将网页内容「重新渲染」,只是我们人眼感觉不到有任何变化,但是它确实是会清空页面的,再从页面的左上角的第一个像素点从左到右从上到下这样一点一点渲染,每次回流都会是这样的过程,只是感觉不到而已


    渲染树的节点发生改变,影响了该节点的几何属性,导致该节点位置发生变化,此时就会触发浏览器回流并重新生成渲染树。


    常见的几何属性:布局,尺寸这些可以用尺子量出来的属性

    display、float、grid
    width、padding

    重绘
    重绘指更改「外观属性」而不影响「集合属性」的渲染,类似于颜色这些。相比于回流,重绘的作用不会那么强烈。

    渲染树的节点发生改变,但不影响该节点的集合属性,回流对浏览器性能的消耗是远大于重绘的。并且回流就必然带来重绘,重绘不一定需要回流

    「外观属性」

    clip,background
    text

    在介绍完这些知识后我们来聊聊 CSS 动画

    🍍 3. CSS3 动画
    这里我们只谈论 CSS3 的动画

    CSS3 动画也被称为补间动画,原因是只需要添加关键帧的位置,其他的未定义的帧会被自动生成

    因为我们只设置了几个关键帧的位置,所以在进行动画控制的时候比较困难,不能再半路暂停动画,或者在动画过程中添加一些其他操作,都不大容易

    但是 CSS 动画也有很多的好处

    浏览器可以对动画进行优化
    帧速不好的浏览器,CSS3 可以自然降级兼容
    代码简单,调优方向固定
    🍎 4. JS 动画
    首先,JS 动画是逐帧动画,在时间帧上绘制内容,一帧一帧的,所以他的可再造性很高,几乎可以完成任何你想要的动画形式。但是由于逐帧动画的内容不一样,会增加制作的负担,占用比较大的资源空间。

    但是它也有很多的优势

    细腻的动画
    可控性高
    炫酷高级的动画
    💯 5. CSS 动画与 JS 动画对比
    前面关于 CSS 动画和 JS 动画,都是一些概念性比较强的东西,不看也罢

    说了这么多,到底为什么CSS动画要「更高效」呢?

    「第一点」
    从实现动画的复杂度来看,CSS 动画大多数都是补间动画,而 JS 动画是逐帧动画。当然这里我们不谈论实现的效果

    「第二点」
    编码的高效,采用 JS 去实现的动画,无论多简单的动画,都需要去控制整个过程,当然你可能会说可以采用一些库来解决这些问题,但是这些库的实际运行可能要比原生实现的效率要低的多

    「第三点」
    性能的高效,在我们前面讲到了回流和重绘,如果我们要操作一个元素向右移动,我们可能需要控制 dom.style.left 属性,每次来「改变元素的位置」,而结合我们所说的,「几何属性」的改变必然会引起「回流」,回流必然引起重绘,可想而知如果我们采用 JS 来实现动画,这个代价有多大,这会造成浏览器在不断的计算页面,从而导致浏览器内存堆积。同时由于 JavaScript 运行在浏览器的主线程中,主线程中还有其他的重要任务在运行,因而可能会受到干扰导致「线程阻塞」,从而「丢帧」

    而 CSS 的动画是运行在合成线程中的,不会阻塞主线程,并且在合成线程中完成的动作不会触发回流和重绘

    当然还有一个重要的点:JS 动画运行在 CPU,而 CSS 动画运行在 GPU

    总的来说, CSS动画的渲染成本小,并且它的执行效率高于 JavaScript 动画

    那我们什么时候使用 CSS 动画,什么时候使用 JS 动画呢?

    我个人觉得

    「只要能用 CSS 实现的动画,就不要采用 JS 去实现」,可以多采用 CSS 预处理器去做更多复杂的动画,就像我之前用 SCSS 做的流星雨动画一样

    如果动画相较复杂,我们可以采用 JS + canvas 去尝试,能不能实现

    最后再考虑纯 JS 实现

    展开全文
  • CSS3波浪音阶动画特效是一款基于jscss3绘制的音乐播放音阶频率波浪动画特效。
  • 虽然说浏览器执行js是单线程执行(注意,是执行,并不是说浏览器只有1个线程,而是运行时,runing),但实际上浏览器的2个重要的执行线程,这 2 个线程协同工作来渲染一个网页:主线程和合成线程。 一般情况下,主线...
  • CSS3动态多选框打钩动画特效是一款基于JS+CSS3制作的多选框美化,点击多选框按钮打钩文字中划线ui动画特效。
  • 解压密码:RJ4587 这是一款基于jQuery和CSS3的图片动画特效,该图片动画是洗牌的效果,我们只需点击切换按钮,即可一张张切换图片。另外,如果你长按住按钮不放,图片的洗牌效果就会更加明显和有趣,该jQuery图片...
  • js+css3实现楼盘模型旋转动画效果是一款使用css3js制作的楼盘模型360度旋转动画
  • js+css3文字闪光滑过动画特效是一款js仿iphone触屏滑动解锁文字高光动画特效。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 151,224
精华内容 60,489
热门标签
关键字:

动画用css3还是js