svg 动画_根据AI导出的SVG path制作SVG线条动画

点击右上方红色按钮关注“web秀”,让你真正秀起来

前言

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

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

假如你有这样的一个gif,要用svg画出来,你能想到什么办法了?

303b8ee41010f9dcc21d389212779c1c.gif

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

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

1c457a41bea801fd6daeeb8c069b72ce.png

使用 PS 导出路径

导入图片

ab28413dde235e814d36280ac36ae1e8.png

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

b4cfef4b7c0a0a73e7c46e2b1b64880a.png

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

ca228a23b14098072d3ce1c169b34153.png

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

106f794eb2aa0022cb9b26a4566122ff.png

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

252580db71976e09399ebb120be32b96.png

在 illustrator 中生成 SVG 文件

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

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

a967cea7990b3d15ee215d5da209c4cd.png

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

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

d189ee1d5161c609e91ded3488e220e6.png

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

获取 SVG 的 path 路径

把刚刚保存的 *.svg 路径的文件用浏览器打开,右键查看网页源代码:

ffe86664dff974976f5f4ee61f8de6ec.png

这里的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

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

公告

喜欢小编的点击关注,了解更多知识!

源码地址和源文件下载请点击下方“了解更多”

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/454037.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

读书笔记2013第3本:《无价》

《无价》这本书是过年前买的,网络书店上写着“老罗推荐”,想着好像是在老罗哪一年的演讲里听过这本书,在豆瓣上评分7.9。读书是为了产生行动,读书时要提的4个问题,1)这本书主要在谈些什么?2&…

Linux下的程序调试——GDB

无论是多么优秀的程序员,都难以保证自己在编写代码时不会出现任何错误,因此调试是软件开发过程中的一个必不可少的 组成部分。当程序完成编译之后,它很可能无法正常运行,或者会彻底崩溃,或者不能实现预期的功能。此时如…

圆锥曲线万能弦长公式_2020高考数学50条秒杀型公式与方法

考试马上就要到了,学姐整理了高考数学50条秒杀型公式和方法,希望能帮助考生们更好地攻克数学难关!高考数学秒杀公式与方法一1,适用条件:[直线过焦点],必有ecosA(x-1)/(x1),其中A为直线与焦点所在…

Python 内置模块之 logging

日志的级别和适用情况 级别适用情况DEBUG详细信息,通常只在诊断问题时对其感兴趣INFO确认工作正常WARNING表示发生了意料之外的事或者在不远的将来会有问题(比如磁盘空间低)。软件依然正常工作ERROR由于一个更加严重的问题,软件不…

数据结构与算法 Python语言描述 笔记

数据结构 线性表包括顺序表和链表,python的list是顺序表,链表一般在动态语言中不会使用。不过链表还是会出现在各种算法题中。 链表 link list 单链表 逆转链表: leetcode 206双链表循环单链表字符串 string 有一个重要的点就是字符串的匹配问…

Flask 跨域问题

一、什么是跨域 跨域是指:浏览器A从服务器B获取的静态资源,包括Html、Css、Js,然后在Js中通过Ajax访问C服务器的静态资源或请求。即:浏览器A从B服务器拿的资源,资源中想访问服务器C的资源。 同源策略是指:…

1.3 使用电脑测试MC20的电话语音功能

需要准备的硬件 MC20开发板 1个https://item.taobao.com/item.htm?id562661881042GSM/GPRS天线 1根https://item.taobao.com/item.htm?id531979567261IPEX接口转SMA接口转接线 1根https://item.taobao.com/item.htm?id531979903836GPS有源天线 1根https://item.taobao.com/i…

前端之 AJAX

AJAX参数详细列表 参数名类型描述urlString(默认: 当前页地址) 发送请求的地址。typeString(默认: "GET") 请求方式 ("POST" 、 "GET")。注意:其它 HTTP 请求方法,如 PUT 和 DELETE ,但仅部分浏览器支持。tim…

html5--1.18 div元素与布局

