为什么要用css动画替换js动画?小白知识_动画入门指南

导致JavaScript效率低的两大原因:操作DOM和使用页面动画。通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时,浏览器会不停的执行重排和重绘,在PC版本的浏览器中,因为浏览器可用的内存比较大,用户肉眼几乎看不见页面动画产生的repaint和reflow,所以工程师几乎无需过

为什么要用css动画替换js动画?小白知识

导致JavaScript效率低的两大原因:操作DOM和使用页面动画。

为什么要用css动画替换js动画?小白知识_动画入门指南

通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时,浏览器会不停的执行重排和重绘,在PC版本的浏览器中,因为浏览器可用的内存比较大,用户肉眼几乎看不见页面动画产生的repaint和reflow,所以工程师几乎无需过多的考虑动画带来的性能问题,但在移动设备上可大有不同,移动设备分配给内置浏览器的内存可没有PC版本的浏览器内存可观,目前对CSS3支持最好的莫过于webkit浏览器了,在webkit内核的浏览器,一是safari其次是chrome.  

用CSS3动画替代JS模拟动画的好处:

  • 不占用JS主线程;
  • 可以利用硬件加速;
  • 浏览器可对动画做优化(元素不可见时不动画减少对FPS影响)

CSS3动画提供了2D和3D以及常规动画属性接口,它可以工作在页面的任何一个元素的任意一个属性,CSS3的动画是利用C语言编写的,它是系统层面的动画。

采用js动画还是css3动画,需要开发者根据不同的需求做出不同的抉择,但应该遵循一个基本的原则是:如果你需要做2D动画,请勿必使用CSS3的transition或animation

CSS3动画与javascript模拟动画有以下区别:

  1. CSS 3D动画在js中无法实现
    CSS3的3D动画是CSS3中非常强大的功能,因为它的工作原理是在一个三维的空间里,因此js是无法模拟出像CSS3那样的3D动画

  2. CSS 2D矩阵动画效率高于js利用margin和left,top模拟的矩阵动画
    CSS3的2D动画是指是2D矩阵Transform变化,js当然是不能做变形动画的。就拿坐标动画来说,使用CSS3的transform做translateXY动画比js中的position left,position right快了近700mm!而且视觉上也比js动画流畅很多。

  3. CSS3其它常规动画属性的效率均低于js模拟的动画
    常规动画属性在这里是指:height,width,opacity,border-width,color

css3的属性

2D 转换
CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。
transform属性,适用于2D或3D转换的元素
transform-origin属性,设置转化元素位置

1.translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。 

div {
  transform: translate(50px,100px);
  -webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

2.rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

div {
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg); /* Safari and Chrome */
}

3.scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数

div {
    -webkit-transform: scale(2,3); /* Safari /
    transform: scale(2,3); / 标准语法 */
}

4.skew( [,])包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。

div {
    transform: skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg); /* IE 9 /
    -webkit-transform: skew(30deg,20deg); / Safari and Chrome */
}

 

3D 转换

translate3d(x,y,z)    定义 3D 转化。
translateX(x)    定义 3D 转化,仅使用用于 X 轴的值。
translateY(y)    定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z)    定义 3D 转化,仅使用用于 Z 轴的值。

scale3d(x,y,z)    定义 3D 缩放转换。
scaleX(x)    定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y)    定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z)    定义 3D 缩放转换,通过给定一个 Z 轴的值。

rotate3d(x,y,z,angle)    定义 3D 旋转。
rotateX(angle)    定义沿 X 轴的 3D 旋转。
rotateY(angle)    定义沿 Y 轴的 3D 旋转。
rotateZ(angle)    定义沿 Z 轴的 3D 旋转。

perspective(n)    定义 3D 转换元素的透视视图。

 

CSS3 过渡

