CSS

啥是佩奇? SVG 线条动画告诉你。

前言

首先祝大家2019新年快乐,万事大吉,猪事顺利,阖家欢乐。

前面文章《SVG 线条动画基础入门知识》学习到了基础知识,现在来给大家讲讲如何制作SVG 制作复杂图形线条动画。

假如你有这样的一个gif,要用svg画出来,你能想到什么办法了?
啥是佩奇? SVG 线条动画告诉你。

上面这个 SVG 线条动画的路径 path ,如果自己手工一个点一个点定位调试画出来的话,估计你的累趴下(也不一定能搞定)。

下面我来告诉大家一个简单的方法,准备好工具。

啥是佩奇? SVG 线条动画告诉你。

使用 PS 导出路径

导入图片

啥是佩奇? SVG 线条动画告诉你。

魔术棒or套索工具,选择区域

啥是佩奇? SVG 线条动画告诉你。

右击-->建立工作路径-->容差2个像素吧(可以用不同大小的容差多试几次,直到得到一个自己满意的路径。)。

啥是佩奇? SVG 线条动画告诉你。

好,这个时候,路径算是建立完成了,可以把图层的透明度设置为 0 ,就能清晰的看到路径长啥样:

啥是佩奇? SVG 线条动画告诉你。

好,到了 PS 中的最后一步,点击 文件-->导出-->路径到 illustrator ,看图,照着操作就好:

啥是佩奇? SVG 线条动画告诉你。

在 illustrator 中生成 SVG 文件

打开 AI ,打开刚刚用 PS 导出的 *.ai 文件。

可能你看到的是一片空白,别慌,使用ctrl+a全选,就能选中路径啦。

啥是佩奇? SVG 线条动画告诉你。

看到了吧,这上面有多少个点,太多,都不想数,所以手工画是不可能的啦。

OK,接下来就是调整画布大小,最好是路径左上角和画布左上角对齐,然后选中存储为 SVG 文件。

啥是佩奇? SVG 线条动画告诉你。

好,其实吧 AI 也没做什么,路径是使用 PS 生成的,为什么不直接用 PS 生成 *.svg 文件呢?因为我用的版本 PS 还没支持直接存储为 SVG 格式。然后其实也可以直接在 AI 上绘制路径,这个就看设计师或者你对哪个工具更熟悉了。

获取 SVG 的 path 路径

把刚刚保存的 *.svg 路径的文件用浏览器打开,右键查看网页源代码:
啥是佩奇? SVG 线条动画告诉你。

这里的path就是我们要的路径了

