【白话前端】扫盲贴：Svg动画和Canvas动画区别

SVG动画和Canvas动画是两种不同的Web动画技术，它们的实现方式、适用场景和优缺点有所不同。

SVG动画是基于矢量图形的动画技术，使用XML描述图形，并在浏览器中渲染出来。SVG动画可以通过JavaScript或CSS来控制SVG元素的属性值变化，从而实现各种动画效果，例如移动、旋转、缩放、形变、颜色变化等。SVG动画具有以下特点：

1. 可无限缩放：SVG图形可以无限缩放而不会失真，适用于不同分辨率设备的显示。这是因为SVG图形是基于矢量路径、文本、形状等组成的，而不是像素点。
2. 可维护性高：SVG动画可以通过JavaScript或CSS来实现，具有更好的可维护性和可扩展性。开发者可以根据需要修改SVG元素的属性值，从而实现不同的动画效果。
3. 动画效果多样：SVG动画可以实现各种动画效果，例如移动、旋转、缩放、形变、颜色变化等。SVG动画还可以实现更加复杂的动画效果，例如形变、路径动画等。
4. 文件大小较小：相比于Canvas动画，SVG动画文件通常较小，因为它是基于矢量描述的，无需存储大量像素点信息。这使得SVG动画适用于需要实现矢量图形的场景，并且可以加快网页加载速度。
5. 支持交互：SVG动画可以与其他Web技术（例如HTML、CSS、JavaScript）结合使用，实现更加丰富的Web应用。SVG动画还支持交互式操作，例如鼠标悬停、点击等，开发者可以通过JavaScript来实现这些交互效果。

总之，SVG动画是一种可无限缩放、可维护性高、动画效果多样、文件大小较小、支持交互的Web动画技术，适用于需要实现矢量图形和复杂动画效果的场景。

Canvas动画是基于像素的动画技术，使用JavaScript脚本在Canvas元素上绘制图形。Canvas提供了一些API，允许开发者直接控制像素，可以实现高度个性化的图形绘制和动画效果。Canvas动画具有以特点：

1. 高性能：Canvas动画的渲染速度快，因为它是基于像素的，可以直接控制像素点的颜色和位置，无需对矢量图形进行复杂的计算，因此适用于需要实现复杂动画效果的场景。
2. 绘制自由度高：Canvas提供了一些API，允许开发者直接控制像素，可以实现高度个性化的图形绘制和动画效果。开发者可以自由地绘制各种形状、图案、特效等。
3. 适用范围广：Canvas动画可以实现各种复杂的动画效果，例如形变、路径动画等。Canvas动画还可以与其他Web技术（例如HTML、CSS、JavaScript）结合使用，实现更加丰富的Web应用。
4. 文件大小较大：相比于SVG图形，Canvas动画文件通常较大，因为它是基于像素的，需要存储更多的像素点信息。
5. 不支持无限缩放：Canvas动画是基于像素的，因此它不支持无限缩放，当放大画布时，画面会变得模糊不清。

总之，Canvas动画是一种高性能、绘制自由度高、适用范围广的Web动画技术，适用于需要实现复杂动画效果的场景。