精华内容
下载资源
问答
  • 当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画。因为在桌面浏览器上, 并非所有的都支持css3。用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养。总有不少人会觉得win7.win8没xp...

    当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画。因为在桌面浏览器上, 并非所有的都支持css3。用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养。总有不少人会觉得win7.win8没xp好用。但手机方面就大不一样了,手机浏览器对html5和css3的支持还是很不错的。但手机硬件处理能力却又十分有限。在四核、八核手机横行的今天,依然有像我这样使用双核或单核手机的。js虽好,单奈何接触不多,调不好那种感觉。一个简单的页面滑动,在i7的pc上运行十分流畅,可是,在我的双核手机上就卡、顿、卡、顿。令人十分郁闷。为此,我也是寻找了很久很久,看了很多很多。终于在不就之前,找到了一种还算简单的方法:使用css3去执行动画。

    在以前,对于动画除了Jquery的animate等动画函数外,更多的是使用setTimeout,setInterval,这样循环的去改变一个元素的margin、width、top等属性。也正是如此,才有了我的困惑。

    首先,setTimeout,setInterval 这货并非你设置0ms它就能一直一直的去执行。曾经在iscroll里调试的时候无意中发现了这个秘密。原来Timer延时的计算依靠的是浏览器的内置时钟,而时钟的精确度又取决于时钟更新的频率。IE8及其之前的IE版本更新间隔为15.6毫秒。完了,我想它10ms执行1px位移,它还不能准时的干这事。

    而卡又是怎么回事呢?卡,因为代码写的不好。毕竟js是单线程的,一旦有耗时的动作那么UI就可能不响应了。虽然我们使用了setTimeout,但正是因为setTimeout让我们看上去界面没死可动作却又不流畅了。因为这次setTimeout执行之后,在下次执行前,中间这个间隔里很可能遇到另一个耗时的动作,那么,setTimeout的执行就无限后延。然后呢?卡!然而,卡还能有下一个原因,改变原始属性时不小心触发浏览器Layout(即:重布局)。这个问题说它不耗时呢,却又耗时,说它耗时呢,很多时候却又可以忽略。但很多时候其实是不能忽略的。

    除了上面这两段,还有一个问题,就是在很多手机上总感觉是一帧一帧的,而且还可能是一帧长一帧短。这真是能把人都搞废的节奏。为何会这样呢,依然和settimeout的推迟有一定的关系。丢帧。这个问题有涉及到显示器的刷新频率问题。实在太复杂了。

    最后选择了CSS3,js动态的改变元素的属性,使用transition来控制动画执行时间。举个例子:

    js:

    $("#test").width(200);

    这样1秒之后这个div的宽度会变成200px。不是孙悟空变桃子一样瞬间变大,慢慢的赶脚,不卡不顿。而且使用css动画有个好处,它不受耗时js的影响。虽然浏览器中UI线程与js线程是互斥,但这一点对css动画不成立,并且很多浏览器还能启用硬件加速(比如:Chrome)。虽然浏览器重布局普通情况下感觉不是很明显,但还是应该尽量避免大面积的重布局。so在动画元素上加上-webkit-transform: translateZ(0);或者-webkit-transform: translate3d(0,0,0);这样浏览器会独立渲染这一层。即便是重布局无法避免,这样面积也小些。而使用translate取代margin也确实是一个十分明智的决定。

    最后附上一些常用的改变时会触发重布局的属性:

    width

    height

    padding

    margin

    display

    border-width

    border

    min-height

    以上就是本文所述的全部内容了,希望对大家学习javascript和CSS3能够有所帮助,同时不足之处烦请补充,谅解。

    展开全文
  • 我们经常面临一个抉择:到底使用JavaScript还是CSS动画?下面本篇文章就来比较一下css3动画js动画,让大家了解一下css3动画js动画的区别,希望对大家有所帮助。JS动画缺点:JavaScript在浏览器的主线程中运行,...

    我们经常面临一个抉择:到底使用JavaScript还是CSS动画?下面本篇文章就来比较一下css3动画和js动画,让大家了解一下css3动画和js动画的区别,希望对大家有所帮助。

    5dc671009578c816.jpg

    JS动画

    缺点:JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞,从而造成丢帧的情况。

    JS动画代码的复杂度高于CSS动画

    优点:JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制:开始、暂停、回放、终止、取消都是可以做到的。

    JS动画的效果比css3动画丰富,有些动画效果,比如曲线运动,冲击闪烁,视差滚动效果,只有JavaScript动画才能完成

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

    CSS动画

    缺点:运行过程控制较弱,无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点,不能在半路反转动画,不能变换时间尺度,不能在特定的位置添加回调函数或是绑定回放事件,无进度报告

    代码冗长。想用 CSS 实现稍微复杂一点动画,最后CSS代码都会变得非常笨重。

    优点:

    浏览器可以对动画进行优化。

    浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout,setInterval设置动画的优势主要是:requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。

    在隐藏或不可见的元素中requestAnimationFrame不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。

    强制使用硬件加速 (通过 GPU 来提高动画性能)

    CSS动画比JS流畅的前提:JS在执行一些昂贵的任务

    同时CSS动画不触发layout或paint

    在CSS动画或JS动画触发了paint或layout时,需要main thread进行Layer树的重计算,这时CSS动画或JS动画都会阻塞后续操作。

    只有如下属性的修改才符合“仅触发Composite,不触发layout或paint”:backface-visibility

    opacity

    perspective

    perspective-origin

    transfrom

    所以只有用上了3D加速或修改opacity时,css3动画的优势才会体现出来。代码相对简单,性能调优方向固定

    对于帧速表现不好的低版本浏览器,CSS3可以做到自然降级,而JS则需要撰写额外代码

    展开全文
  • 使用css3制作纯前端开场动画,穿越云层效果。
  • css3 的时代,css3动画 一切皆有可能; 传统的js 可以通过回调函数判断动画是否结束;即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件; transitionend事件和animationend事件标准的...
  • css3动画旋转动画Thomas Fuchs, creator of script2 (scriptaculous' second iteration) and Zepto.js (mobile JavaScript framework), creates outstanding animated elements with JavaScript. He's a legend in ...

    css3动画旋转动画

    CSS3 Animations

    Thomas Fuchs, creator of script2 (scriptaculous' second iteration) and Zepto.js (mobile JavaScript framework), creates outstanding animated elements with JavaScript.  He's a legend in his own right, and for good reason:  his work has helped to inspire developers everywhere to drop Flash and opt for JavaScript development for smooth UI's.  One simple effect I enjoy is the script2 website's rotation of a ray image.  Let me show you how Thomas did it!

    脚本2 (scriptaculous的第二次迭代)和Zepto.js(移动JavaScript框架)的创建者Thomas Fuchs使用JavaScript创建了出色的动画元素。 他本身就是一个传奇人物,这有充分的理由:他的工作帮助激发了各地的开发人员放弃Flash并选择JavaScript开发以实现流畅的UI的意愿。 我喜欢的一个简单效果是script2网站对射线图像的旋转。 让我告诉你托马斯是如何做到的!

    CSS (The CSS)

    There's very little CSS to add to your stylesheet:

    几乎没有CSS要添加到样式表中:

    
    #rays	{ 
    	background:url(rays.png) 0 0 no-repeat; 
    	position:absolute; 
    	top:0; 
    	left:0; 
    	width:490px; 
    	height:490px; 
    	transform:scale(1) rotate(16.768rad);
    }
    
    
    

    The rays image should be a background image and it's probably best to set the element's dimensions. You can set an initial rotation value as well.

    射线图像应该是背景图像,最好设置元素的尺寸。 您也可以设置初始旋转值。

    JavaScript (The JavaScript)

    The spinning rays effect works by using JavaScript to update browser-specific CSS3 animation properties.  The first step is detecting the browser:

    旋转光线效果通过使用JavaScript来更新特定于浏览器CSS3动画属性而起作用。 第一步是检测浏览器:

    
    var cssPrefix = false;
    switch(Browser.name) {
    	case "safari":
    		cssPrefix = "webkit";
    		break;
    	case "chrome":
    		cssPrefix = "webkit";
    		break;
    	case "firefox":
    		cssPrefix = "moz";
    		break;
    	case "opera":
    		cssPrefix = "o";
    		break;
    	case "ie":
    		cssPrefix = "ms";
    		break;
    }
    
    
    

    I've chosen to use MooTools' Browser object to detect the browser.  jQuery and other libraries provide a method by which to get the current browser.  As you can tell by the code, this effect will support Webkit-based browsers (Chrome, Safari, Webkit-mobile), Firefox, and Opera. Once the current browser is detected, you set forth a setInterval directive to perodically update the degree rotation of the element:

    我选择使用MooTools的Browser对象来检测浏览器。 jQuery和其他库提供了一种获取当前浏览器的方法。 如代码所示,该效果将支持基于Webkit的浏览器(Chrome,Safari,Webkit-mobile),Firefox和Opera。 一旦检测到当前浏览器,就可以设置setInterval指令来定期更新元素的度旋转:

    
    // Spin them rays!
    if(cssPrefix) { // Skip IE!
    	var rays = document.getElementById("rays"), degrees = 0, speed = 0.05;
    	setInterval(function() {
    		degrees += speed; // degree adjustment each interval
    		rays.setAttribute("style","-" + cssPrefix + "-transform:rotate(" + degrees + "deg)");
    	},20);
    }
    
    
    

    With MooTools it would look like:

    使用MooTools,它看起来像:

    
    // Spin them rays!
    if(cssPrefix) { // Skip IE!
    	var rays = $("rays"), degrees = 0, speed = 0.05;
    	(function() {
    		degrees += speed; // degree adjustment each interval
    		rays.set("style","-" + cssPrefix + "-transform:rotate(" + degrees + "deg)");
    	}).periodical(20);
    }
    
    
    

    I've found a 20 millisecond class assignment interval provides a smooth but subtle transition.  After all you don't want the ray movement to steal the user's attention. To add some fun you could adjust the speed of the animation when the user mouses in and out of the element:

    我发现20毫秒的类分配间隔提供了一个平稳但细微的过渡。 毕竟,您不希望射线运动吸引用户的注意力。 要添加一些乐趣,您可以在用户将鼠标移入和移出元素时调整动画的速度:

    
    rays.addEvents({
    	mouseenter: function() { // 5x! Warp speed!
    		speed = 0.25;
    	},
    	mouseleave: function() { // Back to normal;
    		speed = 0.05;
    	}
    });
    
    
    

    Subtlety is the key to using this effect...effectively.  Using CSS properties to transition the element's rotation is even more optimal, seeing as they're native to the browser.  You'll want to be sure not to use this effect to much on a given page, as many concurrent animations can be taxing to any browser.  I'd also like to point out that Safari and Chrome handle these animations best.

    微妙是有效使用此效果的关键。 鉴于CSS属性是浏览器的本机,因此使用CSS属性转换元素的旋转效果甚至更好。 您将要确保不要在给定页面上过多使用此效果,因为许多并发动画可能会给任何浏览器带来负担。 我还要指出,Safari和Chrome可以最好地处理这些动画。

    翻译自: https://davidwalsh.name/javascript-spin

    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动画,这样你的动画可以保持高效,并且你的工作流也更可控。

    举报/反馈

    展开全文
  • move.js:基于CSS3JavaScript动画框架
  • 动画 使用 CSS3JS 的 SVG 动画
  • 2016-08-21点击(33,967)下载(1)来源:未知收藏简介Scrollanim 是使用 CSS3 + JavaScript 实现的用于创建滚动动画的库,应用到元素上后,当此元素出现在浏览器可视区域时便会执行对应的动画,和之前介绍的 WOW.js及 ...
  • css3动画js动画比较

    千次阅读 2019-07-08 09:23:19
    CSS3动画在性能上会稍微好一些,浏览器会对CSS3动画做一些优化(比如专门新建一个图层用来跑动画) 代码相对简单 js 控制能力强,可以单帧的控制和变换。 写的好,写的好的话,完全可以兼容IE6 缺点 css3动画...
  • css3 的时代,css3--动画 一切皆有可能;传统的js 可以通过回调函数判断动画是否结束;即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件;transitionend事件和animationend事件标准的...
  • CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画JavaScript 实现的效果。 CSS3 @keyframes 规则 要创建 CSS3 动画,你需要了解 @keyframes 规则。 @keyframes 规则是创建动画。 @keyframes 规则内...
  • css3动画js动画的区别

    千次阅读 2019-06-14 21:20:46
    css3动画js动画的区别
  • CSS3动画JS动画
  • javascript 监听CSS3动画

    2019-10-20 15:40:24
    CSS3动画逐渐代替了 jQuery的动画方法,从以前的通过计时器频繁修改元素样式到现在的只需要修改CSS就能实现平滑的动画。 如果有一组动画队列,...本篇文章介绍 js监听 CSS3动画的事件。 CSS3实现动画分为trans...
  • Move.js 是个极小的 JavaScript 库,支持 CSS3动画效果,非常简单优雅。在线 demo 标签:Movejs
  • css3 动画 vs js 动画

    2019-09-25 02:52:42
    之前被问到过,css3 动画js 动画孰优孰劣,脑袋的第一反应就是性能上肯定 css3 动画会好很多,但别人说不对,我就在想,不对?难道还有别的原因吗?答案是肯定的。先来看看二者实现动画的原理吧。 css3 动画原理...
  • Move.js是一个小JavaScript库,使CSS3支持的动画极其简单和优雅。 确保查看./examples并查看。 安装 带有 : $ component install visionmedia/move.js 使用 : $ npm install move-js 使用独立版本 [removed]...
  • css3动画css3之后添加了transform动画计算函数,所以实现动画更为简单,但是动画控制上不是特别灵活,部分动画无法实现(比如轮播图,视觉滚动都需要Js去参与),并且兼容性也存在一定问题。 js动画js动画相...
  • 在性能上会稍微好一些,浏览器会对CSS3动画做一些优化(新建图层来跑动画)。 移动端的开发也有这种hack,开启硬件加速,来解决可能的卡顿问题: css-webkit-transform: translate3d(0, 0, 0); js 在现代浏览器中...
  • 本文主要给大家介绍的是如何使用javascript判断CSS3动画效果结束,主要是使用javascript的回调函数,其思路是一旦动画或变换结束,回调函数就会触发。不再需要大型类库支持,非常的简单实用,推荐给大家。css3 的...
  • 前端动画选择----js动画css3动画

    千次阅读 2019-03-06 15:09:01
    js动画css3动画 js实现动画setTimeout()setInterval(),这种叫做帧动画,每隔一段时间更改当前元素的状态 css3实现动画,这种叫补间动画,这种给定起始状态和结束状态,中间的动画游览器引擎自己去做,如...
  • 当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画。因为在桌面浏览器上, 并非所有的都支持css3。用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养。总有不少人会觉得win7.win8没xp...
  • flipside是一款使用css3js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效。该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的。
  • css3动画js动画的对比

    千次阅读 2018-12-03 16:24:19
    Chromium项目里,渲染线程分为main thread和compositor thread。 如果CSS动画只是改变transforms和opacity,这时整个CSS动画得以在...在JS执行一些昂贵的任务时,main thread繁忙,CSS动画由于使用了compos...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 134,991
精华内容 53,996
关键字:

动画用css3还是js