快速实现SVG动态图标 |
您所在的位置:网站首页 › 会动的图片制作 › 快速实现SVG动态图标 |
有些小伙伴看到标题就在想 我做这动态图片肯定不那么麻烦,我随便找几个图贴上去啊! 我只能说:小了,格局小了! 像有些业务场景:比如大屏项目,如果使用png.gif这类,总会失真! 但SVG不会,SVG永远的神! 所以,这篇文章教大家如何快速实现SVG动态图标! 类似这样~ 我推荐大家去 iconfont 网站,随便找个图标 把鼠标放在图标上,点击下载按钮 会出现如下页面,点击复制SVG代码 你就会得到如下代码 复制代码有的小伙伴就觉得这是啥玩意啊?我看不懂啊! 小伙伴们,先别慌,hold住! 其实这段代码很简单! 就是 svg 标签嵌套了两个 path 标签罢了 svg 标签中 viewBox="0 0 1024 1024" 属性代表是 1024 × 1024 视图 path 标签中的 d 属性定义路径 简单准确理解:就是在 1024 × 1024 的虚拟画布上作画 而 width="200" height="200" 是控制实际svg的大小 也就是等比例缩放,把 1024 × 1024 图片缩放到 200 × 200,还不会失真,真好! 最后一个 path 标签中的 fill="#1875F0" 是填充色 2. 编写动画样式 (CSS)再编写样式之前,我们还需要对之前svg的内容进行处理 在每个 path 标签中 删除 fill="#1875F0" 原本的填充颜色属性 添加 fill="#fff" 与背景相同的填充颜色 增加 class="icon-path" class类名 增加 stroke="#1875F0" 描绘路径颜色属性 增加 stroke-width="3" 描绘路径的宽度 如下: 复制代码增加css代码: .icon-path { animation: icon-path-animation 8s ease-in infinite; } @keyframes icon-path-animation { 0% { stroke-dasharray: 4917; stroke-dashoffset: 4917; } 40% { stroke-dasharray: 4917; stroke-dashoffset: 0; fill: #fff; } 60% { stroke-dasharray: 4917; stroke-dashoffset: 0; fill: #1875F0; } 100% { stroke-dasharray: 4917; stroke-dashoffset: 0; fill: #1875F0; } } 复制代码大功告成! 哈哈哈,别急 这里有些细节你应该明白! 首先我们用了animation 动画属性: 指定了 icon-path-animation 关键帧的名称 持续时间为 8s ease-in 由慢到快的 动画过程 infinite 无限次数循环 而,在关键帧中: 小伙伴们比较陌生的应该是 stroke-dasharray 和 stroke-dashoffset 两个属性 stroke-dasharray 表示 路径之间的空白间隙长度 比如将上述 css 替换成这段代码 .icon-path { stroke-dasharray: 1000; } 复制代码肉眼可见的他有 1000 的间隙值 还有,细心的小伙伴会发现 有个array的字眼 确实他可以传“数组”进去 例如 .icon-path { stroke-dasharray: 60, 50, 60; } 复制代码他就会出现 接着就是 stroke-dashoffset 空白间隙的偏移量 .icon-path { stroke-dasharray: 1000; stroke-dashoffset: 200; } 复制代码其实你可以发现,就是空白间隙就被偏移 200 所以,stroke-dashoffset: 4917; 到 stroke-dashoffset: 0; 应该是 从无到有的过程 这个图标 最长的 path 约为 4917 毕竟,stroke-dashoffset 空白间隙偏移为4917,那就是 4917 - 4917 = 0,此时的 path 应该 0 而当 stroke-dashoffset 空白间隙偏移为 0, 4917 - 0 = 4917,也就是这个图标足够显示的路径长度 或许,有的小伙伴最莫名其妙的是:你怎么知道这个图标路径长度是 4917 啊?胡说八道吗? 其实不是我算的,我用了以下的JS代码获得的 const iconPath = document.getElementsByClassName('icon-path') // 获取 path 标签 for (let i = 0; i < iconPath.length; i++) { const item = iconPath[i] console.log(item.getTotalLength()) // 获得 path 路径长度 } 复制代码可以发现,最长度是 4916.69335937, 约为 4917 所以,我们只要选取最长path作为最大间隙就足够! CSS代码连贯流程应该是: 从 0 到 40% 绘制全部描边路径 从 40% 到 60% 填充颜色 从 60% 100% 保持不变 整个过程从慢到快,持续 8s, 无限循环 所以,看完以上你应该可以快速开发一个动态SVG图标了吧 附上全部代码(html文件) SVG动态图标 .icon-path { animation: icon-path-animation 8s ease-in infinite; } @keyframes icon-path-animation { 0% { stroke-dasharray: 4917; stroke-dashoffset: 4917; fill: #fff; } 40% { stroke-dasharray: 4917; stroke-dashoffset: 0; fill: #fff; } 60% { stroke-dasharray: 4917; stroke-dashoffset: 0; fill: #1875F0; } 100% { stroke-dasharray: 4917; stroke-dashoffset: 0; fill: #1875F0; } } const iconPath = document.getElementsByClassName('icon-path') // 获取 path 标签 for (let i = 0; i < iconPath.length; i++) { const item = iconPath[i] console.log(item.getTotalLength()) // 获得 path 路径长度 } 复制代码最后: 本篇只是实现了简单动画效果 如果想要复杂效果,无非是写好几个不同 animation 如果小伙伴们认真看完明白其中原理,就可以完实现出来的 我们一起加油! 感谢阅读 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |