JS动画(逐帧动画)

  首先,在js动画是逐帧动画,是在时间帧上逐帧绘制帧内容,由于是一帧一帧的话,所以他的可操作性很高,几乎可以完成任何你想要的动画形式。但是由于逐帧动画的帧序列内容不一样,会增加制作负担,且资源占有比较大。但它的优势也很明显:因为它相似与电影播放模式,很适合于表演很细腻的动画,如3D效果、人物或动物急剧转身等等效果。但是,如果帧率过低的话,会帧与帧之间的过渡很可能会不自然、不连贯。

  js是单线程的脚本语言,当js在浏览器主线程运行时,主线程还有其他需要运行的js脚本、样式、计算、布局、交互等一系列任务,对其干扰线程可能出现阻塞,造成丢帧的情况。

  其次,js在做动画的时候,其复杂度是高于css3的,需要考虑一些计算,操作等方便问题。

  但是正是由于js对动画的操作复杂度比较高,能对动画有一个比较好的控制,如开始、暂定、回放、终止、取帧等,可以很精确的做到。因此可以js可以通过操作DOM和BOM来做一些酷炫的动态效果,以及爆炸特效,且兼容性比较好。

css3(补间动画)

  制作方法简单方便。只需确定第一帧和最后一帧的关键位置即可,两个关键帧之间帧的内容由Flash自动生成,不需要人为处理。当然也可以多次添加关键帧的位置。

  因为只设置几个关键帧的位置,所以在进行动画控制的时候时比较弱的。不能够在半路暂停动画,或者在动画过程中不能对其进行一些操作等。

  css3在实现一些简单的滑动,翻转等特效的时候会很方便,但是想要做到一些酷炫的效果的时候,其操作往往可能会比js操作有更多的冗余。

  css3在做动画的时候,浏览器可以对其进行一些优化,会比js使用更少的占用cpu资源,但是效果足够流畅。

结论

  如果动画只是一些简单的状态切换,滑动等效果,不需要中间的控制过程,css3是比较好的选择,它直接在css文件中就可以实现,并不需要引入太多的js库。而你想做一些复杂的客户端界面,开发一个复杂ui的app,实现一个复杂纹理动画等,需要对页面进行精准的控制计算,js是不错的选择。

js动画和css3动画的区别的更多相关文章

  1. 使用jquery封装的动画脚本(无动画、css3动画、js动画)

    自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出)  slideUpDown(上下滑动)  slideLeftRight(左右滑动)  fadeSlid ...

  2. 关于JS动画和CSS3动画的性能差异

    本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...

  3. JS动画与CSS3动画

    Js动画 show / hide var div = $('#test-show-hide'); div.show('slow'); // 在0.6秒钟内逐渐显示 div.hide(3000); // ...

  4. vue实现动画和css3动画属性

    一.vue动画实现原理: 动画的实现,必须通过元素的显示隐藏或销毁创建.v-show  v-if vue中如果需要使用动画的时候,需要使用一个内置组件transition组件 该组件有一个name属性 ...

  5. css3 动画 vs js 动画

    之前被问到过,css3 动画与 js 动画孰优孰劣,脑袋的第一反应就是性能上肯定 css3 动画会好很多,但别人说不对,我就在想,不对?难道还有别的原因吗?答案是肯定的.先来看看二者实现动画的原理吧. ...

  6. 高性能 CSS3 动画

    注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览.请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ...

  7. CSS3动画(性能篇)

    写在前面 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量.功耗与流畅度. 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额 ...

  8. css3动画animate

    CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. @keyframes 定义动画关键帧: @keyframes anima ...

  9. css3动画性能优化--针对移动端卡顿问题

    一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...

随机推荐

  1. C/C++编程笔记:C语言贪吃蛇源代码控制台(二),分数和食物!

    接上文<C/C++编程笔记:C语言贪吃蛇源代码控制台(一),会动的那种哦!>如果你在学习C语言开发贪吃蛇的话,零基础建议从上一篇开始哦!接下来正式开始吧! 三.蛇的运动 上次我已经教大家画 ...

  2. 5.20 省选模拟赛 求和 组合数的性质 EGF CRT

    LINK:求和 绝妙的一道题目.没做绝对亏了. 对于第一个subtask 考虑直接递推出组合数. 对于第二个subtask 考虑EGF 设两个EGF 都只含偶数项指标且系数为1的那种 一个到n一个到m ...

  3. CF R638 div2 F Phoenix and Memory 贪心 线段树 构造 Hall定理

    LINK:Phoenix and Memory 这场比赛标题好评 都是以凤凰这个单词开头的 有凤来仪吧. 其实和Hall定理关系不大. 不过这个定理有的时候会由于 先简述一下. 对于一张二分图 左边集 ...

  4. 4.15 省选模拟赛 编码 trie树 前缀和优化建图 2-sat

    好题 np. 对于20分 显然可以爆搜. 对于50分 可以发现每个字符串上的问号要么是0,要么是1.考虑枚举一个字符串当前是0还是1 这会和其他字符串产生矛盾. 所以容易 发现这是一个2-sat问题. ...

  5. 提交项目到码云上git的使用

    git clone .. cd 到项目目录 git branch   查看当前的所有分支 git branch shanshan    创建一个属于自己的分支 git checkout shansha ...

  6. TF签名 外部测试 内部测试 TestFlight

    1.将release包传到iTunes connect 2. 绿线是内部测试 A.需要添加测试员 B.最多25个测试员 C.提交到iTunes connect不需要等待审核,即可测试 红线是外部测试( ...

  7. C语言学习笔记之数据类型转换

    1.整数与整数相除,结果也为整数 2.不同类型的运算,精度低的向精度高的转化 整数与浮点数运算就是个很好的例子,只要有一方为浮点数,结果也是浮点数,这也体现出精度低向精度高转化 3.在赋值运算中,等号 ...

  8. 内存总是不够?HBase&GeoMesa配置优化了解一下

    概况: 生产环境HBase集群内存经常处于高位(90%),而且GC之后也是内存依然处于高位,经分析内存全部由集群的regionserver进程所持有,,经常重启之后,大概3-4天就会保持在高位.由上述 ...

  9. C#LeetCode刷题-极小化极大

    极小化极大篇 # 题名 刷题 通过率 难度 375 猜数字大小 II   23.4% 中等 464 我能赢吗   25.5% 中等 486 预测赢家   40.4% 中等 843 猜猜这个单词   2 ...

  10. C#LeetCode刷题之#283-移动零(Move Zeroes)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3907 访问. 给定一个数组 nums,编写一个函数将所有 0 移 ...