前端动效讲解与实战

前端动效讲解与实战

绘制的技术落实到页面渲染，往往不出这几种：

1. Canvas
   效率高、性能好、可控性高，只能处理位图，内存占用恒定
   依赖分辨率
   不支持事件处理器
   弱的文本渲染能力
   能够以 .png 或 .jpg 格式保存结果图像
   最适合图像密集型的游戏，其中的许多对象会被频繁重绘
2. Svg
   处理矢量图，不失真
   不依赖分辨率
   dom元素，支持事件处理器，可以增加css属性。
   最适合带有大型渲染区域的应用程序（比如谷歌地图）
   复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
   不适合游戏应用
3. Div
   包括CSS控制的DOM动画、JS控制的DOM动画
   比较适合简单的数量较少的复杂度较低的动画

• SVG
  SVG绘制的是矢量图，缩放不影响显示，所以最适合带有大型渲染区域的应用程序（比如谷歌地图）
  SVG 是一种使用 XML 描述 2D 图形的语言。
  SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
  在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

• Canvas
  Canvas 通过 JavaScript 来绘制 2D 图形。
  Canvas 是逐像素进行渲染的。
  在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
  Canvas只占用一个DOM节点，在做一些烟花、飘雪等运动元素很多的动画时，会比CSS/SVG性能好。
  性能比较

一般情况下，随着屏幕大小的增大，canvas将开始降级，因为需要绘制更多的像素。
随着屏幕上的对象数目增多，SVG 将开始降级，因为我们正不断将这些对象添加到 DOM 中。
这些度量不一定准确，以下方面的不同一定会引起变化：实现和平台、是否使用完全硬件加速的图形，以及 JavaScript 引擎的速度。

实现动画的技术

1. 补间动画 / 逐帧动画
   CSS实现：transition属性、animation属性+@keyframe
   JS+css：JS利用 window.requestAnimationFrame 等方式 操作CSS属性达到效果，比如雪碧图变化background-position等
   JS+canvas：JS利用 window.requestAnimationFrame 等方式 在画布上绘画，参考 动画实现点赞、红包雨特效

2. SVG动画
   可以用AI等SVG编辑工具生成SVG图片后，配合anime.js、GSAP等现有库进行动画制作。
   D3.JS，直接css属性控制等。

3. 骨骼动画
   一般采用Spine、DragonBones等工具导出相应资源图片和JSON动画配置资源后使用。

4. 3D动画
   DOM操作用CSS 3D实现。（perspective属性、css3d-engine）
   场景搭建用webGL(Three.js等)
   3D模型动画用Blender或maya等制作完成后导出使用

实践-动画实现点赞、红包雨特效

利用canvas优化、实现css动画。
canvas+vue实现60帧FPS的抢金币动画（类天猫红包雨）

5月份的时候看到了利用canvas优化点赞动画的文章，然后这个月又刚好看到了利用canvas实现红包雨动画+简单交互的文章，仔细看完之后发现两者的实现方式基本相同，于是整理出一篇类型放在这里。
做了一个简单的demo

大概而言，分以下几步

1. 初始化canvas元素。this.ctx=cavas.getContext('2d')
2. 初始化 点赞/红包/金币 元素对象数组，对象大概如下：

   const imgArr = [{
    imgDom: new Image(),// 可以随机分配img src ，
    x,
    y,
    speed, // 金币下落速度
    radius, // 半径范围，用于点击事件判断
    duration, // 点赞动画中根据上扬进度存在0-0.2 ，0.8-1阶段的淡入淡出效果，需要记录生存时间以及开始创建时间
    create_time
   },// ...]
   

3. 开始画画 清空画布、绘制画布，不断循环。

   moveCoins() {
    // 清空canvas
    this.ctx.clearRect(0, 0, this.innerWidth, this.innerHeight);
    // 绘制新的一帧动画
    this.drawCoins();
    // 不断执行绘制，形成动画
    this.moveCoinAnimation = window.requestAnimationFrame(this.moveCoins);
   

}

4. 及时删除消失于画布上的元素，防止内存泄漏
 一个比较取巧的方式就是设定几秒后定期清理ImgArr。