前端常用的动画实现方式有以下种:
- css3的
transition
属性 - css3的
animation
属性 - 原生JS动画
- 使用
canvas
绘制动画
1.css3的transition
transition:1s;
等价于 transition: all 1s ease 0;
其中timing-function
的值有如下:
值 | 描述 |
---|---|
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-property: width, height, background-color, border-width;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 500ms;
transform 转变动画
包含四个常用的功能:
- translate:位移
- scale:缩放
- rotate:旋转
- skew:倾斜
一般配合transition
过度使用
transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
3.css3的animation
animation
属性与transition
属性的区别:
transition
只需指定动画的开始和结束状态,整个动画的过程是由特定的函数控制,你不用管它。animation
可以对动画过程中的各个关键帧进行设置
transition(过度) | 用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同 |
---|---|
transform(变形) | 用于元素进行旋转、缩放、移动或倾斜,和设置样式的动画并没有什么关系,就相当于color一样用来设置元素的“外表” |
translate(移动) | 只是transform的一个属性值,即移动 |
animation(动画) | 用于设置动画属性,他是一个简写的属性,包含6个属性 |
3. 原生JS
动画
4. 使用canvas
绘制动画
总结:
- 代码复杂度方面简单动画:
css
代码实现会简单一些,js
复杂一些。 复杂动画的话:css
代码就会变得冗长,js
实现起来更优。 - 动画运行时,对动画的控制程度上
js
比较灵活,能控制动画暂停,取消,终止等css
动画不能添加事件,只能设置固定节点进行什么样的过渡动画。 - 兼容方面
css
有浏览器兼容问题js
大多情况下是没有的。 - 性能方面
css
动画相对于优一些,css
动画通过GUI
解析js
动画需要经过js
引擎代码解析,然后再进行GUI
解析渲染。
CSS动画和JS实现的动画分别有哪些优缺点?
CSS动画
优点
- 浏览器可以对动画进行优化
- 代码相对简单,性能调优方向固定
- 对于帧速表现不好的低版本浏览器,
CSS3
可以做到自然降级,而JS
则需要撰写额外代码
缺点
- 运行过程控制较弱,无法附加事件绑定回调函数
- 代码冗长,想用
CSS
实现稍微复杂一点动画,最后CSS
代码都会变得非常笨重
JS动画
优点
- 控制能力很强, 可以在动画播放过程中对动画进行控制:开始、暂停、回放、终止、取消都是可以做到的。
- 动画效果比
css3
动画丰富,有些动画效果,比如曲线运动,冲击闪烁,视差滚动效果,只有js
动画才能完成 CSS3
有兼容性问题,而JS
大多时候没有兼容性问题
缺点
- 代码的复杂度高于
CSS
动画 JavaScript
在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript
脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞,从而造成丢帧的情况