网站建设服务哪个便宜,厦门建设局招聘,wordpress安装创建数据库,pc网站生成手机网站前沿
今天闲来无事#xff0c;看到Antfu大佬的个性签名#xff0c;觉得还是非常炫酷的#xff0c;于是也想要搞一个自己的个性签名用来装饰自己的门面#xff0c;不过由于手写的签名太丑了#xff0c;遂放弃。于是尝试理解原理#xff0c;深入研究此等密法#xff0c;终…前沿
今天闲来无事看到Antfu大佬的个性签名觉得还是非常炫酷的于是也想要搞一个自己的个性签名用来装饰自己的门面不过由于手写的签名太丑了遂放弃。于是尝试理解原理深入研究此等密法终于小有所成发现原来是描边动画于是记载如下方便以后借鉴。
正文
首先这里涉及的技术是SVG,当然很多前端小伙伴们会觉得SVG有点陌生。是的SVG是一种图像格式一般都是由设计师给我们前端画好了我们只需要下载来用就可以啦。不过如果能了解SVG对于自己的技术发展还是很有帮助的首先我们来看一个简单的SVG动画例子。
线的动画
效果图 代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleSVG描边动画/titlestyle.p {/* 设置描边颜色为红色。 */stroke: red;/* 设置描边的宽度为10像素 */stroke-width: 10;/* 设置虚线的长度和间隔这里表示长度为200像素间隔也为200像素 */stroke-dasharray: 200;/* 设置虚线的起始偏移量为200像素即虚线从起点开始的位置。 */stroke-dashoffset: 200;/** 应用名为stroke的动画持续时间为2秒.并且动画结束后保持最终状态forwards*/animation: stroke 2s forwards;}keyframes stroke {to {/* 表示在动画结束时将虚线的偏移量设置为0即完全显示描边。 */stroke-dashoffset: 0;}}/style/headbodysvg classicon width200 height200line classp x10 y150% x2100% y250% //svg/body
/html
分析 我们从两方面入手分析分别是html标签和css代码。
对于html代码我们不难发现这是一个svg里面包含了标签为p的一条线。这条线的Y轴占一半也就是竖直剧中这条线的X轴从0到100%表示这条线是从开始画到线的结束,长度为200px.对于css代码这边有两个属性需要大家深刻理解分别是stroke-dasharray和stroke-dashoffset以及还有一个keyframes动画的含义。 stroke-dasharray: 这个属性定义了虚线的图案即虚线的长度和间隔。它是一个数组值交替表示虚线的绘制部分和空白部分的长度。例如如果设置为20,10则表示虚线的每一段长20像素每一段之间的间隔长10像素。如果只设置一个值如400则表示虚线的长度为400像素间隔也为400像素实际上这样的设置会形成实线效果因为虚线长度和间隔相等。stroke-dashoffset: 这个属性控制虚线的起始偏移量。它可以是正值或负值正值表示虚线从路径的起点往路径的终点方向偏移负值则相反。这个属性通常与动画结合使用通过改变stroke-dashoffset的值来实现描边动画效果。例如如果一条路径的虚线长度加间隔总和为200像素将stroke-dashoffset设置为200像素则虚线会被完全偏移出去路径看起来就像是没有描边的。随着stroke-dashoffset逐渐减小到0虚线会逐渐显示出来形成动画效果。keyframes: keyframes用于定义动画的关键帧。to是keyframes中的一个关键字表示动画结束时的状态。在这里例子中定义了名为stroke的关键帧动画通过to { stroke-dashoffset: 0; }表示在动画结束时将虚线的偏移量设置为0即完全显示描边。
不知道大家理解了没有我举两个例子考考大家。
不带动画时当stroke-dasharray为50stroke-dashoffset为0是什么样的。不带动画时当stroke-dasharray为50stroke-dashoffset为50是什么样的。
结论如下 圆的动画
我们知道了线的动画那么我们举一反三举个类似的例子如何画一个圆呢其实本质跟上面一样不过有些许不同。稍后我们细致分析下。 效果图 代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleSVG描边动画/titlestyle.p {stroke: red;stroke-width: 10;stroke-dasharray: var(--length);stroke-dashoffset: var(--length);animation: stroke 2s forwards;/** 不给填充色 **/fill: none;}keyframes stroke {to {stroke-dashoffset: 0;}}/style/headbodysvg classicon width200 height200circle classp cx50% cy50% r30%/circle/svgscriptconst paths document.querySelectorAll(.icon .p);paths.forEach((path) {// 1是为了去除圆起点和末尾的空隙。const len path.getTotalLength() 1;path.style.setProperty(--length, len);});/script/body
/html分析 我们将代码跟线的代码稍作对比发现最大有一处不同也就是多了JS的代码我们分析下为什么需要JS代码呢。 你看下面这段代码,定义了一个圆形圆形中心点的x和y坐标都设置为 “50%” 表示圆形中心点位于SVG画布居中r30% 这是圆形的半径设置为 “30%” 表示半径是SVG画布宽度和高度的30%。 这就有一个问题了半径为30%这个圆的长度到底多长呢手算的话是不是太累了于是我们就想到了用Js通过调用getTotalLength的API直接取到长度岂不一劳永逸
circle classp cx50% cy50% r30%/circleSVG的动画
有读者问我理解了一条线的动画也理解了圆的动画我现在想要其他SVG的动画该如何实现呢? 很好的问题其实几乎所有的SVG动画原理于一条线的动画几乎类似都是触类旁通滴。 我们去网上随便下一个SVG图。楼主下了一个爱心将原先的代码对应的path改成爱心的即可。 注意记得去掉path标签里的stroke-dasharray和stroke-dashoffset。 效果图 代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleSVG描边动画/titlestyle.p {stroke: red;stroke-width: 2;stroke-dasharray: var(--length);stroke-dashoffset: var(--length);animation: stroke 4s forwards;fill: none;}keyframes stroke {to {stroke-dashoffset: 0;}}/style/headbodysvg classicon width200 height200pathclasspdM150.383,18.301c-7.13-3.928-15.308-6.187-24.033-6.187c-15.394,0-29.18,7.015-38.283,18.015 c-9.146-11-22.919-18.015-38.334-18.015c-8.704,0-16.867,2.259-24.013,6.187C10.388,26.792,0,43.117,0,61.878 C0,67.249,0.874,72.4,2.457,77.219c8.537,38.374,85.61,86.771,85.61,86.771s77.022-48.396,85.571-86.771 c1.583-4.819,2.466-9.977,2.466-15.341C176.104,43.124,165.716,26.804,150.383,18.301z/path/svgscriptconst paths document.querySelectorAll(.icon .p);paths.forEach((path) {const len path.getTotalLength() 1;path.style.setProperty(--length, len);});/script/body
/html尾注
本人参考了若干篇文章以及视频在此对他们表示感谢。
渡一教育 的 《SVG的描边动画》视频掘金 singsong作者的 《SVG 描边动画就这么简单》
