前端动画
1.动画的基本原理
什么是动画
动画是通过连续快速排列彼此差异极小的连续图像来知道运动错觉和变化错觉的过程。
动画的历史
早在五千年前就有了动画,在伊朗就有五张山羊走向一棵树,吃树叶的照片
最早由GIF动画,Flash动画,现在主要是CSS动画
现在动画技术已经普及,常见的动画技术就有 Sprite动画,CSS动画,JS动画,SVG动画WebGL动画,按应用场景分为 UI动画,基于Web的游戏动画和动画数据可视化
动画的原理
任何动画都需要开始状态和结束状态,中间的就是插值状态
帧:连续变换的多个画面
帧率:用来度量一定时间段的帧数(FPS)
补全空白的方式:逐帧动画,补间动画
前端动画分类
CSS动画
animation 所有动画属性的简写形式。
animation-name 指定应用的一系列动画 @keyframes 动画的名称,代表定义的动画序列br>
animation-duration 规定动画完成一个周期的时长(秒,毫秒)。默认是0s,表示无动画。多值定义的话与-name一一对应
animation-timing-function 规定动画执行周期的执行节奏。
animation-delay 动画延时多少秒执行。
animation-iteration-count 动画在结束前运行的次数。可以用infinite表示无限循环。
animation-direction 动画是否反向播放。
animation-fill-mode 动画执行前和之后要如何应用其目标
animation-play-state 设置动画是否运行或暂停。
可以用Transform制作补间动画,Transform只能转换盒模型定位的元素:
Translate表示移动,scale表示缩放,rotate表示旋转,skew表示倾斜
还可以使用keyframe制作动画,就是使用关键帧来控制动画。
还可以使用CSS的sprite来制作动画。
SVG动画
svg是基于XML的矢量图形描述语言,它可以与CSS和JS较好的配合,实现svg动画通常有3种方式SMIL,JS,CSS
SMIL:同步多媒体集成语言,和animation动画类似,但是兼容性不是很好,不常用。
JS:有很多JS来操作SVG的动画,如 Snap.svg 以及 anime.js,还有原生的 Web Animation来实现
可以看成是操作画笔来绘画,利用 stroke-dashoffset 和 stroke-dasharray 来配合。
stroke-dasharray 可以控制描边的点的图案范式
stroke-dashoffset 指定了dash模式到路径开始的距离
JS动画
JS可以实现复杂的动画，也可以操作canvas动画API上进行绘制。
如何做选择
当您为UI元素采用较小的独立状态时,使用 CSS
在需要对动画进行大量控制时,使用 JavaScript
在特定的场景下可以使用SVG,可以使用 CSS 或 JS 去操作 SVG 变化。
相关实践
动画代码示例网站
codepen.com
codesandbox.com
设计网站
dribbble.com
动画制作工具
svg
Snap.svg - 现代SVG图形的JavaScript库。
Svg.js - 用于操作和动画SVG的轻量级库。
js
GSAP - JavaScript动画库。
TweenJs - 一个简单但功能强大的JavaScript补间/动画库。CreateJS库套件的一部分。
Velocity - 加速的JavaScript动画。
css
Animate.css - CSS动画的跨浏览器库。像一件简单的事情一样容易使用。
canvas
EaselJs - EaselJS是一个用于在HTML5中构建高性能交互式2D内容的库
Fabric.js - 支持动画的JavaScript画布库。
Paper.js - 矢量图形脚本的瑞士军刀 - Scriptographer使用HTML5Canvas移植到JavaScript和浏览器。
Pixijs - 使用最快、最灵活的2D WebGL渲染器创建精美的数字内容。
性能和优化
页面渲染的过程为 JS->CSS->计算样式->布局->绘制->渲染层合
其中Layout(重拍)和Paint(重绘)是最耗时的两环,所以我们可以尽量避免这两个环节。
可以查看 csstriggers.com 来看那些CSS属性可以避免这两个环节
性能
在实际的应用里，最为简单的一个注意点就是，触发动画的开始不要用display: none属性值，因为它会引起Layout、Paint环节，通过切换类名就已经是一种很好的办法。
translate属性值来替换top/left/right/bottom的切换,scale属性值替换width/height，opacity属性替换display/visibility等等。
CSS3硬件加速又叫做GPU 加速，是利用GPU进行渲染，减少CPU操作的一种优化方案。由于GPU中的transform等CSS属性不会触发repaint，所以能大大提高网页的性能。
CSS中的以下几个属性能触发硬件加速∶
transform
opacity
filter
Will-change
如果有一些元素不需要用到上述属性，但是需要触发硬件加速效果，可以使用一些小技巧来诱导浏览器开启硬件加速。
其他
算法优化
线性函数代替真实计算
几何模型优化
碰撞检测优化
内存/缓存优化
离屏绘制