<div class="container">
        <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1600 2844" style="enable-background:new 0 0 1600 2844;" xml:space="preserve">

     <path class="yy"  fill-rule="evenodd" clip-rule="evenodd" fill="none"  d="M1170.7,1628.5c1.1,8,8.6,13,6.1,20.8c-1.8,4.2-3.6,5.1-7.8,6.9c-15.9-4.1-20.4-27.8-27.7-40.7
     c-26.3-2.9-60-31.8-84.9-28.6c0,0.3,0,0.6,0,0.9c24.1,50.6,33.3,107,45,172.3c3.8,21.2,5.3,61.9-8.7,71c-11.6,7.6-37.9,0.9-55.4,0.9
     c-46,0-93-0.7-140.3-0.9c-1.4,13.7,1.5,51,6.9,62.3c13-0.4,20.4-0.4,31.2,1.7c6.6,15.6,6.2,22.7-4.3,34.6
     c-11.5,0.9-23.1,1.7-34.6,2.6c-11.7,1.2-23.8-9.6-21.6-21.6c1.1-5.8,7.1-9.6,8.7-13.9c2.2-6.2-6.6-61.8-8.7-64.1
     c-10-4.7-28.4-0.9-41.6-0.9c-24.4,0-104.2-3.9-120.4,3.5c0.3,23.4,0.6,46.8,0.9,70.1c10.4-0.3,30.5-3.9,36.4,1.7
     c9.6,5.1,9.1,16.7,6.1,27.7c-15,8.7-61.1,17.7-69.3-4.3c-3.6-13.9,5.6-16.6,7.8-25.1c-0.6-23.1-1.2-46.2-1.7-69.3
     c-38.7-4.5-148.7,16.8-168.9-6.9c-12.4-14.6-1.5-48.6-0.9-67.5c-7.5-1.4-15-2.9-22.5-4.3c-4.6,2-9.2,4-13.9,6.1
     c-19.1,5.4-36.4-3.1-45.9-10.4c-0.3-2.9-0.6-5.8-0.9-8.7c0.9-1.7,1.7-3.5,2.6-5.2c13.7-1.8,19.8,8.3,36.4,5.2
     c0.3-0.6,0.6-1.2,0.9-1.7c-8.1-23.5-16.7-29.3,4.3-48.5c31.2-1.1,34.4,20.4,30.3,46.8c0.6,0,1.2,0,1.7,0c3.8,0,7.5,0,11.3,0
     c1.2-30.6,15.9-74.8,26-100.4c2.3-8.7,4.6-17.3,6.9-26c5.5-12.1,14.2-26.5,15.6-41.6c-7.1,0.6-74.6,37.4-77.9,41.6
     c-9.8,12-3.4,47.4-21.6,50.2c-2.6-0.9-5.2-1.7-7.8-2.6c-2.9-10.3,4.4-20.8,0.9-29.4c-3.2,2.3-6.4,4.6-9.5,6.9c-5.2-1.7-7-3-10.4-6.1
     c0.3-2.9,0.6-5.8,0.9-8.7c3.1-4.9,7.8-5.7,9.5-12.1c-14.7-0.5-35.4-0.8-32-17.3c1.7-1.7,3.5-3.5,5.2-5.2c19,2.3,38.1,4.6,57.2,6.9
     c24.3-10,47.3-29.5,71-41.6c10.4-4.9,20.8-9.8,31.2-14.7c4.9-10.7,9.8-21.4,14.7-32c6.3-10.4,12.7-20.8,19.1-31.2
     c-13.3-15.1-32-26.2-43.3-43.3c-25.3-38.1-47.3-102-32-166.3c1.4-9.2,2.9-18.5,4.3-27.7c7.2-15.8,13.5-43.8,23.4-57.2
     c10.4-14,31.3-38.2,37.2-53.7c-38.9-23-91-107.2-22.5-138.6c33.4-15.3,77.6,21.5,91.8,36.4c5.1,5.4,13,23.8,20.8,22.5
     c5.2-1.4,11.1-5.5,13.9-9.5c-21.1-32.6-53.3-102-5.2-132.5c38.2-24.2,83.5,14.5,93.5,39.8c3.5,15.3,6.9,30.6,10.4,45.9
     c0.6,0.3,1.2,0.6,1.7,0.9c13.9-4,27.7-8.1,41.6-12.1c21.1-3.5,42.1-6.9,63.2-10.4c22.9-4.9,60.8,7.1,71.9,5.2
     c17.3-5.8,28-21.5,55.4-19.9c58.4,3.3,134.2,90.3,102.2,158.5c-17.8,37.8-94.4,97.4-133.4,116c1.1,9.3,6.1,12,9.5,18.2
     c7.3,13,11.3,29.9,14.7,45.9c13.1,61-11.7,116.9-37.2,148.9c-7.5,7.8-15,15.6-22.5,23.4c12.8,21.6,31.5,41.2,45,63.2
     c4.6,9.2,9.2,18.5,13.9,27.7c9.3,6.8,22.5,4.7,32.9,10.4c18.4,10.1,46.1,22.5,66.7,27.7c9,2.3,42-9.4,58.9-9.5
     c0.9,1.4,1.7,2.9,2.6,4.3c2.6,4.8,0.8,9-1.7,13c-5.5,1.4-11,2.9-16.5,4.3c0.3,1.4,0.6,2.9,0.9,4.3c5.9,1.3,7.5,3.1,11.3,6.1
     c0.3,1.7,0.6,3.5,0.9,5.2C1194.2,1640.6,1183.7,1630.4,1170.7,1628.5z"/>
</svg>
    </div>

运用动画

.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

是不是很简单了?赶紧自己试试吧。

(1)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注