1.18 div元素与布局 1.元素的分类2.div元素与布局 1、元素的分类 块元素:主要特征是会产生换行效果,自动与其他元素分离成两行;通常可以作为容器在内部添加其他元素。已经学过的块元素有: h1~h6;hr;ul;ol;p;table......... 内联元素:不会产生…

五个优秀的视频格式转换工具

电脑、手机、DVD播放机、PSP……这么多的东西都可以播放视频,但是视频格式又千差万别的,我们该怎么办?这里,我们介绍五个功能强大且易于使用的媒体转换器,用于转换不同类型的视频文件。 一、Super (Windows) Super是一…

艾宾浩斯记忆表格excel_Excel全年学习复习计划表(艾宾浩斯遗忘曲线)

最近准备考在职博士,刷刷学历,不得不又拿起必考的英语来,发现由于这几年敲代码,日常生活词汇忘了很多,只好买本考博词汇背诵,不过三十而立的人背起来确实费劲了,所以开始寻找好的背诵方法。又想…

七个帮助你处理Web页面层布局的jQuery插件

1.UI.Layout jQuery UI布局插件官方网站:http://layout.jquery-dev.com/index.cfm使用大小可折叠的嵌套面板和大量选项创建高级UI布局。布局可以创建任何你想要的UI外观; 从简单的标题或侧边栏到具有工具栏,菜单,帮助面板,状态栏…

前端之 CSS

CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。 CSS语法 CSS实例 每个CSS样式由两个组成部分:选择器…

在Window下编译OpenH323

前言: 本文只提供VC6.0的编译说明,如果想知道VC.Net下的编译过程请参看原文。 原文 : http://www.voxgratia.org/docs/pwlib_windows.html#msvc_headers 作者 :Craig Southeren 翻译 : Richard 原文…

matlab立体坐标定位_无惧密集建筑,小天才立体定位技术带来最强定位体验

如今,在可穿戴设备市场中,智能手表占据相当大一部分。而作为核心功能之一的定位,在智能手表中发挥着不可替代的作用,尤其是对于儿童电话手表而言。并且,在技术飞速进步,产品迭代加快的当前,儿童…

svga文件如何查看_电脑隐藏文件?如何查看隐藏文件 方法简单易学

大家好,我是小白一键重装软件的客服。如何查看隐藏文件呢?有时候不小心把文件夹勾选隐藏后文件就消失了,到底是怎么回事呢?其实这个是电脑上面一些设置开启了文件隐藏的功能哦,那么下面小白系统带你了解下如何查看隐藏…

化工图纸中LISP_必备干货丨石油化工安装工程质量与成本控制研究

对于整个石油化工工程来说,石油化工的安装工程在其中是最重要并且最核心的一个环节,其对石油化工工程的质量有着决定性的作用。从客观的角度来说,如果石油化工安装工程在实际的施工过程中出现任何的问题,就会威胁到周边人群的生命…

[原创]windows server 2012 AD架构 试验 系列 – 15解决AD复制冲突

[原创]windows server 2012 AD架构 试验 系列 – 15解决AD复制冲突 这节我详细说下 ADDS使用stamp来作为解决冲突的依据 Stamp由三块组成 Version, time stamp , source DC GUID (发生对象修改行为的源DC的GUID) 一般来说冲突分为几下情况: 1-属性冲突 你可以用repadmin来查看版…

vue新手入门——vue-cli搭建

首先说明,以下内容vue官网都有文档,如果觉得麻烦啰嗦,请移步至 安装-vue.js 。 准备工作: 1.下载并安装node环境,一般情况下安装好node之后,npm也会安装好。具体安装的话,百度大概能帮得上忙。 …

如何看懂源代码–(分析源代码方法)

我们在写程式时,有不少时间都是在看别人的代码。例如看小组的代码,看小组整合的守则,若一开始没规划怎么看, 就会“噜看噜苦(台语) ” 不管是参考也好,从开源抓下来研究也好,为了了解…