正文

svg交互动画制作

人丑就该多读书  人丑就该多读书  2022-09-16  491

关键词：

前面我们已经说过了要怎样制作CSS3动画，但是SVG动画一直都没有时间研究过，正好趁现在有一点时间静下心来研究一下。

一般来说，常见前端动画实现方案分为三种，CSS3动画，HTML动画（SVG动画），JS动画或者我们可以称之为Canvas动画

这里主要我们是要讲解的是SVG动画的实现方法。

常见的SVG动画有三种实现方式

第一种，通过原生的SVG来实现，但是这种方法的实现效率较低，而且很多较为精确的动作比较难实现

第二种，通过常见的SVG动画库来实现，比如svg.js，snap.js之类的来实现，可以实现比较灵活的交互，复杂的线性动画也是很难实现的

第三种，是结合PS,AI,CSS3来实现有，这种方法交互需要自己实现，相对会比较繁琐，但是优势就是可以实现一些复杂的线性动画,而且也要求你的知识面要广阔一些

这个动画方案的实施，需要我们准备好，这些东西，

PS,AI，基础的SVG基础

我们要达到的效果是：

阿里巴巴的LOGO SVG会执行线性的运动。

首先我们先下载一张图，我们选择的是阿里巴巴的logo

这个时候我们发现阿里巴巴的图标背景不是透明的，所以我们需要这样操作来讲这个图标变成透明。

1、新建一个空白的涂层

2、使用快速选择工具将要保留的内容选择出来，记得要，调整边缘。

3、copy选中的区域，将内容粘贴到空白的涂层上面

如下：

4、这个是否我们按住Ctrl+图层，接着右击选中区域，选择新建空座路径

容差值，这个可以根据我们的要求自我调节

5、导出到AI，选择文件--导出--路径到illustrator

紧接着，我们打开AI文件，如下：

这里我们可以看到，内容是空白的，这个时候别急，我们需要做的是选择扣选工具，我们就可以看到路径了

在是在这一步的时候才可以进行图像的大小

6、调节之后确认无误，导出为SVG,选择存储为svg格式

这样SVG图片制作完成了

好了，这个时候图片的SVG代码已经制作好了，这个时候我们就要新建一个HTML代码，将SVG代码拷贝到HTML代码里面，代码如下：

<div class="container">
    <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
     width="284.929px" height="143.542px" viewBox="0 0 284.929 143.542" enable-background="new 0 0 284.929 143.542"
     xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M130.224,71.699c-1.119,0-2.238,0-3.357,0
    c-0.224-1.567-0.448-3.134-0.672-4.701c-4.7,2.462-9.402,4.925-14.102,7.387c-12.896,5.328-29.525,3.09-43.65,1.343
    c0,5.148,0,10.297,0,15.445c-10.34,2.544-23.941,10.769-24.175,23.504c10.591,20.382,60.005,4.57,77.899,2.015
    c0,0.224,0,0.448,0,0.672c-0.448,0-0.896,0-1.343,0c-18.776,14.243-93.198,33.523-100.731-3.358
    C15.876,93.371,33.556,77.8,41.58,67.669c20.558-25.953,93.976-74.961,147.068-57.082c49.84,16.786,7.64,61.106-8.058,81.257
    c-4.61,5.917-16.906,14.347-12.76,24.176c41.213,4.064,75.658-17.662,106.775-27.533c-0.224,0.448-0.448,0.896-0.672,1.343
    c-29.935,11.595-56.382,29.979-90.658,39.621c-11.694,3.29-34.207,6.583-38.278-5.372c-8.923-26.204,62.138-65.446,52.38-88.644
    c-4.779-11.076-21.725-12.767-33.577-16.788c-1.12,0.895-2.239,1.791-3.358,2.686c0,0.224,0,0.448,0,0.671
    c2.238,1.791,4.477,3.582,6.715,5.372c0,0.224,0,0.448,0,0.672c-30.254,1.578-56.749,14.34-82.6,21.489
    c1.381,4.517,3.486,7.65,2.015,11.417c-3.581,3.357-7.164,6.716-10.745,10.073c13.009,10.827,40.156-3.109,47.679-8.059
    c-1.343-1.343-2.686-2.686-4.029-4.029c0.896,0,1.791,0,2.687,0c3.186,1.525,5.217,2.786,6.715,6.044
    C129.329,67.221,129.776,69.46,130.224,71.699z"/>
