SVG动画与GSAP动画库

云深不知处_
2,354 阅读8分钟

SVG简介

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的 XML 标记语言。它可以被用来创建图形和动画，通常用于 Web 开发中，因为它可以无损缩放而不会失真。

  • SVG可以理解为一个画布。可以通过width、height定义宽高(默认300*150)、使用viewBox定义可视区域。
  • SVG的实现主要依赖svg标签：<svg></svg>，可以嵌套多种标签，用于绘制圆形（circle）、矩形（rect）、折线（polyline）、多边形（polygon）、路径（path）等多种基本图形和动画。
  • W3School：www.w3school.com.cn/svg/index.a…
 <svg width="40" height="40" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="chujingyou"
          d="M470.144 830.954667c32.618667 7.765333 57.770667-4.394667 73.557333-31.701334 3.136-5.461333 12.586667-25.088 13.973334-27.733333 5.76-11.072 11.925333-20.970667 20.053333-31.530667 6.592-8.448 9.984-10.816 26.197333-19.328 26.666667-13.973333 42.581333-28.778667 54.4-57.749333 1.322667-0.64 3.2-1.472 5.76-2.517333l5.504-2.197334c14.186667-5.632 22.037333-9.6 30.933334-17.621333 15.552-13.994667 22.741333-33.877333 19.392-55.594667 0.170667 1.130667 0.085333-0.917333 0-4.138666-0.213333-12.266667-0.362667-17.557333-1.088-25.493334-3.562667-39.445333-14.805333-66.581333-53.013334-72.170666-3.114667-0.469333-20.821333-13.888-27.690666-21.781334-20.650667-23.616-107.776-36.309333-152.106667-35.114666-4.778667-1.557333-11.306667-5.141333-18.581333-10.24-2.346667-1.642667-25.621333-21.098667-34.496-24.085334-10.901333-3.648-21.034667-7.573333-43.477334-16.618666l-15.701333-6.293334c0-0.192 0.042667-0.298667 0.064-0.512l0.853333-5.397333c2.858667-18.432 4.672-29.504 6.805334-41.045333 2.112-11.498667 4.949333-22.933333 8.490666-34.282667l2.325334 1.429333c8.576 5.312 12.48 7.701333 17.472 10.666667l9.216 5.525333c17.024 10.24 25.024 14.826667 35.626666 20.181334 33.493333 16.832 63.466667 0.618667 78.592-28.010667 5.397333-10.24 9.066667-21.952 11.477334-34.133333 15.104 3.904 28.330667 3.968 46.485333-1.514667 31.189333-9.408 57.472-47.509333 57.472-79.509333v-4.714667c0-18.837333-0.170667-28.458667-1.834667-36.501333 127.978667 47.274667 227.946667 167.317333 246.122667 315.541333 22.528 183.68-82.069333 352.917333-248.32 415.317333-162.496 60.992-347.584 2.282667-447.04-141.888-89.92-130.325333-91.605333-300.906667-11.114667-430.954666 1.109333 5.738667 2.048 13.162667 4.053334 31.189333 2.176 19.712 3.2 28.074667 4.970666 36.906667 10.346667 53.077333 36.757333 113.088 67.562667 124.330666 19.882667 7.253333 34.56 8.426667 60.373333 7.424 15.338667-0.597333 20.608-0.234667 27.669334 2.133334 8.021333 2.709333 10.346667 5.290667 11.669333 12.416 3.178667 17.088 7.893333 27.989333 18.389333 46.848 5.76 10.432 7.338667 14.165333 8.192 19.904 2.026667 13.632 8.256 24.064 17.322667 33.898666 4.842667 5.269333 9.258667 9.152 17.344 15.829334 3.626667 2.965333 5.589333 4.586667 6.912 5.717333-0.234667 3.072-1.066667 9.6-3.157333 21.354667-6.122667 33.962667-7.125333 50.304 1.834666 71.146666a80.426667 80.426667 0 0 1-1.237333 7.253334l-1.002667 4.672c-4.266667 19.477333-5.333333 26.752-3.776 39.488 3.093333 25.408 20.245333 44.928 46.570667 51.2m-0.277333-214.805334c-5.781333-12.8-36.224-27.776-38.336-42.005333-4.224-28.650667-21.546667-39.808-26.837334-68.309333-4.288-22.997333-17.941333-37.589333-39.978666-45.034667-32.512-10.965333-54.826667 2.538667-87.04-9.216-10.453333-3.797333-32.810667-53.888-40.341334-92.416-3.413333-17.450667-5.546667-50.24-8.981333-68.010667-13.546667-70.037333-38.677333-55.018667-49.621333-55.018666-115.157333 145.130667-127.573333 357.034667-16.277334 518.293333 110.485333 160.149333 316.16 225.514667 497.173334 157.589333 178.730667-67.093333 301.312-251.050667 275.626666-460.437333-21.866667-178.624-146.474667-308.138667-287.573333-354.858667l0.106667-0.256c-2.517333-0.832-5.034667-1.493333-7.552-2.261333a322.773333 322.773333 0 0 0-23.658667-6.378667c-3.285333-0.789333-6.506667-1.792-9.813333-2.496 1.322667 1.898667-44.010667 0-12.693334 44.522667 12.565333 17.856 11.904 17.749333 11.904 52.586667 0 13.418667-14.293333 34.794667-27.136 38.677333-26.026667 7.829333-25.045333-6.570667-51.370666 0-14.250667 3.541333-21.397333 11.648-23.36 26.133333-2.368 17.536-10.56 50.154667-30.293334 40.234667-14.506667-7.274667-28.288-15.978667-42.282666-24.277333-15.061333-8.938667-29.717333-18.666667-45.056-27.072-16.768-9.173333-31.488 20.544-37.333334 39.168a335.637333 335.637333 0 0 0-9.621333 39.061333c-4.117333 22.357333-7.338667 44.928-10.944 67.370667 1.685333 0.768-0.768 15.701333 0 15.957333 28.714667 9.728 62.058667 25.109333 90.837333 34.730667 2.069333 0.704 40.064 38.336 70.144 37.077333 20.629333-0.853333 106.496 8.618667 116.416 19.968 6.912 7.936 33.685333 33.002667 53.653334 35.925333 21.034667 3.072 16.554667 55.957333 18.112 66.090667 4.8 30.976-46.72 22.869333-57.6 51.904-17.237333 45.994667-46.336 32.021333-76.117334 70.506667-40.746667 52.608-32.021333 83.157333-64 75.541333-31.957333-7.616 1.28-51.370667-10.154666-75.541333-12.906667-27.328 12.437333-70.208 0-97.749334"
          fill="#458bef" />
 </svg>

