点击右上方红色按钮关注“web秀”,让你真正秀起来
前言
首先祝大家2019新年快乐,万事大吉,猪事顺利,阖家欢乐。
前面文章SVG 线条动画基础入门知识学习到了基础知识,现在来给大家讲讲如何制作SVG 制作复杂图形线条动画。
假如你有这样的一个gif,要用svg画出来,你能想到什么办法了?
上面这个 SVG 线条动画的路径 path ,如果自己手工一个点一个点定位调试画出来的话,估计你的累趴下(也不一定能搞定)。
下面我来告诉大家一个简单的方法,准备好工具。
使用 PS 导出路径
导入图片
用魔术棒or套索工具,选择区域
右击-->建立工作路径-->容差2个像素吧(可以用不同大小的容差多试几次,直到得到一个自己满意的路径。)。
好,这个时候,路径算是建立完成了,可以把图层的透明度设置为 0 ,就能清晰的看到路径长啥样:
好,到了 PS 中的最后一步,点击 文件-->导出-->路径到 illustrator ,看图,照着操作就好:
在 illustrator 中生成 SVG 文件
打开 AI ,打开刚刚用 PS 导出的 *.ai 文件。
可能你看到的是一片空白,别慌,使用ctrl+a全选,就能选中路径啦。
看到了吧,这上面有多少个点,太多,都不想数,所以手工画是不可能的啦。
OK,接下来就是调整画布大小,最好是路径左上角和画布左上角对齐,然后选中存储为 SVG 文件。
好,其实吧 AI 也没做什么,路径是使用 PS 生成的,为什么不直接用 PS 生成 *.svg 文件呢?因为我用的版本 PS 还没支持直接存储为 SVG 格式。然后其实也可以直接在 AI 上绘制路径,这个就看设计师或者你对哪个工具更熟悉了。
获取 SVG 的 path 路径
把刚刚保存的 *.svg 路径的文件用浏览器打开,右键查看网页源代码:
这里的path就是我们要的路径了
运用动画
.container { width: 400px; margin: 20px auto; } .yy { stroke-width: 5; stroke: #f987ae; animation: lineMove 13s ease-out infinite; } @keyframes lineMove { 0% { stroke-dasharray: 0, 4891; } 50% { stroke-dasharray: 4891, 4891; fill: rgba(0, 0, 0, 0); opacity: 1; } 100% { stroke-dasharray: 4891, 4891; fill: rgba(249, 135, 174, 1); opacity: 0; } }
这里的stroke-dasharray长度,可以通过js来获取
var obj = document.querySelector("path"); var length = obj.getTotalLength(); console.log(length); // 4890.61669921875
是不是很简单了?赶紧自己试试吧。
公告
喜欢小编的点击关注,了解更多知识!
源码地址和源文件下载请点击下方“了解更多”