16 SVG动画教程

SVG的最有用的功能之一就是它的分辨率独立,这意味着您无需考虑设备上有多少像素,结果将始终缩放并由浏览器优化以查看大。 SVG不仅要创建静态图形,而且还是功能强大的动画工具。在这篇文章中,我们收集了十个教程,它们将帮助您学习如何为您的网站创建SVG动画。

SVG动画简介

可缩放矢量图形(SVG)是我们在项目中尽可能多地利用的图像格式。 SVG的小文件大小以及可扩展至任何大小的能力(名称中都有线索!),都使其完美地成为了Web的绝佳工具。如果您愿意为IE用户使用一些不太有趣的替代方法(或包括polyfills),那么SVG可以做很多事情。

 svg -animation-5


使用SVG

SVG是用于矢量图形的图像格式。从字面上看,它意味着可缩放矢量图形。基本上,就是您在Adobe Illustrator中使用的工具。您可以很容易地在Web上使用SVG,但您应该了解很多。

 svg -animation-10


使用SVG创建形状:SVG教程

本文将作为SVG的简介。它将为您提供有关如何使用基本XML绘制SVG形状的基本信息。如果您以前从未使用过SVG,那么这对您来说是个不错的开始。因此,让我们进入并开始这个很棒的教程。

 svg 形状


SVG中的动画线图

制作SVG动画最简单的方法是使用CSS动画或过渡。缺点是它没有’如果要IE支持,请在IE中工作’我将需要使用requestAnimationFrame并使用脚本逐帧更新值。

 svg -animation-9


多边形特征设计:SVG动画带来乐趣和收益

作为一个站点,多边形被设计为具有响应能力。但是,当要求放大或缩小尺寸(由用户的浏览器尺寸决定)时,诸如jpg,gif或png之类的标准图像格式并不总是表现良好。另一方面,SVG具有完美的响应特性:矢量可以增加或缩小到任意大小而不会损失任何保真度,并且对SVG元素执行的动画和操作会相对于其大小进行调整,而无需任何额外的工作。

 svg -animation-1


动画SVG:自定义缓动和定时

该图表以及Sprout上的另一个动画最初都是GIF。通过使用动画SVG而不是GIF,我们可以将页面大小从1.6 mb减少到389 kb,并将页面加载时间从8.75 s减少到412 ms。那是巨大的差异。

 svg -animation-2


SVG绘图动画

一个小实验,探索了SVG线描动画在图形或网站元素出现之前的用法,并模拟了它们的加载。

 svg -animation-3


带有Snap.svg的SVG动画图标

借助诸如Snap.svg之类的强大库,在网站上使用SVG变得越来越容易。今天,我们想探索我们可以用它做些什么,并为一些SVG图标设置动画作为一个实际示例。

 svg -animation-4


用CSS制作SVG动画

网络动画很令人高兴。它们可以提供视觉反馈,指导任务和完善网站,从而改善了用户体验。有多种创建Web动画的方法,包括JavaScript库,GIF和嵌入式视频。但是,出于某些原因,SVG和CSS的简单组合很有吸引力。它们由代码而不是数千个光栅图像帧组成,具有高性能,并且加载时间比笨重的GIF和视频要快。另外,可以创建许多简单的动画,而无需在网站的页面加载中添加另一个JavaScript插件。引导时,SVG基于矢量,因此它们可以在屏幕尺寸和缩放级别上完美缩放,而不会产生脆弱的像素化。

 svg -css


使用SVG制作矢量动画

与栅格化图像不同,SVG文件在任何分辨率下都将保持清晰清晰。对于高DPI手机,平板电脑和显示器,所有这些光栅化的图标开始显得有些陈旧和块状。有多种选择可得到更简单的装饰件,以使其平滑渲染并响应各种设备的宽度,形状和尺寸。符号字体是一种选择。另一个是SVG。

 svg -animation-6


如何使用CSS制作节日SVG图标动画

如果您有兴趣在Web上使用SVG,那么图标是一个不错的起点。 SVG灵活,独立于分辨率且重量轻,因此图标自然适合于矢量格式。另外,就像HTML一样,SVG可以轻松地用CSS样式化,其中包括CSS3动画。在图标上添加一些与动画的交互性,可以为用户带来愉悦的体验,还可以添加有关图标代表的内容。

 svg -animation-7


带有jQuery和Illustrator的SVG路径动画

在本教程中,我们将使用超级技巧构建路径动画 jQuery的插件称为“懒行画笔” 由CamO’Connell。 Cam是伦敦的前端Web开发人员,他热衷于构建交互式Web应用程序和插件。这是我们将要构建的演示文件和源文件。

 svg -animation-8


使用SVG笔触属性

内联使用SVG可以完全访问图形,以进行完全自定义并控制其输出。在浏览器中手动创建形状或对现有图形进行编辑时,这特别方便。

 svg -tuts


制作SVG HTML Burger按钮

SVG路径可以具有沿路径行进的动画笔触,但是这是使用两个属性创建的。 “ stroke-dasharray”(使虚线在空格之间保持均匀)和“ stroke-dashoffset”(使虚线移动)。大多数教程都使用超长笔画长度来显示此动画来沿一个方向设置路径动画,而使用虚线时又会产生超宽笔画间隙。

汉堡按钮


使用svg.js动画化SVG

在这篇文章中,我们’我将通过一个名为的库逐步介绍如何使用JavaScript编写SVG动画 svg .js。 我相信这是迄今为止最成熟的SVG操作库。

 svg js


带有SVG的动画复选框和单选按钮

通过使用JavaScript对SVG路径进行动画处理,我们可以做很多有趣的事情。今天,我们想向您展示一些复选框和单选按钮的效果。想法是隐藏输入,使用伪元素创建更具吸引力的样式,然后在选择输入后为SVG路径设置动画。

复选框


使用剪贴蒙版和CSS制作SVG动画

话虽如此,用纯CSS动画SVG元素有其局限性。您无法像使用jQuery和其他JavaScript库一样真正地“绘制” SVG路径,笔触或填充HTML画布。但是,您可以设置路径的虚线偏移量的动画,以给人以“画线”的印象。

 svg -tuts-16


5 Comments

  1. 感谢您的收藏。它’对于初学者来说,这是一个非常有用的资源,他们可以在不中断网络(或更糟糕的是:浏览器)的情况下,了解他们可以使用SVG做什么。
    ðŸ〜‰

  2. 很棒的教程。看一下 http://www.gifficons.com,我们会创建专业的SVG动画图标,并免费赠送ðŸ™,

  3. 乔希 说:

    谢谢,亨利!也许您也应该提到其他教程,例如SVGator的教程。它’对于对动画SVG图标感兴趣的非编码人员来说更有用 //www.svgator.com

  4. 迪玛 说:

    嗨,亨利!
    我非常喜欢知道动画SVG与GIF相比节省了很多资源。页面加载时间减少了21倍!它’有很大的好处。感谢你的分享!

  5. 说:

    嗨,亨利!本文只是令人惊叹的大量资源的收藏,非常感谢!显然,有两种方法可以处理SVG动画,可以自己编写代码,也可以使用工具编写。对于那些喜欢工具的人,我认为它’重要的是要提到SVGator。请考虑将其包含在您的文章中,让’鼓励一起广泛使用SVG动画!

发表评论

请客气。我们对此表示赞赏。您的电子邮件地址将不会被发布,并且必填字段已被标记

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.