svg画布只展示一个范围（宽*高）内的内容。viewBox可以用来修改默认的显示配置。

viewBox由4个点组成，viewBox=“x, y, w, h”；其含义是在 svg 空间中的  (x,y)位置划出一个  width * height  的矩形区域。其中x，y用于定义svg画布坐标原点的位置，通过修改x，y可以移动画布的位置。而w，h则是定义svg画布的视野区域；默认情况下viewBox=“0,0,width,height”

当w<width、h<height的时候，相当于是拉近了视野，视野小了，但实际显示的区域没有发生变化；这就会导致显示的图形变大，显示的区域变小。

当w>width、h>height的时候，相当于拉远了视野，视野变大了，但实际显示的区域没有发生变化；这就会导致显示的图形变小，显示的区域变大。

<svg width="150" height="150" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100%" height="100%" />
    <circle cx="50%" cy="50%" r="40" fill="white" />
</svg>
<svg width="150" height="150" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100%" height="100%" />
    <circle cx="50%" cy="50%" r="40" fill="white" />
</svg>
<svg width="150" height="150" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100%" height="100%" />
    <circle cx="50%" cy="50%" r="40" fill="white" />
</svg>
<svg width="150" height="150" viewBox="100 100 300 300" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100%" height="100%" />
    <circle cx="50%" cy="50%" r="40" fill="white" />
 </svg>

image.png