</svg>
</div>

这个时候我们还需要获取整个图片路径的直线长度，方便CSS对路径的计算。

JS代码如下：

<script type="text/javascript">
    var obj = document.querySelector("path");
    var length = obj.getTotalLength();//1269.3662109375
    console.log(length);//1269.3662109375
</script>

给图片添加CSS3样式，并且给svg中的path添加alibaba class

 .container {
            width: 400px;
            margin: 0 auto;
        }

        .alibaba {
            stroke-width: 1px;
            stroke: #ccc;
            animation: lineMove 3s ease-out infinite;
        }

        @keyframes lineMove {
            0% {
                stroke-dasharray: 0, 1269.3662109375;
            }
            50% {
                stroke-dasharray: 1269.3662109375, 1269.3662109375
                fill: rgba(0, 0, 0, 0);
                opacity: 1;
            }
            100% {
                stroke-dasharray: 1269.3662109375, 1269.3662109375;
                fill: rgba(239, 114, 32, .9);
                opacity: 0;
            }
        }

运行的效果如下：

好了，大功告成了，是不是很神奇

分享svg交互动画方法的实操案例

优秀的人机交互和舒适合理的动画，一直是UX设计师孜孜不倦追求的目标。因为不同的客户需求，但是大家都希望在能减少设计工作量的同时，为一些动效增加可交互性，这样可以让特效更多样化，下面我们进入正题，青藤小编... 查看详情

html打造动画交互界面(代码片段)

使用方式1使用svg2png图片3css3动画4使用webgl5canvas6使用glsl发现很多东西本身html里面已经有了，关键是要熟悉和使用。现在先做基本的东西，等基本的创造好了，就可以打造科技界面了。读者请耐心等待1svg圆<svgwidth... 查看详情

如何在 HTML 中使用外部 SVG？

...描述】：我尝试制作一个引用SVG文件的HTML，该SVG文件是交互式的（CSS悬停）：如果我使用<imgsrc="algerie.svg">，我会失去交互性。如果我使用开发工具在新选项卡中打开此图片，它会变成交互式的。如果我使用：&... 查看详情

如何用svg写一个环形进度条以及动画(代码片段)

...以很方便的做进度条加载动画啦，这次案例以vue来做数据交互svg的viewBoxviewBox属性定义了画布上可以显示的区域，viewBox有4个值，值1为svg窗口起点显示的x坐标，值2位svg窗口起点的y坐标，后面的两个分查看详情

svg在ios中使用总结

...（templateobjects）和其它扩展（extensibility）。SVG图形是可交互的和动态的，可以在SVG文件中嵌入动画元素或通过脚本来定义动画。SVG在iOS中可以用UIWebView来加载：这种方法来加载SVG，虽然也可以，但是却存在诸如放大缩小、点击... 查看详情

新媒体运营技能svg图文交互基础01

参考技术A我们把SVG交互设计想象成作画的过程，假设一个100*100像素的画布。<circle>...</circle>绘制一个圆形，只需要知道圆心坐标和半径。circle圆cx圆心横坐标cy圆心纵坐标r半径fill是填充色stroke描边stroke-width描边宽度颜... 查看详情

前端可视化svg学习知识点(代码片段)

...图像不同，SVG图像可以无限缩放而不会失真，同时也支持交互和动画等特性。SVG最早于1999年由W3C发布，用于在Web上展示矢量图形，并于2001年正式成为标准。在过去的二十多年中，SVG经历了多次更新和改进，增加了更多的功能和... 查看详情

