js动画和css3动画的区别
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动画的区别的更多相关文章
- 使用jquery封装的动画脚本(无动画、css3动画、js动画)
自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlid ...
- 关于JS动画和CSS3动画的性能差异
本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...
- JS动画与CSS3动画
Js动画 show / hide var div = $('#test-show-hide'); div.show('slow'); // 在0.6秒钟内逐渐显示 div.hide(3000); // ...
- vue实现动画和css3动画属性
一.vue动画实现原理: 动画的实现,必须通过元素的显示隐藏或销毁创建.v-show v-if vue中如果需要使用动画的时候,需要使用一个内置组件transition组件 该组件有一个name属性 ...
- css3 动画 vs js 动画
之前被问到过,css3 动画与 js 动画孰优孰劣,脑袋的第一反应就是性能上肯定 css3 动画会好很多,但别人说不对,我就在想,不对?难道还有别的原因吗?答案是肯定的.先来看看二者实现动画的原理吧. ...
- 高性能 CSS3 动画
注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览.请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ...
- CSS3动画(性能篇)
写在前面 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量.功耗与流畅度. 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额 ...
- css3动画animate
CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. @keyframes 定义动画关键帧: @keyframes anima ...
- css3动画性能优化--针对移动端卡顿问题
一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...
随机推荐
- C/C++编程笔记:C语言贪吃蛇源代码控制台(二),分数和食物!
接上文<C/C++编程笔记:C语言贪吃蛇源代码控制台(一),会动的那种哦!>如果你在学习C语言开发贪吃蛇的话,零基础建议从上一篇开始哦!接下来正式开始吧! 三.蛇的运动 上次我已经教大家画 ...
- 5.20 省选模拟赛 求和 组合数的性质 EGF CRT
LINK:求和 绝妙的一道题目.没做绝对亏了. 对于第一个subtask 考虑直接递推出组合数. 对于第二个subtask 考虑EGF 设两个EGF 都只含偶数项指标且系数为1的那种 一个到n一个到m ...
- CF R638 div2 F Phoenix and Memory 贪心 线段树 构造 Hall定理
LINK:Phoenix and Memory 这场比赛标题好评 都是以凤凰这个单词开头的 有凤来仪吧. 其实和Hall定理关系不大. 不过这个定理有的时候会由于 先简述一下. 对于一张二分图 左边集 ...
- 4.15 省选模拟赛 编码 trie树 前缀和优化建图 2-sat
好题 np. 对于20分 显然可以爆搜. 对于50分 可以发现每个字符串上的问号要么是0,要么是1.考虑枚举一个字符串当前是0还是1 这会和其他字符串产生矛盾. 所以容易 发现这是一个2-sat问题. ...
- 提交项目到码云上git的使用
git clone .. cd 到项目目录 git branch 查看当前的所有分支 git branch shanshan 创建一个属于自己的分支 git checkout shansha ...
- TF签名 外部测试 内部测试 TestFlight
1.将release包传到iTunes connect 2. 绿线是内部测试 A.需要添加测试员 B.最多25个测试员 C.提交到iTunes connect不需要等待审核,即可测试 红线是外部测试( ...
- C语言学习笔记之数据类型转换
1.整数与整数相除,结果也为整数 2.不同类型的运算,精度低的向精度高的转化 整数与浮点数运算就是个很好的例子,只要有一方为浮点数,结果也是浮点数,这也体现出精度低向精度高转化 3.在赋值运算中,等号 ...
- 内存总是不够?HBase&GeoMesa配置优化了解一下
概况: 生产环境HBase集群内存经常处于高位(90%),而且GC之后也是内存依然处于高位,经分析内存全部由集群的regionserver进程所持有,,经常重启之后,大概3-4天就会保持在高位.由上述 ...
- C#LeetCode刷题-极小化极大
极小化极大篇 # 题名 刷题 通过率 难度 375 猜数字大小 II 23.4% 中等 464 我能赢吗 25.5% 中等 486 预测赢家 40.4% 中等 843 猜猜这个单词 2 ...
- C#LeetCode刷题之#283-移动零(Move Zeroes)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3907 访问. 给定一个数组 nums,编写一个函数将所有 0 移 ...