动画的基本原理什么是动画动画是通过快速连续地排列彼此之间差异极小的连续图像，创造运动错觉和变化错觉的过程。———维基百科前端动画常用技术：Sprite动画、CSS动画、JS动画、SVG动画、WebGL动画动画按应用分类：UI动画、基于WebGL的游戏动画、动画数据可视化计算机动画原理计算机图形学：计算机视觉基础，涵盖点、线、面、体、场的数学构造方法几何图形数据的输入、存储和压缩描述纹理、曲线、光影等的算法对象图形（图形）的数据输出界面、动画技术）、硬件与图形交互技术图形开发软件相关技术标准计算机动画：计算机图形学的一个分支，主要包括2D和3D动画无论多么简单的动画，总要定义两种基本状态，即开始状态和结束状态。有了这两个状态就可以定义插值状态来填补两者之间的空白帧：连续变化的多张图片，每张都是一个帧帧率：用来衡量一定时间内的帧数，通常测量的单位是FPS（framepersecond）帧率和人眼：一般10到12帧每秒人会认为画面是连贯的，这种现象称为视觉暂留。有些动画，如果低于30FPS，会有明显卡顿的感觉。目前主流的画面和显示器输出都是60FPS，效果明显流畅。完成留白有两种方式：补间动画（关键帧）和逐帧动画前端动画分类CSS动画CSS动画是CSS动画动画的常见实现方式是animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state属性animation-name属性的简写属性形式指定应用的一系列动画，每个名称表示由@keyframesanimation-duration属性定义的动画序列指定一个动画周期的持续时间CSS实现补间动画(TransitionAPI,Keyframe)TransitionAPI(转场动画):当DOM加载完成或类改变时触发关键帧实现动画：相比于transition，keyframe关键帧可以控制动画序列精灵的中间步骤实现CSS逐帧动画CSS动画特点：优点：简单、高效、声明式、不依赖主线程、使用硬件加速（GPU）；浏览器会优化CSS3动画，在性能上有优缺点：动画内容不能动态修改或定义，不同动画不能同步，多个动画不能相互叠加，部分动画不能实现适用场景：简单H5活动/推广页推荐库：动画。JavaScript配合很好，实现SVG动画通常有三种方式：SMIL（SynchronizedMultimediaIntegrationLanguage）、JavaScript和CSS使用JavaScript实现SVG动画的类库包括snap.js、anime.js和HTML原生WebAnimationSVG动画特点：优点：通过矢量元素实现动画，在不同屏幕下可以获得更好的效果清晰度，可以实现一些特殊效果：书写、变形和墨水扩散等。缺点：使用方法比较复杂，过度使用可能会导致性能问题。JavaScript动画JavaScript可以实现复杂的动画，也可以操作画布动画API绘制JavaScript动画特点：优点：使用灵活，相比CSS更容易实现两种以上的状态转换缺点：使用JSruntime时，调优没那么简单和CSS一样，CSS可以用于性能和兼容性较差的浏览器实现优雅降级，而JS需要额外的代码兼容性UI元素如何选择使用更小的独立状态使用CSS当你需要对动画进行大量控制时，使用JavaScript在特定场景下可以使用SVG，可以通过CSS或者JS操作SVG变化实现前端动画JavaScript动画封装函数JavaScript动画要使用requestAnimationFrame内置函数，可以设置回调函数允许当浏览器准备重绘时，浏览器重绘。当页面处于后台并且没有重绘发生时，回调不会运行，动画会被执行。暂停不消耗资源JavaScript实现动画不推荐使用setTimeout和setIntervalJavaScript执行动画的核心思想：$Δr=ΔvΔt$，r为距离，v为速度，t为时间JavaScript动画实现代码：/***参数说明：draw绘图函数easingeasingfunctiondurationduration@returns返回一个Promise对象，因为动画可以是连续的，支持通过then函数或者await顺序调用*/functionanimate({easing,draw,duration}){//动画开始的时间戳//不要用newDate.now()因为performance.now()会匀速增加，精确到微秒级别，不易被篡改letstart=performance。现在（）;returnnewPromise(resolve=>{requestAnimationFrame(functionanimate(time){让timeFraction=(time-start)/duration;如果(timeFraction>1)timeFraction=1;让progress=easing(timeFraction);绘制（进度）；如果(timeFraction<1){requestAnimationFrame(animate);}else{解决（）；}});});}draw绘图函数constball=document.querySelector('.ball');constdraw=(progress)=>{ball.style.transform=`translate(${progress}px,0)`;}easingeasingfunctioneasing(timeFraction){returntimeFraction**2;}相关实践动画资源SVG：Snap.svg-现代SVG图形的JavaScript库，Svg.js-用于操作和动画化SVGJavaScript的轻量级库：GSAP-JavaScript动画库、TweenJs-CreateJS库套件中简单而强大的JavaScript补间/动画库部分Velocity-加速的JavaScript动画CSS：Animate.css-跨浏览器的CSS动画库。使用画布就像一件简单的事情一样简单：EaselJs-是一个用于在HTML5中构建高性能交互式2D内容的库，Fabric.js-具有动画支持的JavaScript画布库，Pixijs-使用2DWebGL渲染器创建的最快和最灵活的精美数字内容动画优化性能视角：页面渲染的一般流程是JS>CSS>ComputeStyle>Layout>Draw>RenderLayerMerge，即JavaScript>Style>Layout>Paint>Composite其中，Layout(重排)和Paint(重绘）是整个环节中最耗时的两个环节，所以我们尽量避免这两个环节。从性能上来说，最理想的渲染管线是没有布局和绘制环节的，只需要做渲染层的合并就足够了（重排一定要重绘，重绘不一定是重排）。在实际应用中，最简单的一点就是不要在触发动画的开始使用display:none属性值，因为这会引起Layout和Paint的链接。这已经是切换类名的好方法了。其他优化方案：translate属性值替换top/left/right/bottomswitchingscale属性值替换width/heightopacity属性替换display/visibilityCSS3硬加速（GPU加速）：使用transform、opacity、filter、will-change属性导致硬加速