transition    简写属性,用于在一个属性中设置四个过渡属性。
transition-property    规定应用过渡的 CSS 属性的名称。
transition-duration    定义过渡效果花费的时间。默认是 0。transition-duration: 5s;
transition-timing-function    规定过渡效果的时间曲线。默认是 "ease"。
    linear    规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
    ease    规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
    ease-in    规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
    ease-out    规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
    ease-in-out    规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
    cubic-bezier(n,n,n,n)  在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay  规定过渡效果何时开始。默认是 0。transition-delay: 2s;

CSS3 动画 

@keyframes    规定动画。    
animation    所有动画属性的简写属性,除了 animation-play-state 属性。    
animation-name    规定 @keyframes 动画的名称。    
animation-duration    规定动画完成一个周期所花费的秒或毫秒。默认是 0。    
animation-timing-function    规定动画的速度曲线。默认是 "ease"。    
animation-fill-mode    规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。    
animation-delay      规定动画何时开始。默认是 0。    
animation-iteration-count    规定动画被播放的次数。默认是 1。
animation-direction    规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state    规定动画是否正在运行或暂停。默认是 "running"。

海计划公众号
(0)
上一篇 2020/03/24 05:38
下一篇 2020/03/24 05:38

您可能感兴趣的内容

  • Js中的位运算和权限设计小白基础_位运算使用说明

    1. 内容概要本文主要讨论以下两个问题:JavaScript 的位运算:先简单回顾下位运算,平时用的少,相信不少人和我一样忘的差不多了权限设计:根据位运算的特点,设计一个权限系统(添加、删除、判断等)2. JavaScript 位运算2.1. Number在讲位运算之前,首先简单看下 JavaScript 中的 Number,下文需要用到。在 JavaScr

    2020/03/22
  • Linux下4种禁用Root登陆的方法,你掌握了哪几种呢?小白帮助_root基础入门

    我们都知道 Linux 下 Root 用户的权限是最大的,因此一般不推荐直接使用 Root 用户操作。通常都是使用普通用户,在必要时通过 Sudo 命令来提权。在 Ubuntu 中,更是直接把 Root 用户直接禁用了。那么如何在 Linux 中禁止Root 登陆呢?今天,我们就来介绍几种常用的方法。1. 修改 Root 用户的登陆 Shell我们可以通过编

    2020/03/23
  • gifify小白入门_将任何视频文件转换成一个优化的GIF动画

    gifify小白入门 GitHub:https://github.com/vvo/gifify 简介描述:将任何视频文件转换成一个优化的GIF动画 gifify 一款将视频转换成 …

    2020/03/06
  • IPv6特点;IPv6与IPv4共存技术小白入门_协议基础入门

    实践证明IPv4是一个非常成功的协议,它本身也经受住了Internet从数目很少的计算机发展到目前上亿台计算机互联的考验。但该协议是几十年前基于当时的网络规模而设计的。在今天看来,IPv4的设计者们对于Internet的估计和预想显得很不充分。随着Internet的扩张和新应用的不断推出,IPv4越来越显示出它的局限性。Internet规模的快速扩大是当时完

    2020/03/29
  • 一种新型的Web缓存欺骗攻击技术入门知识_攻击入门百科

    为了减少WEB响应时延并减小WEB服务器负担,现在WEB缓存技术已经用的非常普遍了,除了专门的CDN,负载均衡以及反向代理现在也会缓存一部分的网页内容。这里我要介绍一种WEB缓存欺骗攻击技术,这种攻击技术针对Paypal有成功的攻击案例。背景原理先简单介绍一下WEB缓存技术,它主要是缓存一些静态的,公开的文件,如CSS文件,JS文件,图片等。缓存分两类,一类

    2020/04/03
  • Js如何从字符串中提取数字?使用教程_数字使用说明

    如果想要将一个字符串中的数字给提取出来,这要怎么做? 在JavaScript中可以使用match()方法将字符串中的数字提取到数字数组中。此方法将正则表达式作为参数,并从字符串中提取数字。使用match()方法提取数字分两种情况:1、不考虑小数此时可以使用正则表达式(/\d+/g)来从字符串中提取数字。示例:var str = ‘123sdf

    2020/03/20
  • 前端静态资源自动化处理版本号防缓存基础知识入门_缓存使用教程

    浏览器会默认缓存网站的静态资源文件,如:js文件、css文件、图片等。缓存带来网站性能提升的同时也带来了一些困扰,最常见的问题就是不能及时更新静态资源,造成新版本发布时用户无法及时看到新版本的变化,严重影响了用户体验。上述问题,最简单的办法就是在资源的请求路径上添加版本号,格式如下:url?v=1.0.0每次在更改资源的时候,手动修改版本号,但是每次手动改那

    2020/03/31
  • Web服务常用的几种开发方法使用攻略_web指南教程

    1.概述Web服务,即通过程序实现网页服务,服务启动后,一般用户可通过访问URL获取到网站提供的网页服务,如网页浏览、留言、商品购买等。开发Web服务的技术有很多,有Java、Python、ASP.NET、脚本语言等,其中常用的脚本语言有ASP、ASPX、JSP、PHP。下面对这些Web服务开发技术作一个简单介绍。开发技术推出年代文件后缀发展趋势Java19

    2020/03/20
  • es6异步解决方案小白指南_异步使用教程

    es6异步解决方案小白指南 最初使用回调函数 ​ 由于最初j s官方没有明确的规范,各种第三方库中封装的异步函数中传的回调函数中的参数没有明确的规范, 没有明确各个参数的意义, 不…

    2020/03/20
  • FEX菜鸟指南百度Web前端研发部出品

    FEX基础入门 官方网址:http://fex.baidu.com/ 简介描述:百度Web前端研发部出品

    2020/03/05
  • ProcessOn基础知识_免费在线作图,实时协作

    ProcessOn基础知识 官方网址:https://www.processon.com/ 简介描述:免费在线作图,实时协作 ProcessOn支持流程图、思维导图、原型图、UML…

    2020/03/06
  • 百度H5新手入门_百度推出的移动H5在线制作平台

    百度H5基础教程 官方网址:https://h5.bce.baidu.com/ 简介描述:百度推出的移动H5在线制作平台 是一个在线H5制作平台,依托百度云强大架构,提供稳定的 H…

    2020/03/06
  • Angular有哪些特点?教程视频_特点指南攻略

    Angular是一个开源框架,一个互联网应用程序框架,一个强大的前端框架,用于开发动态Web应用程序。那么Angular有哪些特点?Angular的特点1、数据的双向绑定这可能是其最激动人心的特性吧,view层的数据和model层的数据是双向绑定的,其中之一发生更改,另一方会随之变化,这不用你写任何代码!2、代码模块化,每个模块的代码独立拥有自己的作用域,m

    2020/03/20
  • CSS 标签的分类,及显示模式菜鸟教程网_标签菜鸟教程网

    标签的类型(显示模式) HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。一、块级元素(block-level)每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。常见的块元素有

    ~

    、、

      1. 等,其中 标签是最典型
    2020/03/29
  • NodeJS如何充分利用多核CPU的资源使用指南_资源小白指南

    介绍单个 Node.js 程序的实例仅在一个线程上运行,因此无法充分利用 CPU 的多核系统。有时你可能需要启动 Node.js 进程集群来利用本地计算机或生产服务器上的每个 CPU 内核。在处理 API 或基于 ExpressJS 的HTTP服务器时,这个问题尤其重要。幸运的是,Node.js 有一个名为 Cluster 的核心模块,它能够帮助我们在 CP

    2020/03/24
  • 深入研究Js全局变量基础知识_变量基础入门

    本文的内容比较硬核,我们一起来看下 JavaScript 全局变量的底层机制到底是怎样的。文章会涉及脚本作用域、全局对象等概念。作用域变量的 词法作用域 (简称 作用域 )是程序中可以访问它的区域。JavaScript 的作用域是静态的(在运行时不会改变),并可以嵌套——例如:function func() { // (A)const aVariable =

    2020/03/23