SVG的优点：

  1. 可无损缩放:SVG图形是基于矢量描述的，不像位图图像（如JPEG或PNG）那样由像素组成。因此，SVG图形可以无损地缩放到任意大小而不会失真，保持图像的清晰度和质量。
  2. 文本可编辑：SVG图形是基于XML的，因此可以使用文本编辑器直接编辑SVG代码。这使得对图形进行修改、添加交互和动画效果更加方便。
  3. 跨平台兼容性：SVG是一种开放的标准，被广泛支持和接受。它可以在各种设备和平台上进行显示，包括Web浏览器、移动设备和桌面应用程序。
  4. 动画和交互性：SVG支持动画和交互效果，可以通过CSS或JavaScript来实现。这使得SVG图形可以具有丰富的动态效果，增强用户体验。
  5. 可搜索和可索引：由于SVG图形是基于文本的，搜索引擎可以轻松地解析和索引其中的内容。这使得SVG图形可以更好地与搜索引擎优化（SEO）相结合，提高网页的可搜索性和可发现性。

位图和矢量图对比：

image.png

路径的属性介绍

path标签的图形形状是通过属性d来定义的，属性d的值是以：命令 + 参数 的形式进行组合的，命令又是通过关键字来表示的。

<path d="M44.567 10.188C44.567 9.829 44.298 9.56 43.938 9.56C43.58 9.56 43.265 9.828 43.31 10.188C43.31 10.547 43.579 10.816 43.938 10.816C44.297 10.816 44.567 10.547 44.567 10.188Z" fill="#FFFFFF" stroke="#fff" fill-rule="evenodd" />

主要有以下10个命令：

  • M = Move to（把画笔移动到某个点）
  • L = Line to（将点连成线）
  • H = Horizontal Line to（绘制水平直线）
  • V = Vertical Line to（绘制垂直直线）
  • Q = Quadratic Bezier Curve to（绘制二次贝塞尔曲线）
  • T = Smooth Quadratic Bezier Curve to（Q的简化命令，通过前一个点推断下一个点）
  • C = Curve to（绘制三次贝塞尔曲线）
  • S = Smooth Curve to
  • A = Elliptical Arc（绘制弧形）
  • Z = close path（连接当前点与起始点进行闭合）

二次贝塞尔曲线（三个控制点）

image.gif

三次贝塞尔曲线（四个控制点）

image.gif

SVG动画（路径path实现）

SVG动画的路径实现主要依赖属性：stroke（描边）和 fill（填充）。

  • stroke：定义svg的轮廓线。常用css属性有： stroke-dasharray（描边的样式），stroke-dashoffset（起始位置），stroke-color（描边的颜色），stroke-opacity（描边的透明度），stroke-linecap（描边端点形状）等。
  • fill：定义svg内部颜色或图案 ，常用css属性有fill-opacity(定义填充的透明度),fill-rule(定义填充规则)等。

stroke-dasharray

提供一个奇数或偶数数列，其中数与数之间用逗号或空格隔开，用来指定短划线和缺口的长度，并重复。 如果是偶数数列，则一个表示短线长度，一个表示缺口长度。 如果是奇数数列，将奇数数列复制一个变成偶数数列，然后按照短线，缺口的顺序绘制。

(偶数数列) stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10"表示从坐标（10,10）到(200,10)这条水平线上，短划线和缺口都为5个px

image.png

（奇数数列） stroke-dasharray="20 10 5" x1="10" y1="10" x2="190" y2="10"表示从坐标（10,10）到(200,10)这条水平线上，短划线和缺口按照20 10 5 20 10 5的顺序排列。

image.png

stroke-dashoffset

stroke-dashoffset 属性用于指定路径开始的距离(正值向左偏移，负值向右偏移)

image.png

code示例：fingerPrint、paintLogo

GSAP简介

GSAP：GreenSock Animation Platform，一个专业的Javascript动画工具库，可以结合插件库，通过序列、补间动画实现更高级的动画效果。（开源可商用）

  • 丝滑（优化动画性能）
  • 兼容性强（兼容各浏览器、前端框架）
  • 轻量无依赖
  • 模块化构建

官方网站：gsap.com/

安装 GSAP

  • 通过 CDN 引入

  • <script src="https://cdn.jsdelivr.net/npm/gsap@3.11/dist/gsap.min.js"></script>

  • 通过 NPM 安装

  • npm install gsap

GSAP的语法

gsap.Methods(target,variables)

  • Methods:方法
  • target：目标元素
  • variables：变量参数

