JS动画和CSS动画

一. JS动画和css动画区别。

CSS实现动画：animation transition transform

JS实现动画：setInterval setTimeout requestAnimationFrame

JS动画：

优点：

1. 过程控制，可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。

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

3. CSS3有兼容性问题，而JS大多时候没有兼容性问题。

缺点：

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

2. 代码的复杂度高于CSS动画。

CSS动画：

优点（浏览器可以对动画进行优化）：

1. 集中所有dom，一次重绘重排，刷新频率和浏览器刷新频率相同。

2. 代码简单，方便调试

3. 不可见元素不参与重排，节约CPU

4. 可以使用硬件加速（通过 GPU 来提高动画性能）。

缺点：

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

2. 代码冗长。

CSS动画流畅的原因

渲染线程分为main thread(主线程)和compositor thread(合成器线程)。

如果CSS动画只是改变transform和opacity，这时整个CSS动画得以在compositor thread完成（而JS动画则会在main thread执行，然后触发compositor进行下一步操作），所以，当在JS执行一些昂贵的任务时，main thread繁忙，CSS动画由于使用了compositor thread可以保持流畅。

在主线程中，维护了一棵Layer树（LayerTreeHost），管理了TiledLayer，

在compositor thread，维护了同样一颗LayerTreeHostImpl，管理了LayerImpl，

这两棵树的内容是拷贝关系。因此可以彼此不干扰，当Javascript在main thread操作LayerTreeHost的同时，compositor thread可以用LayerTreeHostImpl做渲染。当Javascript繁忙导致主线程卡住时，合成到屏幕的过程也是流畅的。

鼠标键盘消息会被首先分发到compositor thread，然后再到main thread。这样，当main thread繁忙时，compositor thread还是能够响应一部分消息。

例如，鼠标滚动时，假如main thread繁忙，compositor thread也会处理滚动消息，滚动已经被提交的页面部分（未被提交的部分将被刷白）。

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

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

二. animation transition transform介绍

1. transform (变形)

属性：

rotate 旋转：transform:rotate(-45deg)，值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。

skew 扭曲、倾斜：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）。同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点位置。如：transform:skew(30deg,10deg):

scale 缩放：scale(x,y)也就是X轴和Y轴同时缩放；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。

其基点一样是在元素的中心位置，我们同样是通过transform-origin来改变元素的基点。

translate 移动：transform:translate(1px,2px). 使用其他单位：em,%也是可以的。

移动translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）。其基点是元素中心点，也可以根据transform-origin改变基点位置。

transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom。其中 left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一个值，表示垂直方向值不变。

transform在不同浏览器内核下的书写规则

  //Mozilla内核浏览器：firefox3.5+
  -moz-transform: rotate | scale | skew | translate ;
 //Webkit内核浏览器：Safari and Chrome
  -webkit-transform: rotate | scale | skew | translate ;
 //Opera
  -o-transform: rotate | scale | skew | translate ;
 //IE9
  -ms-transform: rotate | scale | skew | translate ;
 //W3C标准
  transform: rotate | scale | skew | translate ;

2. transition

transition可以实现动态效果，实际上是一定时间之内，一组css属性变换到另一组属性的动画展示过程。

4个属性：

（1）. 要以动画展示哪些属性（transition-property）none 没有属性改变；all所有属性改变；indent元素属性名；

（2）. 动画过程有多久(transition--duration),默认变换是即时的。

（3）. 控制动画速度变化（transition-timing-function）

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（该值允许你去自定义一个时间曲线），特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.

（4）. 动画是否延迟执行（transition-delay）

transition速记法：transition: <property> <duration> <animation type> <delay>

3. animation

transition只能从一组css属性变成另一组css属性。animation则可以在多组属性之间变换。transition必须使用触发器触发，animation可以使用触发器，也可以在页面加载完成的时候自动触发。

CSS3中的Animation与html5中的Canvas绘制动画又不同，Animation只应用在页面上已存在的DOM元素上，而且他跟Flash和JavaScript以及jquery制作出来的动画效果又不一样，因为我们使用CSS3的Animation制作动画我们可以省去复杂的js,jquery代码，只是有一点不足之处，我们运用Animation能创建自己想要的一些动画效果，但是有点粗糙，如果想要制作比较好的动画，我见意大家还是使用flash或js等。

"Keyframes",我们把他叫做“关键帧”，我们在使用transition制作一个简单的transition效果时，我们包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作（换到flash中说，就是第一帧我要执行什么动作，第二帧我要执行什么动作），这样我们用Transition就很难实现了，此时我们也需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。

@-webkit-keyframes ‘wobble‘ {
     0% {
        margin-left: 100px;
        background: green;
     }
     40% {
        margin-left: 150px;
        background: orange;
     }
     60% {
        margin-left: 75px;
        background: blue;
     }
     100% {
        margin-left: 100px;
        background: red;
     }
  }

wobble动画在0%时元素定位到left为100px的位置背景色为green，然后40%时元素过渡到left为150px的位置并且背景色为orange，60%时元素过渡到left为75px的位置,背景色为blue，最后100%结束动画的位置元素又回到起点left为100px处,背景色变成red。

CSS3的animation类似于transition属性，他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点，css3的animation就需要明确的动画属性值，这也就是回到我们上面所说的，我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间段变化的效果。下面我们来看看怎么给一个元素调用animation属性

.demo1 {
     width: 50px;
     height: 50px;
     margin-left: 100px;
     background: blue;
     -webkit-animation-name:‘wobble‘;/*动画属性名，也就是我们前面keyframes定义的动画名*/
     -webkit-animation-duration: 10s;/*动画持续时间*/
     -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
     -webkit-animation-delay: 2s;/*动画延迟时间*/
     -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/
     -webkit-animation-direction: alternate;/*定义动画方式*/
}

animation属性：

(1) animation-name创建一个动画名称：

none为默认值，当值为none时，将没有任何动画效果。
IDENT是由Keyframes创建的动画名，换句话说此处的IDENT要和Keyframes中的IDENT一致，如果不一致,将不能实现任何动画效果

(2) animation-duration:

(3) animation-timing-function;

(4) animation-delay;

(5) animation-iteration-count: 是用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。

(6) animation-direction:

默认值为normal: 动画的每次循环都是向前播放；
alternate，动画播放在第偶数次向前播放，第奇数次向反方向播放。

(7) animation-play-state：是用来控制元素动画的播放状态。

running为默认值：
paused将正在播放的动画停下

(8) animation-fill-mode:告诉浏览器将元素的格式保持为动画结束时候的样子。

链接: https://www.fly63.com/article/detial/3187