css动画与js动画的区别

CSS动画

优点:
(1)浏览器可以对动画进行优化。
1、 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout,setInterval设置动画的优势主要是:requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。在隐藏或不可见的元素中requestAnimationFrame不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。

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

(2)代码相对简单,性能调优方向固定
  
(3)对于帧速表现不好的低版本浏览器,CSS3可以做到自然降级,而JS则需要撰写额外代码

缺点:
  1、 运行过程控制较弱,无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点,不能在半路反转动画,不能变换时间尺度,不能在特定的位置添加回调函数或是绑定回放事件,无进度报告
  
  2、 代码冗长。想用 CSS 实现稍微复杂一点动画,最后CSS代码都会变得非常笨重。

JS动画

优点:
(1)JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制:开始、暂停、回放、终止、取消都是可以做到的。
  
(2)动画效果比css3动画丰富,有些动画效果,比如曲线运动,冲击闪烁,视差滚动效果,只有JavaScript动画才能完成

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

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

小结:如果动画只是简单的状态切换,不需要中间过程控制,在这种情况下,css动画是优选方案。它可以让你将动画逻辑放在样式文件里面,而不会让你的页面充斥 Javascript 库。然而如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画,这样你的动画可以保持高效,并且你的工作流也更可控。所以,在实现一些小的交互动效的时候,就多考虑考虑CSS动画。对于一些复杂控制的动画,使用javascript比较可靠。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/565264.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

没有bug队——加贝——Python 练习实例 7,8

7.题目: 将一个列表的数据复制到另一个列表中。 程序分析:使用列表[:]。 注:[:] 表示索引全部;[1:]表示从索引1到最后;[:2]表示从第一个索引到索引2前一个 a [1, 2, 3] b1 a[:] b2 a[1:] b3 a[:2] print (b1) …

ios android 字体颜色,iOS-修改导航栏文字字体和颜色

ASP.NET MVC搭建项目后台UI框架—9、服务器端排序ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...一致性hash算法简介与代码实现一.简介: 一致性hash算法提…

云动画文字