生成和拖动 SVG 元素 - 方法

...6【问题描述】：我正在学习Javascript/SVG组合（动画和制作交互式SVG）。我想创建一个代码sn-p，其中菜单元素（“库存”）可以拖动到主屏幕（“画布”），而原始元素将保留在其位置（就像移动副本一样它脱离了原始元素）。... 查看详情

svg是啥文件格式

...字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。相关信息SVG图形是可交互的和动态的，可以在SVG文件中嵌入动画元素或通过脚本来定义动画。提供了目前网络流行... 查看详情

codepen每日精选（2018-4-15）

...eta/f...随机生成城市3d地图https://codepen.io/nicoptere/...与鼠标交互的灯泡https://codepen.io/DollarAksh...选择汉堡包的交互动画https://codepen.io/chrisganno...用svg写的小球弹跳下落的动画https://codepen.io/chrisganno...纯css写的图片颜色渐变效果https://c... 查看详情

SVG 背景可以是交互式的吗？

】SVG背景可以是交互式的吗？【英文标题】：CananSVGbackgroundbeinteractive?【发布时间】：2013-03-2909:25:53【问题描述】：我有一个我创建的SVG图像。它是一个长方形，里面有一个圆圈。圆圈使用JavaScript跟随用户鼠标。图片由以下代码... 查看详情

svg是啥格式啊

...（vectorgraphicshape）、图象(image)、文本(text)。SVG图形是可交互的和动态的，可以在SVG文件中嵌入动画元素或通过脚本来定义动画。它提供了目前网络流行的PNG和JPEG格式无法具备的优势：可以任意放大图形显示，但绝不会以牺牲图... 查看详情

svg的动态之美-搜狗地铁图重构散记(代码片段)

...狗地图发布了新版的移动端地铁图，改版初衷是为了用户交互体验的提升以及性能的改善。原版地铁图被用户吐槽最多的是pinch缩放不流畅、无过渡动画、拖拽边界不合理等等，大体上都是交互体验上的问题。实际上原版的问题... 查看详情

在 SVG 路径动画中为 SVG 设置动画

】在SVG路径动画中为SVG设置动画【英文标题】：AnimateaSVGinaSVGpathAnimation【发布时间】：2020-01-2920:16:05【问题描述】：我已经建立了一个路径动画，但是我在svg中的锯片有问题。我想为Sawblade制作动画（旋转360度）。<style>htmlba... 查看详情

svg动画

动画原理SVG动画，就是元素的属性值关于时间的变化。如下图来说，元素的某个属性值的起始值（from）到结束值（to）在一个时间段（duration）根据时间函数（timing-function）计算出每一帧（frame）的插值（interpolation）作为变换的... 查看详情

快速响应的交互式图表/图形：SVG、Canvas 还是其他？

】快速响应的交互式图表/图形：SVG、Canvas还是其他？【英文标题】：Fastandresponsiveinteractivecharts/graphs:SVG,Canvas,other?【发布时间】：2012-08-3120:38:50【问题描述】：我正在尝试选择合适的技术来更新项目，该项目基本上在可缩放、可... 查看详情

SVG 动画 - 来自中心的 SVG 的 CSS 悬停动画

】SVG动画-来自中心的SVG的CSS悬停动画【英文标题】：SVGAnimation-CSSHoverAnimationForSVGFromTheCenter【发布时间】：2021-02-0202:50:03【问题描述】：我在GSAP中做过这个效果这里是Codepen作为参考：https://codepen.io/whitelionx/full/vYGQqBZconstsvgs=documen... 查看详情

使用填充为 svg 设置动画

】使用填充为svg设置动画【英文标题】：animatesvgusingfill【发布时间】：2015-04-1201:19:40【问题描述】：如何使用ilustrator的路径svg制作动画。在完成制作对象后，我从ilustratorcs6获得了svg代码（路径）。对于动画，我使用的是没有jav... 查看详情