Document

--- theme: devui-blue highlight: atom-one-dark --- ## 一、渐变色和滤镜 ### 1.1 线性渐变 - SVG除了可以简单的填充和描边，还支持在填充和描边上应用渐变色。渐变有两种类型：**线性渐变** 和 **径向渐变**。 - 编写渐变时，必须给渐变内容**指定一个 id 属性**，use引用需用到。 - 建议渐变内容**定义在``标签内部**，渐变通常是可复用的。 - 线性渐变，是**沿着直线改变颜色**。线性渐变的使用步骤： - 第1步：在 SVG 文件的 defs 元素内部，创建一个``节点，并添加 id 属性。 - 第2步：在``内编写几个``结点。 - 给`` 结点指定位置 offset属性和颜色stop-color属性，用来指定渐变在特定的位置上应用什么颜色 - offset 和 stop-color 这两个属性值，也可以通过 CSS 来指定。 - 也可通过 stop-opacity 来设置某个位置的半透明度。 - 第3步：在一个元素的 fill 属性或 stroke 属性中**通过ID来引用 `` 节点**。 - 比如：属性fill属性设置为url( #Gradient2 )即可。 - 第4步（可选）：控制渐变方向，通过 ( x1, y1 ) 和 ( x2, y2 ) 两个点控制。 - （0, 0）（0, 1）从上到下；（0, 0）（1, 0）从左到右。 - 当然也可以通过 gradientTransform 属性设置渐变形变。比如： `gradientTransform=“rotate(90)”` 从上到下。 ```html Document ```

### 1.2 毛玻璃效果(高斯模糊) #### 1.2.1 css实现 - backdrop-filter：可以给一个元素后面区域添加模糊效果 - 适用于元素背后的所有元素。为了看到效果，**必须使元素或其背景至少部分透明** ```html Document

```

- filter：直接将模糊或颜色偏移等模糊效果应用于指定的元素 ```html Document