用Js技术实现云动画文字。 效果演示 代码展示 html内容 <!doctype html> <html><head><meta charset"utf-8"><title></title><style>body {background-color:#000000;color:#555555; } h4 {font-family:sans-serif;co…

android slidingdrawer 方向,如何使Android SlidingDrawer从左侧滑出?

我找到了一个简单的方法来做到这一点。您所要做的就是为slidingDrawer&#xff0c;内容和句柄设置180的旋转角度。您可以类似地制作一个从顶部下降的SlidingDrawer&#xff0c;就像我做过here一样。看看我的例子&#xff0c;首先从右到左&#xff0c;以便能够看到差异。android…

爬虫之祖urlib 简易教程

目录 一、前言框架 二、网址请求 2.1 打开网址 2.2 超时设置 2.3 错误抓取 三、更深请求 3.1 打开网址 3.2 请求头添加 3.3 链接解析 四、Robots 协议 五.万能视频下载 小彩蛋 一、前言框架 我们来学一下爬虫之祖urlib&#xff0c;不管你什么模块都是起源于该模块。…

【youcans 的 OpenCV 学习课】12. 彩色图像的处理

专栏地址&#xff1a;『youcans 的图像处理学习课』 文章目录&#xff1a;『youcans 的图像处理学习课 - 总目录』 【youcans 的 OpenCV 学习课】12.彩色图像的处理 文章目录【youcans 的 OpenCV 学习课】12.彩色图像的处理1. 图像的颜色空间转换图像的色彩空间基础图像的颜色空…

炫酷线条背景动画

使用H5的Canvas实现网页的炫酷线条背景特效。 效果演示 代码展示 html内容 <!DOCTYPE html> <html > <head> <meta charset"UTF-8"> <title></title><style> canvas{position:absolute;top:0;left:0;background-colo…

MATLAB教程(1) MATLAB 基础知识(3)

第五部分&#xff1a;文本和字符 文本和字符- MATLAB & Simulink- MathWorks 中国 在处理文本时&#xff0c;将其中的字符序列用单引号括起来&#xff0c;可以将文本分配给变量。 例如&#xff1a;myText Hello, world如果文本本身包括一个单引号&#xff0c;则在定义时…

android获取子线程id,Android 开发 知晓各种id信息 获取线程ID、activityID、内核ID

/*** Returns the identifier of this processs user.* 返回此进程的用户的标识符。*/Log.e(TAG,"Process.myUid() " android.os.Process.myTid());/*** Returns the identifier of this process, which can be used with* killProcess and sendSignal.* 返回此进程…

没有bug队——加贝——Python 练习实例 9,10

9.题目&#xff1a; 暂停一秒输出。 程序分析&#xff1a;使用 time 模块的 sleep() 函数。 注&#xff1a;dict.items表示取出字典中的值 代码&#xff1a; #9 import timemyD {1: a, 2: b} for key, value in dict.items(myD):print (key, value)time.sleep(1) # 暂停 …

android存到手机内存,android保存文件到手机内存

首先要指定文件保存的位置&#xff0c;在Java中&#xff0c;我们可以直接使用Filefilenew File(“info.txt”),但是在Android中&#xff0c;使用这个路径文件会被保存到data/app文件夹(应用程序根目录)下&#xff0c;Android是不允许在这里保存文件的。Android保存文件都是保存…

Spring Boot Data JPA

Spring Data JPA简介 用来简化创建 JPA 数据访问层和跨存储的持久层功能。 Spring Data JPA提供的接口 Repository&#xff1a;最顶层的接口&#xff0c;是一个空的接口&#xff0c;目的是为了统一所有Repository的类型&#xff0c;且能让组件扫描的时候自动识别。 CrudRep…

MATLAB教程(1) MATLAB 基础知识(4)

第七部分&#xff1a;二、三维图 二维图和三维图- MATLAB & Simulink- MathWorks 中国 折线图 &#xff08;1&#xff09; 画图 x 0:pi/1000:2*pi; y sin(x); plot(x,y) 这里x就用到了前面说到的索引。x表示0到2*pi之间步长为pi/100的值。 二维图如下&#xff1a; 这里…

现在能不能升级鸿蒙,能不能升级鸿蒙系统?

电梯直达huafen185613402初窥门径发表于 2021-2-28 14:28:33来自&#xff1a;华为Mate 10 Pro最新回复 2021-2-28 17:34:28这个手机现在性能还非常好呀&#xff0c;期待能够给予鸿蒙系统升级产品型号BLA-AL00出现频率总是问题类型其他应用名称Android 系统应用版本10系统版本BL…

Spring Boot MyBatis

MyBatis简介 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache 迁移到了google code&#xff0c;并且改名为MyBatis 。 集成spring boot 的时候必须在mapper接口上面标注Mapper注解 项目图片 pom.xml 只需要在pom.xml引入需要的数据库配置&#xff0c;就会…

【youcans的OpenCV例程300篇】总目录

版权声明&#xff1a; 转载本系列作品时必须标注以下版权内容&#xff1a; 【youcansqq.com, youcans的OpenCV 例程300篇, https://blog.csdn.net/youcans/category_11459626.html】 更新日期&#xff1a;2022-07-09 文章目录1. 图像的基本操作2. 图像的数值运算3. 图像的仿射变…

没有bug队——加贝——Python 练习实例 11,12

11.题目&#xff1a; 古典问题&#xff1a;有一对兔子&#xff0c;从出生后第3个月起每个月都生一对兔子&#xff0c;小兔子长到第三个月后每个月又生一对兔子&#xff0c;假如兔子都不死&#xff0c;问每个月的兔子总数为多少&#xff1f; 程序分析&#xff1a;兔子的规律为…

Spring Boot JDBC

JDBC详解 Java Data Base Connectivity,是一种用于执行SQL语句的Java API&#xff0c;可以为多种关系数据库提供统一访问&#xff0c;它由一组用Java语言编写的类和接口组成。不管是Hibernate&#xff0c;还是JPA或者MyBatis都是对JDBC做了一次封装。 Spring简化了JDBC那些内…

没有bug队——加贝——Python 练习实例 13,14

今天水一天&#xff0c;看了看这两道题&#xff0c;感觉没啥好注意的了&#xff0c;或许是我归被窝的心似箭吧&#xff0c;哈哈哈哈&#xff0c;如果我想起了有补充的&#xff0c;我再出被窝。。。 13.题目&#xff1a; 打印出所有的"水仙花数"&#xff0c;所谓&qu…

target html语言,html中a标签的target属性

&lbrack;修复Win8&period;1 BUG&rsqb; 解决Win8&period;1英文字体发虚不渲染问题Win8.1更新了宋体字体,中文字体显示漂亮了,但英文字体发虚不渲染,尤其是小号的英文和数字字体,看下图. 1.下载Win8的宋体2.打开字体文件点击安装3.导入注册表文件4.重启Win8.1 下…