gsap有4种自带的补间动画：

  • gsap.to()：最常见的补间类型。 指元素从当前状态开始，到定义的状态结束。
  • gsap.to(".circle", { x: 40, fill: 'blue', })
  • gsap.from()：和 to()相反，从定义的状态开始，到当前状态结束。
  • gsap.from(".circle", { x: -40, fill: 'blue', })
  • gsap.fromTo()：从起始定义状态开始，到终点定义状态结束。
  • gsap.fromTo(".circle", { x: -40, fill: 'blue', },{ x: 40, fill: 'green' })
  • gsap.set()：直接跳转到set的状态(无动画)。
  • gsap.set(".circle", { x: 40, fill: 'blue', })

gsap的目标元素target的获取：

target的获取可以使用选择器,并且可以获取一个包含多个dom元素的数组;

gsap.to('.box',{x:20})

gsap.to(['.box1','.box2'],{x:20})

gsap的变量参数：

变量参数可以是想要动画的任意CSS属性，也可以是影响动画表现形式的特殊属性。

GSAP变量参数等同于CSS属性
x: 100transform: translateX(100px)
y: 100transform: translateY(100px)
xPercent: 50transform: translateX(50%)
yPercent: 50transform: translateY(50%)
scale: 2transform: scale(2)
scaleX: 2transform: scaleX(2)
scaleY: 2transform: scaleY(2)
rotation: 90transform: rotate(90deg)
skew: 30transform: skew(30deg)
skewX: 30transform: skewX(30deg)
transformOrigin: “center 40%”transform-origin: center 40%
opacity: 0adjust the elements opacity
autoAlpha: 0不透明度和可见性的简写
duration: 1animation-duration: 1s
repeat: -1animation-iteration-count: infinite 重复无限次
repeat: 2animation-iteration-count: 2
delay: 2animation-delay: 2
yoyo: true 来回往复动画animation-direction: alternate
onStart动画开始时调用
onUpdate动画活动时每帧调用
onComplete动画完成时调用
onRepeat动画每次重复时调用

一些效果：

效果作用效果展示
ease缓动gsap.com/resources/g…
stagger交错gsap.com/resources/g…
timeline时间线gsap.com/resources/g…
controls动画控制gsap.com/resources/g…
callback动画回调gsap.com/resources/g…

更多演示案例：gallery.xieyufei.com/case/gsap/d…

“Animate Anything”

GSAP能实现的远不止上面的属性，它可以动画任何属性，包括CSS属性、自定义对象属性甚至CSS变量和复杂的字符串，还可以对SVG，JS对象动画化。（但不建议对导致频繁重排和重绘的属性动画化，比如filter）

<template>
    <svg id="svg" viewBox="0 0 100 100">
       <rect class="svgBox" fill="#28a92b" x="0" y="35" width="30" height="30" rx="2" />
    </svg>
</template>
<script>
    gsap.to(".svgBox", { 
      duration: 2,
      x: 100, // use transform shorthand (this is now using SVG units not px, the SVG viewBox is 100 units wide)
      xPercent: -100,
      // or target SVG attributes
      attr: {
        fill: '#8d3dae',
        rx: 50, 
      },
    });
</script>

//create an object
let obj = { myNum: 10, myColor: "red" };

gsap.to(obj, {
  myNum: 200,
  myColor: "blue",
  duration:4,//持续时间，这里仍然可以用gsap的特殊属性
  onUpdate: () => console.log(obj.myNum, obj.myColor)
});

SVG动画与GSAP

可通过GSAP的补间类型实现SVG的轨迹变换和图形变换。

code示例：飞机运行轨迹、svg图标变换

image.gif

svg图标变换：codepen.io/vito-the-sa…

GSAP的插件

插件为 GSAP 的核心添加了额外的功能。这使得 GSAP 核心能够保持相对较小的规模，仅在需要时添加功能。(类似vscode的扩展工具)。

常用的插件：

  • ScrollTrigger：滚动触发
  • ScrollSmoother：平滑滚动
  • MorphSVG：SVG变形
  • MotionPath：沿路径运动
  • 可拖拽、可旋转、观察鼠标运动

具体的可参考官方文档：gsap.com/docs/v3/Plu…

GSAP对前端性能的影响：

FCP（首次内容绘制完成渲染时间）

FCP是指在页面加载过程中，浏览器首次渲染出页面的第一个内容元素的时间点。它与页面的加载速度和内容的复杂度有关，而与动画效果无关。

LCP（最大/最具意义内容绘制时间）

LCP是指根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或者文本块完成渲染的相对时间。

avatar
文章
阅读
粉丝