```

#### 1.2.2 svg实现 - ``：元素作为滤镜操作的容器，该元素定义的滤镜效果需要在SVG元素上的 filter 属性引用。 - x ，y, width, height 定义了在画布上应用此过滤器的矩形区域。x， y 默认值为 -10%（相对自身）；width ，height 默认值为 120% （**相对自身**） - ``：该滤镜专门**对输入图像进行高斯模糊** - stdDeviation 熟悉指定模糊的程度 - `` ：该滤镜可以**对输入图像指定它的偏移量** ```html Document ```

## 二、SVG的形变 - transform 属性用来定义元素及其子元素的形变的列表。 - 此属性可以与任何一个 SVG 中的元素一起使用 - 从 SVG2 开始，transform它是一个 `Presentation Attribute`，意味着它**可以用作 CSS 属性** - 但是transform作为CSS 属性和元素属性之间的语法会存在一些差异 - 比如作为元素属性时：支持2D变换，不需单位，rotate可指定旋转原点 - transform属性支持的函数： - translate(x，y) 平移 - rotate(z) / rotate(z，cx，cy) ：旋转 - scale（x, y）：缩放 - skew(x, y) ：倾斜 - matrix(a, b, c, d, e) ： 2*3 的形变矩阵 - 注意：**形变会修改坐标系**：形变元素内部会建立一个新的坐标系，后续的绘图或形变都会参照新的坐标系 ### 2.1 translate - 平移：把元素移动一段距离，使用transform属性的 `translate()`函数来平移元素。 - 与CSS的translate相似但有区别，这里**只支持2D变换**，不需单位。 - translate(x, y)函数 - 一个值时，设置x轴上的平移，而第二个值默认赋值为0 - 二个值时，设置x轴和y轴上的平移 ```html Document ```

### 2.2 rotate - 旋转：把元素旋转指定的角度，使用transform属性的 `rotate(deg，cx, cy)` 函数来旋转元素。 - 与CSS的rotate相似但有区别。区别是：**支持2D变换，不需单位，可指定旋转原点** - rotate(deg, cx, cy) 函数 - 一个值时，**设置z轴上的旋转的角度** - 注意： - 旋转会修改坐标系，坐标轴也会跟着旋转了 - 如何指定旋转原点？ - 直接在rotate中指定 cx ,cy（**相对于自身**） - 使用CSS样式写动画 ```html Document ```

### 2.3 scale - 缩放：改变元素尺寸，使用transform属性的 `scale()` 函数来缩放元素。 - 与CSS的scale相似但有区别，这**只支持2D变换，不需单位** - scale(x, y)函数 - 二个值时：它需要两个数字，作为比率计算如何缩放。0.5 表示收缩到 50% - 一个值时：第二个数字被忽略了，它默认等于第一个值 - 注意： - 缩放会修改坐标系，坐标轴被缩放了 - 如何指定缩放的原点？ - SVG属性实现需要平移坐标和移动图形 - 直接使用CSS来写动画 ```html Document ```

## 三、描边动画 - stroke 是描边属性，专门给图形描边。如果想给各种描边添加动画效果，需用到下面两个属性： - `stroke-dasharray =“number [, number , ….]”`: 将虚线类型应用在描边上。 - 该值必须是用逗号分割的数字组成的数列，空格会被忽略。比如 3，5 : - 第一个表示填色区域的长度为 3 - 第二个表示非填色区域的长度为 5 - `stroke-dashoffset`：指定在dasharray模式下路径的偏移量(往左偏移)。 - 值为number类型，除了可以正值，也可以取负值。 - 描边动画实现步骤： 1. 先将描边设置为虚线 2. 接着将描边偏移到不可见处 3. 通过动画让描边慢慢变为可见，这样就产生了动画效果 ### 3.1 直线的描边 - 不可见 -> 可见 ```html Document ``` ```html Document ``` - 如果虚线长度大于线条或者路径的长度，会使动画效果加速 ```html Document ``` ### 3.2 折线的描边 - 计算出折线的长度即可 ```html Document ``` ### 3.3 雪糕的描边 - 实现步骤： 1. 找到一个雪糕的SVG图片（设计师提供 | 网站下载） 2. 将雪糕的每一个路径都改成虚线 3. 将每个路径的描边都移动到虚线的空白处（不可见） 4. 给每个路径添加动画，将路径描边慢慢移动到虚线填充处，即可 - 获取路径长度的方法： - [SVGPathElement.getTotalLength()](https://developer.mozilla.org/zh-CN/docs/Web/API/SVGGeometryElement/getTotalLength) ```html Document ```

## 四、SVG中SMIL动画 ### 4.1 SMIL 介绍 - SMIL（Synchronized Multimedia Integration Language 同步多媒体集成语言）是W3C推荐的**可扩展标记语言，用于描述多媒体演示**。 - SMIL 标记是用 XML 编写的，与HTML有相似之处。 - SMIL 允许开发多媒体项目，例如：文本、图像、视频、音频等。 - SMIL 定义了时间、布局、动画、视觉转换和媒体嵌入等标记，比如：`` `` `` `` `` 等元素 - SMIL的应用 - 目前最常用的Web浏览器基本都支持 SMIL 语言 - **SVG 动画元素是基于SMIL实现**（SVG中使用SMIL实现元素有：``、``、``） - Adobe Media Player implement SMIL playback - QuickTime Player implement SMIL playback ### 4.2 SVG动画实现方式 - SVG是一种基于XML的开放标准矢量图形格式，动画可以通过多种方式实现： 1. 用JS脚本实现：可以**直接通过 JavaScript 在来给 SVG 创建动画和开发交互式的用户界面**。 2. 用CSS样式实现：自 2008 年以来，CSS动画已成为WebKit中的一项功能，使得我们可以通过CSS动画的方式来给文档对象模型(DOM) 中的 SVG 文件编写动态效果。 3. 用SMIL实现：一种**基于SMIL语言实现的SVG动画** ### 4.3 SMIL动画的优势 - SVG用SMIL方式实现动画，SMIL允许你做下面这些事情： - 变动一个元素的数字属性（x、y……） - 变动变形属性（translation 或 rotation） - 变动颜色属性 - 物件方向与运动路径方向同步等等 - SMIL方式实现动画的优势： - 只需在页面**放几个animate元素**就可以实现强大的动画效果，无需任何CSS和JS代码 - SMIL支持声明式动画。声明式动画**不需指定如何做某事的细节，而是指定最终结果应该是什么**，将实现细节留给客户端软件 - 在 JavaScript 中，动画通常使用 setTimeout() 或 setInterval() 等方法创建，这些方法需要手动管理动画的时间。而SMIL声明式动画可以让浏览器自动处理，比如：动画轨迹直接与动画对象相关联、物体和运动路径方向、管理动画时间等等 - SMIL 动画还有一个令人愉快的特点是，**动画与对象本身是紧密集成的，对于代码的编写和阅读性都非常好** ### 4.4 SMIL动画的元素 - SVG 中支持SMIL动画的元素： - `` `` `` `` - [更多](https://www.w3.org/TR/SVG11/animate.html#AnimationElements) - Set - ``元素提供了一种简单的方法，可以在指定的时间内设置属性的值。 - set元素是最简单的 SVG 动画元素。它是**在经过特定时间间隔后，将属性设置为某个值**（不是过度动画效果）。因此，图像不是连续动画，而是改变一次属性值。 - 它**支持所有属性类型**，包括那些无法合理插值的属性类型，例如：字符串和布尔值。而对于可以合理插值的属性通常首选``元素。 - ``元素常用属性： - attributeName：指示将在动画期间更改的目标元素的 CSS 属性（ property ）或属性（ attribute ）的名称 - ~~attributeType~~: (已过期) 指定定义目标属性的类型（值为：CSS | XML | auto） - to : 定义在特定时间设置目标属性的值。该值必须与目标属性的要求相匹配。值类型：；默认值：无 - begin：**定义何时开始动画或何时丢弃元素**，默认是 0s ( begin支持多种类型的值 ) - ``案例： - 1）在3秒后自动将长方形瞬间移到右边 - 2）点击长方形后，长方形瞬间移到右边 ```html Document ``` - Animate - ``元素**给某个属性创建过渡动画效果**。需将animate元素嵌套在要应用动画的元素内。 - ``元素常用属性： - attributeName：指将在动画期间更改目标元素的 property （CSS 属）或 attribute的名称。 - 动画值属性： - from：在动画期间将被修改的属性的初始值。没有默认值 - to :在动画期间将被修改的属性的最终值。没有默认值 - values：该属性具有不同的含义，**具体取决于使用它的上下文**（没有默认值） - 它定义了在动画过度中使用的一系列值，值需要用分号隔开，比如：values=“2 ; 3; 4; 5” - **当values属性定义时，from、to会被忽略** - 动画时间属性： - begin：定义何时开始动画或何时丢弃元素。默认是 0s - dur：动画的持续时间，该值必须，并要求大于 0。单位可以用小时 ( h)、分钟 ( m)、秒 ( s) 或毫秒 ( ms) 表示 - fill：定义动画的最终状态。 freeze（保持最后一个动画帧的状态） | remove（保持第一个动画帧的状态） - repeatCount：指示动画将发生的次数：`` | indefinite。没有默认值 ```html Document ```

- AnimateTransform - ``元素 - 指定目标元素的形变（transform）属性，从而允许控制元素的**平移、旋转、缩放或倾斜动画**（类似于 CSS3 的形变）。 - 在一个动画元素中，只能用一个< animateTransform >元素创建动画；存在多个时，后面会覆盖前面的动画。 - ``元素常用属性： - attributeName：指示将在动画期间更改的目标元素的 CSS 属性（ property ）或属性（ attribute ）的名称 - type ：一个指定类型的属性，在不同的使用场景下，有不同的意思： - 在元素，只支持 `translate(x, y) | rotate(deg, cx, cy) | scale(x, y) | skewX(x) | skewY(y)` - 在 HTML 中的 ` ```

## 五、SVG + SMIL动画案例 ### 5.1 飞机飞行轨迹 ```svg ```

### 5.2 播放器 ```svg ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a094ff6f6b944435a9e0c071d4775089~tplv-k3u1fbpfcp-watermark.image?) ### 5.3 加载动画 ```svg ```

### 5.4 转动动画 ```svg ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7aa1e5977f1844ac9d65d08cc7fd2527~tplv-k3u1fbpfcp-watermark.image?) ### 5.5 城市定位 ```html Document

``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/94c8cf3c1ca846f587af89c140f182f9~tplv-k3u1fbpfcp-watermark.image?) ### 5.6 水球动画 ```html Document

```